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 - capturing onsubmit when calling form.submit()：

  我最近被问到：“为什么不这样做   form.onsubmit事件被我解雇了   使用javascript提交表单？“

答案：目前的浏览器没有   坚持这部分的HTML   规格。该事件只会触发   当它被用户激活时 - 和   激活时不会触发   代码。

（重点补充）。

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

Answer 2

This解决问题将解决@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＆lt; 9中）。
并且是在香草！

只需将一个DOM引用传递给表单元素，它就会确保所有附加的侦听器，onsubmit和（如果当时没有阻止）最终提交表单。

Answer 3

我的简单解决方案：

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

这对我有用。

Answer 4

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

捕获表单的提交

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

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

$("form").submit()

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

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

Answer 5

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

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

Answer 6

而不是

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

试试这个

$ docker pull ubuntu:14.04
$ docker run -ti ubuntu:14.04
root@8f0dcfdae9b6:/# apt-get update

Answer 7

trigger（'submit'）不起作用.beacuse onSubmit方法不会被触发。以下代码适用于我，使用此代码时调用onSubmit方法：

$("form").find(':submit').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");

应该是jQuery的$（form）.submit（）;不在表单标签内触发onSubmit？

9 个答案: