title: InvalidStateError: DOM Exception 11 and Uncaught TypeError: Cannot call method 'submit' of null
body: <p>I searched for a possible answer and got myself through a few posts including 
  <a href="https://stackoverflow.com/questions/14946428/how-to-fix-uncaught-typeerror-cannot-call-method-appendchild-of-null">How to fix &quot;Uncaught TypeError: Cannot call method &#39;appendChild&#39; of null&quot;</a> and <a href="https://stackoverflow.com/questions/15088388/receiving-invalidstateerror-dom-exception-11-during-websocket-send">Receiving &quot;InvalidStateError: DOM Exception 11&quot; during websocket.send</a> 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<img src="https://i.stack.imgur.com/guI4R.png" alt="enter image description here"></p>
  
  <ol>
  <li><p>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 <code>"Uncaught error: InvalidStateError: DOM Exception 11 on createoptions.js line 37</code> which is <code>xmlhttp.send();</code></p></li>
  <li><p>When i click the save button, instead of any response or saving data to database an error shows up that says, <code>Uncaught TypeError: Cannnot call method "submit" of null</code>. To take care, the object that calls submit() method already exists. I used <code>document.getElementById('studentdata').submit()"</code> and the form studentdata exists on the same page.</p></li>
  </ol>
  
  <p>Kindly highlight the reason for these errors and what can i do to resolve them. Following is the related code.</p>
  
  <p>createoptions.js</p>
  
  <pre><code>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 &amp;&amp; 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();
  
  }
  </code></pre>
  
  <p>page.php and the line being referred is <code>&lt;li&gt;&lt;a class="button black" form="studentdata" onclick="document.getElementById('studentdata').submit()"&gt;Save&lt;/a&gt;&lt;/li&gt;</code></p>
  
  <pre><code>&lt;div class="navbutton"&gt;
    &lt;aside&gt;
      &lt;ul&gt;
        &lt;li&gt;&lt;a class="button black" href="logout.php"&gt;Logout&lt;/a&gt;&lt;/li&gt;
        &lt;li&gt;&lt;a class="button black" onclick="addRow()"&gt;Add Row&lt;/a&gt;&lt;/li&gt;
        &lt;li&gt;&lt;a href="#searchbox" class="button black" onclick="showsearch()"&gt;Search&lt;/a&gt;&lt;/li&gt;
        &lt;li&gt;&lt;a href="#promotediv" class="button black" onclick="showpromote()"&gt;Promote&lt;/a&gt;&lt;/li&gt;
        &lt;li&gt;&lt;a class="button black" form="studentdata" onclick="document.getElementById('studentdata').submit()"&gt;Save&lt;/a&gt;&lt;/li&gt;
      &lt;/ul&gt;
    &lt;/aside&gt;
  &lt;/div&gt;
  
  &lt;form id="studentdata" action="savedata.php" method="POST"&gt;
    &lt;div style=" padding-left:350px; "&gt;   
      &lt;div  class="dropdown dropdown-dark"&gt;
      &lt;select name="facultyselect1" id="facultyselect1" style="width:300px;" class="dropdown-select " onfocus="setdepartment(this.value)" onchange="setdepartment(this.value)" required&gt;
          &lt;option value=""&gt;Select an option&lt;/option&gt;
  
          &lt;div id="facultyselect1"&gt;
                          &lt;?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&lt;$nr; $i++) {
                              $r = mysql_fetch_array($rs);
                              echo "&lt;OPTION VALUE=\"".$r["facultyname"]."\"&gt;".$r["facultyname"]."&lt;/OPTION&gt;";
                              }
                          ?&gt;
          &lt;/div&gt;
        &lt;/SELECT&gt;
      &lt;/div&gt; 
  
  
      &lt;div class="dropdown dropdown-dark"&gt;
        &lt;select name="departmentselect1" id="departmentselect1" class="dropdown-select" onchange="setcourse(this.value)" onfocus="setcourse(this.value)" required&gt;
          &lt;option value=""&gt;Select an option&lt;/option&gt;
  
          &lt;div id="departmentselect1"&gt;
          &lt;/div&gt;
        &lt;/select&gt;
      &lt;/div&gt; 
  
    &lt;/div&gt;
  &lt;/form&gt;
  </code></pre>