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

Question

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

问题:

考虑使用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按钮提交表单时,我会收到警报,但是在单击链接时则不会.这是为什么这样做的？

小提琴显示问题

Answer 1

为了提供合理明确的答案,HTML表单提交算法第 5项规定,如果未通过调用submit方法提交表单,则表单仅调度提交事件(这意味着它仅在按钮或其他隐式提交时调度提交事件方法,例如,当焦点在输入类型文本元素上时按下输入).

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

这与DOM 2 HTML规范不同,后者表示submit方法应该执行提交按钮的功能.

因此,如果要使用脚本提交表单,则应手动调用提交侦听器.如果使用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>

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