41

我有以下内容：

<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();但跳过alert('here');了表单标记中的 onsubmit 。

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

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

4

9 回答 9

56

对不起，误解了你的问题。

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

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

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

（强调补充）。

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

于 2009-03-14T06:52:58.667 回答
30

此解决方法将解决@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 以及（如果那时没有阻止）最后提交表单。

于 2013-08-06T05:14:52.243 回答
7

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

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

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

$("form").submit()

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

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

于 2013-05-09T11:48:22.920 回答
6

我的简单解决方案：

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

这对我来说是工作。

于 2009-10-28T14:45:07.187 回答
2

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

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

于 2017-09-16T11:35:39.067 回答
1

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

$("form").trigger('submit'); // and then... do submit()
于 2009-03-14T07:34:22.250 回答
1

代替

$("form").submit()

试试这个

 $("<input type='submit' id='btn_tmpSubmit'/>").css('display','none').appendTo('form');
 $("#btn_tmpSubmit").click();
于 2015-08-12T09:02:45.867 回答
0

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

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

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”相同

于 2009-05-31T03:21:32.340 回答
0

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

var submitInput = $("<input type='submit' />");
$("#aspnetForm").append(submitInput);
submitInput.trigger("click");
于 2012-09-05T09:03:25.223 回答