6

很惊讶，我在从 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按钮提交表单时，我会收到警报，但在单击链接时却没有。为什么这样做？

小提琴显示问题

4

2 回答 2

12

为了提供一个合理确定的答案，HTML 表单提交算法第 5 项指出，如果表单没有通过调用 submit 方法提交，它只会调度提交事件（这意味着如果通过按钮或其他隐式提交，它只会调度提交事件方法，例如在焦点位于输入类型文本元素上时按 Enter）。

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

这与DOM 2 HTML 规范不同，后者说提交方法应该做提交按钮所做的事情。

所以如果你想使用脚本提交表单，你应该手动调用提交监听器。如果侦听器是使用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>

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

于 2012-10-10T13:42:05.437 回答
1

这就是form.submit行为方式；

从基于 Gecko 的应用程序调用此方法时，不会触发表单的 onsubmit 事件处理程序（例如，onsubmit="return false;"） 。一般情况下，不保证会被 HTML 用户代理调用

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

于 2012-10-10T12:34:44.033 回答