jQuery 应该 $(form).submit(); 不在表单标签内触发onSubmit？

Question

我有以下情况：

<script type="text/javascript">
function CancelFormButton(button) {
    $(button.form).submit();
}
</script>

<form onsubmit="alert('here');">
<input type="button" value="Cancel" onClick="CancelFormButton(this);" />
</form>

当我单击“取消”按钮时，不会触发表单标记的 onsubmit。

此行成功提交表单： $(button.form).submit(); 但跳过表单标记中 onsubmit 中的 alert('here'); 。

这是正确的还是我做错了什么？

顺便说一句，在这种情况下，我想要这个功能，但我只是想知道我是否会在触发 onsubmit 的浏览器中遇到问题。

Answer 1

抱歉，误解了你的问题。

根据 Javascript - 调用 form.submit() 时捕获 onsubmit：

最近有人问我：“为什么不
当我时 form.onsubmit 事件被触发
使用 JavaScript 提交我的表单？”

答案：当前的浏览器不支持
遵守 html 的这一部分
规格。 该事件仅触发
当用户激活它时 - 并且
激活时不会触发
代码。

（强调已添加）。

注意：“由用户激活”还包括点击提交按钮（可能包括回车键的默认提交行为，但我还没有尝试过）。 我相信，如果您（使用代码）单击提交按钮，它也不会被触发。

Answer 2

此解决方法将解决@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);
}

将适用于所有现代浏览器。
将跨选项卡/生成的子窗口工作（是的，即使在 IE<9 中）。
并且是香草！

只需向其传递对表单元素的 DOM 引用，它就会确保所有附加的侦听器、onsubmit 以及（如果那时没有阻止）最后提交表单。

Answer 3

我认为在某些情况下希望这种行为是合理的，但我认为不触发表单提交的代码应该（始终）是默认行为。 假设您想捕获表单的提交

$("form").submit(function(e){
    e.preventDefault();
});

，然后对输入进行一些验证。 如果代码可以触发提交处理程序，则您永远不能包含

$("form").submit()

在此处理程序中，因为这会导致无限循环（将调用相同的处理程序，阻止提交、验证并重新提交）。 您需要能够在提交处理程序内手动提交表单，而不触发相同的处理程序。

我意识到这并不能直接回答问题，但是此页面上还有很多关于如何破解此功能的其他答案，我觉得需要指出这一点（并且评论太长）。

Answer 4

我的简单解决方案：

$("form").children('input[type="submit"]').click();

这对我来说是工作。

Answer 5

trigger('submit') 不起作用。因为 onSubmit 方法不会被触发。
以下代码适用于我，使用此代码时调用 onSubmit 方法：

$("form").find(':submit').click();

Answer 6

尝试在您的函数中触发（）事件：

$("form").trigger('submit'); // and then... do submit()

Answer 7

而不是

$("form").submit()

尝试这个

 $("<input type='submit' id='btn_tmpSubmit'/>").css('display','none').appendTo('form');
 $("#btn_tmpSubmit").click();

Answer 8

我几年前就发现了这个问题。

最近我尝试“重写”提交方法。 下面是我的代码

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>

它在 IE 中执行，但在其他浏览器中失败，原因与“cletus”相同

Answer 9

解决此问题的最简单解决方案是创建类型为“提交”并触发单击的“临时”输入：

var submitInput = $("<input type='submit' />");
$("#aspnetForm").append(submitInput);
submitInput.trigger("click");