使用submit（）从链接提交的表单不能被onsubmit处理程序捕获 [英] Form submitted using submit() from a link cannot be caught by onsubmit handler

问题描述

令人惊讶的是，我在JS中提交表单时遇到了这个奇怪的问题。 rel =nofollow>问题：

考虑使用两种方式从提交提交的简单表单按钮和锚链接

 < form method =POST action =page.htmlname =foobarid =test> 
< input type =text/> 
< input type =submit/> 
< / form> 
 
< a href =＃onclick =document.getElementById（'test'）。submit（）;>点击我< / a> 
  

捕获提交事件的功能

  document.getElementById（'test'）。onsubmit = function（）{
 //与
相同的结果// * document.foobar.onsubmit 
 // * document.forms ['foobar']。onsubmit 
 
 alert（'foobar'）; 
返回false; 
} 
  

现在，通过点击提交按钮我得到警报，但不是点击链接。为什么这样做？

小提琴显示问题

解决方案

为了提供合理确定的答案， a> item 5表示，如果一个表单没有通过调用submit方法来提交submit表达式，那么它只会发送一个submit事件（这意味着只有通过按钮或其他隐式方法提交时才调度submit事件，例如：输入类型的文本元素）。

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

这不同于 DOM 2 HTML规范，其中表示提交方法应该做什么ubmit按钮。

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

如果您需要传递参数或执行其他操作，生活将变得更加艰难。

Surprised, I am encountering this weird issue while submitting form from JS.

Issue:

Consider a simple form submitted using two ways from a submit button and an 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>

Function catching the submit event

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

   alert('foobar');
   return false;
}

Now, when the form is submitted from clicking the submit button I get the alert, but not when clicking the link. Why is this doing so?

Fiddle Showing the Issue

解决方案

To provide a reasonably definitive answer, the HTML Form Submission Algorithm item 5 states that a form only dispatches a submit event if it was not submitted by calling the submit method (which means it only dispatches a submit event if submitted by a button or other implicit method, e.g. pressing enter while focus is on an input type text element).

If no submit event is dispatched, then the submit handler won't be called.

That is different to the DOM 2 HTML specification, which said that the submit method should do what the submit button does.

So if you want to use script to submit a form, you should manually call the submit listener. If the listener was added using addEventListener, then you'll need to remember that and to call it since you can't discover it by inspecting the form (as suggested below).

If the listener is set inline, or added to the DOM onsubmit property, you can do something like:

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

Life is tougher if you need to pass parameters or do other things.

这篇关于使用submit（）从链接提交的表单不能被onsubmit处理程序捕获的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！