Question

很惊讶，我在从JS提交表单时遇到了这个奇怪的问题。

Issue:

考虑使用submit按钮和anchor link

两种方式提交的简单表单

<form method="POST" action="page.html" name="foobar" id="test">
  <input type="text" />
  <input type="submit" />
</form>

<a href="#" onclick="document.getElementById('test').submit();">click me</a>

捕获提交事件的功能

document.getElementById('test').onsubmit = function() {
   // Same result with 
   //     * document.foobar.onsubmit
   //     * document.forms['foobar'].onsubmit

   alert('foobar');
   return false;
}

现在，当点击submit按钮提交表单时，我会收到提醒，但则不会点击链接。为什么这样做？

Fiddle Showing the Issue

Answer 1

为了提供合理明确的答案，HTML Form Submission Algorithm项目5指出，如果未通过调用submit方法提交表单，则表单仅调度提交事件（这意味着只有在提交时才调度提交事件）按钮或其他隐式方法，例如，当焦点在输入类型文本元素上时按Enter键。

如果没有调度submit事件，则不会调用提交处理程序。

这与DOM 2 HTML specification不同，{{3}}表示提交方法应该按照提交按钮执行。

因此，如果您想使用脚本提交表单，则应手动调用提交侦听器。如果使用 addEventListener 添加了侦听器，那么您需要记住它并调用它，因为您无法通过检查表单来发现它（如下所示）。

如果侦听器设置为内联，或添加到DOM onsubmit 属性，则可以执行以下操作：

<form onsubmit="return validate(this);" ...>
  ...
</form>
<button onclick="doSubmit()">submit form</button>

<script>
function doSubmit() {
  var form = document.forms[0];

  if (form.onsubmit) {
    var result = form.onsubmit.call(form);
  }

  if (result !== false) {
    form.submit();
  }
}
</script>

如果你需要传递参数或做其他事情，生活会更艰难。

Answer 2

这就是form.submit的行为方式;

表单的onsubmit事件处理程序（例如，onsubmit =“return false;“）<）>从中调用此方法时不会被触发基于Gecko的应用程序。一般来说，不能保证由HTML用户代理调用

让onsubmit调用一个函数，并简单地调用onclick。

使用提交（）从链接提交的表单不能被onsubmit处理程序捕获

Issue:

2 个答案: