Javascript onsubmit处理程序无法捕获从链接使用submit（）提交的表单

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

考虑使用两种方式提交一个简单表单，一种是

提交

按钮，另一种是

锚定链接

<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>

现在，当通过单击

submit

按钮提交表单时，我会收到警报，但单击链接时不会收到警报。为什么会这样

这就是行为方式

表单的onsubmit事件处理程序（例如，onsubmit=“return false；“”从调用此方法时不会触发 基于Gecko的应用程序。一般来说，这并不能保证是正确的 由HTML用户代理调用

---

让

onsubmit

调用一个函数，并简单地调用

onclick

。

为了提供一个合理明确的答案，第5项规定，如果表单未通过调用submit方法提交，则表单仅发送提交事件（这意味着只有通过按钮或其他隐式方法提交时，它才会发送提交事件，例如，在焦点位于输入类型文本元素上时按enter键）

如果未调度任何提交事件，则不会调用提交处理程序

这与的不同，后者说提交方法应该做提交按钮所做的事情

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

...
提交表格
函数doSubmit（）{
var form=document.forms[0]；
if（表格onsubmit）{
var result=form.onsubmit.call（form）；
}
如果（结果！==false）{
表单提交（）；
}
}

---

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

将

onclick=“document.getElementById（'test'）.submit（）；”

替换为

onclick=“document.getElementById（'test'）.onsubmit（）；“

@javascriptisfuture，LOL Nice Hack！！：）@javascriptisfuture，不提交表单，它只是调用onsubmit侦听器，我知道它不会被调用。但是，你知道为什么会这样吗？或者，浏览器就是这样设计的吗？该事件设计为仅当用户提交表单时触发，而不是当用户也通过单击锚链接并调用方法提交表单时触发。不，他们单击的锚链接恰好调用了。submitmethod@AlexK-报告说提交方法“提交表格。它执行与提交按钮相同的操作。”，因此在我看来，如果不发送提交事件，它也会导致调用表单的提交侦听器，这是合理的。然而，这不是某些（大多数？）浏览器所做的。

<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>