jQuery 提交无法与 一起使用

Question

我正在尝试创建一个提交表单的链接。为什么当我将提交输入元素命名为 submit 时，链接不再有效？

 //breaks form submission
 <input type="submit" value="Submit" name="submit" />

 //does not break form submission
 <input type="submit" value="Submit" name="xsubmit" />

在 Chrome 中我收到以下错误。

Uncaught TypeError: Property 'submit' of object #<HTMLFormElement> is not a function

不工作

<p>Type 'correct' to validate.</p>
  <form method="post" enctype="multipart/form-data">
    <input type="submit" value="Submit" name="submit" />

    <a id="btn_submit">
        <span id="txt_submit">Submit</span>
    </a>
  </form>

<script>

$("#btn_submit").click(function() {
     $("form").submit();
    });

    $("form").submit(function() {

    });
</script>

工作

 <p>Type 'correct' to validate.</p>
  <form method="post" enctype="multipart/form-data">
    <input type="submit" value="Submit" name="xsubmit" />

    <a id="btn_submit">
        <span id="txt_submit">Submit</span>
    </a>
  </form>

<script>

$("#btn_submit").click(function() {
     $("form").submit();
    });

    $("form").submit(function() {

    });
</script>

Answer 1

“提交”是保留字。它与javascript冲突。只需将输入的名称更改为其他名称即可。

来自方法 submit() 的 jQuery 文档：

表单及其子元素不应使用以下输入名称或 ID
与表单的属性冲突，例如提交、长度或方法。
名称冲突可能会导致混乱的故障。如需完整列表
规则并检查您的标记是否存在这些问题，请参阅 DOMLint。

Answer 2

两个更改：

$(function () {

$("#btn_submit").click(function(e) {
     e.preventDefault();
     $("form").submit();
    });

    $("form").submit(function() {

    });

});

首先，将绑定包含在 document.ready 处理程序中 $(function () {...});
其次，在事件上添加 PreventDefault 调用以停止正常的锚点功能。