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>

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>

• javascript
• html
• dom

• can show the savedata.php but i don't think it would be needed. – akashaggarwaal Commented Jul 5, 2013 at 19:27
• do console.log( value ); inside your setdepartment function. Does it actually match any of your 'case' values? – Sumurai8 Commented Jul 5, 2013 at 19:28
• I am getting the values in my second drop down, that should the setdepartment function is working fine. What I am more concerned about is the second error that i get on clicking submit button. – akashaggarwaal Commented Jul 5, 2013 at 19:37
• I notice two elements with the same id. An id should always be unique, so change one of the elements with id departmentselect1. – Sumurai8 Commented Jul 5, 2013 at 19:45
• yup, but seriously with the same ids, i was able to save data to the database before. What is the possible reason for ` Cannnot call method "submit" of null` here. – akashaggarwaal Commented Jul 5, 2013 at 19:57

1 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?