jQuery 的 $(form).submit(); 不在表单标签内触发 onSubmit ？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/645555/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Should jQuery's $(form).submit(); not trigger onSubmit within the form tag?
提问by Darryl Hein
I have the following:
我有以下几点：
<script type="text/javascript">
function CancelFormButton(button) {
$(button.form).submit();
}
</script>
<form onsubmit="alert('here');">
<input type="button" value="Cancel" onClick="CancelFormButton(this);" />
</form>
When I click the "Cancel" button, the onsubmit from the form tag is not triggered.
当我单击“取消”按钮时，不会触发表单标记的 onsubmit。
This line instead submits the form successfully: $(button.form).submit();but skips the alert('here');within the onsubmit in the form tag.
这一行反而成功提交了表单：$(button.form).submit();但跳过alert('here');了表单标签中的 onsubmit 。
Is this correct or am I doing something wrong?
这是正确的还是我做错了什么？
By the way, in this case, I want this functionality, but I'm just wondering if I'm going to run into a problem in a browser where the onsubmit is triggered.
顺便说一下，在这种情况下，我想要这个功能，但我只是想知道我是否会在触发 onsubmit 的浏览器中遇到问题。
回答by cletus
Sorry, misunderstood your question.
对不起，误解了你的问题。
According to Javascript - capturing onsubmit when calling form.submit():
根据Javascript - 在调用 form.submit() 时捕获 onsubmit：
I was recently asked: "Why doesn't the form.onsubmit event get fired when I submit my form using javascript?"
The answer: Current browsers do not adhere to this part of the html specification. The event only fires when it is activated by a user - and does not fire when activated by code.
最近有人问我：“当我使用 JavaScript 提交表单时，为什么 form.onsubmit 事件没有被触发？”
答案：当前的浏览器不遵守 html 规范的这一部分。该事件仅在被用户激活时触发-并且在被代码激活时不会触发。
(emphasis added).
（强调）。
Note:"activated by a user" also includes hitting submit buttons (probably including default submit behaviour from the enter key but I haven't tried this). Nor, I believe, does it get triggered if you (with code) click a submit button.
注意：“由用户激活”还包括点击提交按钮（可能包括来自 enter 键的默认提交行为，但我还没有尝试过）。我相信，如果您（使用代码）单击提交按钮，它也不会被触发。
回答by Hashbrown
Thiswork around will fix the issue found by @Cletus.
此变通方法将解决@Cletus 发现的问题。
function submitForm(form) {
//get the form element's document to create the input control with
//(this way will work across windows in IE8)
var button = form.ownerDocument.createElement('input');
//make sure it can't be seen/disrupts layout (even momentarily)
button.style.display = 'none';
//make it such that it will invoke submit if clicked
button.type = 'submit';
//append it and click it
form.appendChild(button).click();
//if it was prevented, make sure we don't get a build up of buttons
form.removeChild(button);
}
Will work on all modern browsers.
Will work across tabs/spawned child windows (yes, even in IE<9).
And is in vanilla!
将适用于所有现代浏览器。
将跨选项卡/生成的子窗口工作（是的，即使在 IE<9 中）。
而且是香草！
Just pass it a DOM reference to a form element and it'll make sure all the attached listeners, the onsubmit, and (if its not prevented by then) finally, submit the form.
只需将 DOM 引用传递给表单元素，它就会确保所有附加的侦听器、onsubmit 和（如果当时没有阻止）最后提交表单。
回答by tandrewnichols
I suppose it's reasonable to want this behavior in some cases, but I would argue that code not triggering a form submission should (always) be the default behavior. Suppose you want to catch a form's submission with
我认为在某些情况下希望这种行为是合理的，但我认为不触发表单提交的代码应该（始终）是默认行为。假设你想捕捉一个表单的提交
$("form").submit(function(e){
e.preventDefault();
});
and then do some validation on the input. If code could trigger submit handlers, you could never include
然后对输入进行一些验证。如果代码可以触发提交处理程序，你永远不能包括
$("form").submit()
inside this handler because it would result in an infinite loop (the SAME handler would be called, prevent the submission, validate, and resubmit). You need to be able to manually submit a form inside a submit handler without triggering the same handler.
在此处理程序内部，因为它会导致无限循环（将调用 SAME 处理程序，阻止提交、验证和重新提交）。您需要能够在提交处理程序中手动提交表单而不触发相同的处理程序。
I realize this doesn't ANSWER the question directly, but there are lots of other answers on this page about how this functionality can be hacked, and I felt that this needed to be pointed out (and it's too long for a comment).
我意识到这并不能直接回答这个问题，但是这个页面上还有很多其他关于如何破解这个功能的答案，我觉得需要指出这一点（评论太长了）。
回答by rukeba
My simple solution:
我的简单解决方案：
$("form").children('input[type="submit"]').click();
It is work for me.
这对我来说是工作。
回答by f.jafari
trigger('submit') does not work.beacuse onSubmit method does not get fired. the following code works for me, call onSubmit method when using this code :
trigger('submit') 不起作用。因为 onSubmit 方法不会被触发。以下代码适用于我，使用此代码时调用 onSubmit 方法：
$("form").find(':submit').click();
$("form").find(':submit').click();
回答by Sergei
Try to trigger() event in your function:
尝试在您的函数中触发() 事件：
$("form").trigger('submit'); // and then... do submit()
回答by ashkufaraz
Instead of
代替
$("form").submit()
$("form").submit()
try this
尝试这个
$("<input type='submit' id='btn_tmpSubmit'/>").css('display','none').appendTo('form');
$("#btn_tmpSubmit").click();
回答by ashkufaraz
I found this question serval years ago.
几年前我发现了这个问题。
recently I tried to "rewrite" the submit method. below is my code
最近我试图“重写”提交方法。下面是我的代码
window.onload= function (){
for(var i= 0;i<document.forms.length;i++){
(function (p){
var form= document.forms[i];
var originFn= form.submit;
form.submit=function (){
//do something you like
alert("submitting "+form.id+" using submit method !");
originFn();
}
form.onsubmit= function (){
alert("submitting "+form.id+" with onsubmit event !");
}
})(i);
}
}
}
<form method="get" action="" id="form1">
<input type="submit" value="提交form1" />
<input type="button" name="" id="" value="button模拟提交1" onclick="document.forms[0].submit();" /></form>
It did in IE,but failed in other browsers for the same reason as "cletus"
它在 IE 中可以，但在其他浏览器中失败，原因与“cletus”相同
回答by Kai
The easiest solution to workaround this is to create 'temporary' input with type submit and trigger click:
解决此问题的最简单解决方案是创建类型为 submit 并触发单击的“临时”输入：
var submitInput = $("<input type='submit' />");
$("#aspnetForm").append(submitInput);
submitInput.trigger("click");
