javascript - InvalidStateError: DOM Exception 11 および Uncaught TypeError: null のメソッド 'submit' を呼び出せません

Question

考えられる答えを探して、 「Uncaught TypeError: Cannot call method 'appendChild' of null」を修正する方法や、 websocket.send 中に「InvalidStateError: DOM Exception 11」を受け取る方法など、いくつかの投稿を調べましたが、どれも解決していないようです私の問題。html フォームから mysql データベースにデータを保存するための保存ボタンは、ページで 2 つのエラーが発生し始めるまでは問題なく機能していました。

1. ページのドロップダウンは、ajax を使用してデータベースから動的に更新されます。それらはまだ正常に機能しており、選択したオプションに応じて自動的に更新されますが、ドロップダウンのいずれかをクリックすると、エラーコンソールにどれが表示されるかが表示"Uncaught error: InvalidStateError: DOM Exception 11 on createoptions.js line 37されますxmlhttp.send();

2. 保存ボタンをクリックすると、応答やデータベースへのデータの保存の代わりに、というエラーが表示されますUncaught TypeError: Cannnot call method "submit" of null。注意してください、submit() メソッドを呼び出すオブジェクトは既に存在します。私が使用document.getElementById('studentdata').submit()"したフォームの学生データは同じページにあります。

これらのエラーの理由と、それらを解決するために何ができるかを強調してください。以下は関連するコードです。

createoptions.js

function setdepartment(value){
  var xmlhttp;
  if (window.XMLHttpRequest)
  {// code for IE7+, Firefox, Chrome, Opera, Safari
    xmlhttp=new XMLHttpRequest();
  }
  else
  {// code for IE6, IE5
    xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }
  xmlhttp.onreadystatechange=function()
  {
    if (xmlhttp.readyState==4 && xmlhttp.status==200)
    {
      document.getElementById("departmentselect1").innerHTML=xmlhttp.responseText;
    }
  }


  switch(value){
    case "Allied Health Sciences" : xmlhttp.open("GET","deptahs.php",true); break;
    case "Engineering and Inter-disciplinary sciences" : xmlhttp.open("GET","depteids.php",true); break;
    case "HIMSR" : xmlhttp.open("GET","depthimsr.php",true); break;
    case "Islamic Studies and Social Sciences" : xmlhttp.open("GET","deptisss.php",true); break;
    case "Management and Information Technology" : xmlhttp.open("GET","deptmanagement.php",true); break;
    case "Medicine (Unani)" : xmlhttp.open("GET","deptmedicine.php",true); break;
    case "Nursing" : xmlhttp.open("GET","deptnursing.php",true); break;
    case "Pharmacy" : xmlhttp.open("GET","deptpharmacy.php",true); break;
    case "Science" : xmlhttp.open("GET","deptscience.php",true); break;
  }  

  xmlhttp.send();

}

page.php と参照されている行は<li><a class="button black" form="studentdata" onclick="document.getElementById('studentdata').submit()">Save</a></li>

<div class="navbutton">
  <aside>
    <ul>
      <li><a class="button black" href="logout.php">Logout</a></li>
      <li><a class="button black" onclick="addRow()">Add Row</a></li>
      <li><a href="#searchbox" class="button black" onclick="showsearch()">Search</a></li>
      <li><a href="#promotediv" class="button black" onclick="showpromote()">Promote</a></li>
      <li><a class="button black" form="studentdata" onclick="document.getElementById('studentdata').submit()">Save</a></li>
    </ul>
  </aside>
</div>

<form id="studentdata" action="savedata.php" method="POST">
  <div style=" padding-left:350px; ">   
    <div  class="dropdown dropdown-dark">
    <select name="facultyselect1" id="facultyselect1" style="width:300px;" class="dropdown-select " onfocus="setdepartment(this.value)" onchange="setdepartment(this.value)" required>
        <option value="">Select an option</option>

        <div id="facultyselect1">
                        <?php
                            @ $db = mysql_connect("localhost", "root", "");
                            mysql_select_db("university");
                            $strSQL = "SELECT facultyname FROM faculty";
                            $rs = mysql_query($strSQL);
                            $nr = mysql_num_rows($rs);
                            for ($i=0; $i<$nr; $i++) {
                            $r = mysql_fetch_array($rs);
                            echo "<OPTION VALUE=\"".$r["facultyname"]."\">".$r["facultyname"]."</OPTION>";
                            }
                        ?>
        </div>
      </SELECT>
    </div> 


    <div class="dropdown dropdown-dark">
      <select name="departmentselect1" id="departmentselect1" class="dropdown-select" onchange="setcourse(this.value)" onfocus="setcourse(this.value)" required>
        <option value="">Select an option</option>

        <div id="departmentselect1">
        </div>
      </select>
    </div> 

  </div>
</form>