InvalidStateError: DOM Exception 11 and Uncaught TypeError: Cannot call method 'submit' of null

Question

I searched for a possible answer and got myself through a few posts including How to fix "Uncaught TypeError: Cannot call method 'appendChild' of null" and Receiving "InvalidStateError: DOM Exception 11" during websocket.send but none of them seem to solve my problem. The save button to save data from html form to mysql database was working perfectly fine until the page started giving two errors

1. The drop downs on the page are updated dynamically from the database using ajax. They are still working fine, and automatically updated depending on the option selected but when i click on any of the drop downs, the error console show "Uncaught error: InvalidStateError: DOM Exception 11 on createoptions.js line 37 which is xmlhttp.send();

2. When i click the save button, instead of any response or saving data to database an error shows up that says, Uncaught TypeError: Cannnot call method "submit" of null. To take care, the object that calls submit() method already exists. I used document.getElementById('studentdata').submit()" and the form studentdata exists on the same page.

Kindly highlight the reason for these errors and what can i do to resolve them. Following is the related code.

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 and the line being referred is <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>

Answer 1

Your first error "Uncaught error: InvalidStateError: DOM Exception 11 on createoptions.js line 37 is caused by manipulating the DOM. I think it might be related to the fact that you have two elements with id departmentselect1 or that the div with the same id is invalid syntax, as it cannot be a child of a select element. You can click the arrow next to this error in Chrome and trace it to the point where it actually happened. Similar question.

Uncaught TypeError: Cannnot call method "submit" of null means that document.getElementById('studentdata') didn't match any elements and therefore returned null. null has no methods, and therefore it will throw this error. This is strange, but as your form has double id's and has invalid syntax and can therefore have undefined behaviour. Try fixing the first problem and it might magically solve the other one.

Edit:

I still think you should debug the value of value in your setdepartment function for the menu that doesn't work. What behaviour does your function have if the value doesn't match any case? What is the response data for the menu that doesn't work?