未捕获的类型错误：提交表单时无法读取未定义的属性“元素”答案

【问题标题】：Uncaught TypeError: Cannot read property 'element' of undefined when submitting form未捕获的类型错误：提交表单时无法读取未定义的属性“元素”
【发布时间】：2016-03-26 04:22:37
【问题描述】：

我有一个使用 PHP 的 HTML div 输出，当单击“提交”时，它应该提交表单并触发 JS 函数。提交时，Chrome 中的 JS 控制台给我以下错误：

未捕获的类型错误：无法读取未定义的属性“元素”

我的 HTML（包装在 PHP heredoc 中）

<div id="tab5" class="tab">
     <div id="reopen_case_form">
        This Case has been previously closed by Workbooks Support. You can re-open this ticket at any time by providing a reason why you'd like to do so and clicking "Re-open Case".
        <table class="update_case">
         <tr><td style="padding: 10px">Summary:<input id="name" name="name" type="text" size="80" maxlength="255" class="required"/></td></tr>
         <tr><td><textarea id="description" name="description" cols="255" rows="50"></textarea></td></tr>
         <tr>
          <td colspan="2" style="padding-top: 10px;">
            <input type="file" class="file" name="file1" id="file1" style="display: inline">
            <input type="file" class="file" name="file2" id="file2" style="display: inline">
            <input type="file" class="file" name="file3" id="file3" style="display: inline">
          </td></tr>
      </table>
      <p><button type="submit" onclick="on_reopen_case()" style="float:left; margin-top: 10px; margin-bottom: 10px;" value="reopen_case" id="reopen_case" name="reopen_case" class="quietbutton">Re-open Case</button></p>
    </div>
  </div>

我的 Javascript：

<script type="text/javascript">
    function on_reopen_case() {
      if (!$("#reopen_case_form").valid()){ return false; }
      $('#reopen_case').attr('disabled', 'disabled');
      $('#reopen_case').text('Re-opening case. Please wait...');
      document.body.style.cursor = "progress";
      $("#function").val("reopen_case");
      fade();
      $("#reopen_case_form").submit();
    };
  </script>

表单似乎已提交，但没有将按钮文本更改为“重新打开案例”，也没有将#function 设置为指定值。

令人讨厌的是，我在其他地方也使用过类似的方法：

<div id="tab3" class="tab">
     <div id="update_case_form">
        Provide a summary and detailed description of your update below, including screenshots where applicable. Click "Update Case" to submit your update to the Workbooks Support team.
      <table class="update_case">
         <tr><td style="padding: 10px">Summary:<input id="name" name="name" type="text" size="80" maxlength="255" class="required"/></td></tr>
         <tr><td><textarea id="description" name="description" cols="255" rows="50"></textarea></td></tr>
         <tr>
          <td colspan="2" style="padding-top: 10px;">
            <input type="file" class="file" name="file1" id="file1" style="display: inline">
            <input type="file" class="file" name="file2" id="file2" style="display: inline">
            <input type="file" class="file" name="file3" id="file3" style="display: inline">
          </td></tr>
      </table>
      <p><button type="submit" onclick="on_create_activity()" style="float:left; margin-top: 10px; margin-bottom: 10px;" value="create_activity" id="create_activity" name="create_activity" class="quietbutton">Update Case</button></p>
     </div>
  </div>

Javascript

 <script type="text/javascript">
    function on_create_activity() {
      if (!$("#update_case_form").valid()){ return false; }
      $('#create_activity').attr('disabled', 'disabled');
      $('#create_activity').text('Updating case. Please wait...');
      document.body.style.cursor = "progress";
      $("#function").val("create_activity");
      fade();
      $("#update_case_form").submit();
    };
  </script>

我这辈子都想不通我哪里出错了！帮助....

【问题讨论】：

你的form在哪里？
正如@mariocatch 所说，您需要使用<form> 元素才能使用submit() 事件。将您的<div id="reopen_case_form"> 更改为<form..，然后看看您会遇到什么错误:)
刚刚快速尝试过，我现在收到类似的消息：未捕获的类型错误：无法读取未定义的属性“表单”
你在 php 中循环创建<div id="reopen_case_form">.... 吗？同一个 html 文档中是否有可能有 n 和 <div id="reopen_case_form">？
我正在屏幕底部创建选项卡，其中一个选项卡内容是通过 PHP foreach 循环生成的。虽然它没有提交按钮。对reopen_case_form 的引用只存在一次...

标签： javascript html

【解决方案1】：

我认为我可能已经想通了...我使用的嵌套表单显然是不允许的...Cannot Read Property 'Elements' of Undefined - in JS Console

谢谢大家的建议:)

【讨论】：