javascript InvalidStateError：DOM Exception 11 和 Uncaught TypeError：无法调用 null 的方法“提交”

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

提问by akashaggarwaal

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.sendbut 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

我搜索了一个可能的答案，并通过了一些帖子，包括 如何修复“未捕获的类型错误：无法调用 null 的方法‘appendChild’”和在 websocket.send 期间接收“InvalidStateError：DOM Exception 11”，但它们似乎都没有解决我的问题。将数据从 html 表单保存到 mysql 数据库的保存按钮工作正常，直到页面开始出现两个错误

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 37which 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.

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()"并且表单 studentdata 存在于同一页面上。

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

请强调这些错误的原因以及我可以做些什么来解决它们。以下是相关代码。

createoptions.js

创建选项.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>

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>

回答by Sumurai8

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

您的第一个错误"Uncaught error: InvalidStateError: DOM Exception 11 on createoptions.js line 37是由操作 DOM 引起的。我认为这可能与您有两个带有 id 的元素departmentselect1或具有相同 id 的 div 是无效语法的事实有关，因为它不能是select元素的子元素。您可以在 Chrome 中单击此错误旁边的箭头，并将其追踪到实际发生的位置。类似的问题。

Uncaught TypeError: Cannnot call method "submit" of nullmeans that document.getElementById('studentdata')didn't match any elements and therefore returned null. nullhas 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.

Uncaught TypeError: Cannnot call method "submit" of null表示document.getElementById('studentdata')不匹配任何元素，因此返回null. null没有方法，因此它会抛出这个错误。这很奇怪，但由于您的表单具有双重 ID 且语法无效，因此可能具有未定义的行为。尝试解决第一个问题，它可能会神奇地解决另一个问题。

Edit:

编辑：

I still think you should debug the value of valuein your setdepartmentfunction 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?

我仍然认为你应该调试的价值value在你的setdepartment功能不工作的菜单。如果值不匹配任何情况，您的函数有什么行为？不起作用的菜单的响应数据是什么？