web-dev-qa-db-ja.com

jQueryの$（form）.submit（）; formタグ内でonSubmitをトリガーしませんか？

私は次のものを持っています：

_<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がトリガーされるブラウザーで問題が発生するかどうか疑問に思っています。

jqueryonsubmit
39
Darryl Hein

ごめん、あなたの質問を誤解した。

Javascript-form.submit（）を呼び出すときにonsubmitをキャプチャする によると：

私は最近尋ねられました：「なぜJavaScriptを使用してフォームを送信するときにform.onsubmitイベントが発生しないのですか？」

答え：現在のブラウザは、html仕様のこの部分に準拠していません。このイベントは、ユーザーによってアクティブ化された場合にのみ発生します-、コードによってアクティブ化された場合には発生しません。

（強調を追加）。

注：「ユーザーによってアクティブ化」には、送信ボタンを押すことも含まれます（おそらくEnterキーからのデフォルトの送信動作が含まれますが、これは試していません）。また、（コードを使用して）送信ボタンをクリックした場合にもトリガーされないと思います。

52
cletus

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 <9でも）。
そしてバニラにいます！

フォーム要素へのDOM参照を渡すだけで、接続されているすべてのリスナー、onsubmit、および（それによって妨げられていない場合）最終的にフォームを送信します。

26
Hashbrown

場合によってはこの動作が必要なこともあると思いますが、フォームの送信をトリガーしないコードは（常に）デフォルトの動作であると主張します。フォームの送信をキャッチしたいとします

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

そして、入力に対していくつかの検証を行います。コードが送信ハンドラーをトリガーできる場合、含めることはできません

$("form").submit()

このハンドラー内では、無限ループが発生するため（SAMEハンドラーが呼び出され、送信を禁止し、検証し、再送信します）。同じハンドラーをトリガーすることなく、送信ハンドラー内でフォームを手動で送信できる必要があります。

私はこれが質問に直接答えないことを理解していますが、このページにはこの機能をハッキングする方法に関する他の多くの答えがあり、これを指摘する必要があると感じました（そしてコメントするには長すぎます）。

6
tandrewnichols

私の簡単な解決策：

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

私にとっては仕事です。

6
rukeba

trigger（ 'submit'）は動作しません。beacuseonSubmitメソッドは起動しません。次のコードは私のために機能します。このコードを使用するときにonSubmitメソッドを呼び出します。

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

2
f.jafari

の代わりに

$("form").submit()

これを試して

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

あなたの関数でtrigger（）イベントを試してください：

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

私は数年前にこの質問を見つけました。

最近、submitメソッドを「書き換え」ようとしました。以下は私のコードです

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」と同じ理由で他のブラウザで失敗しました

0
Hafeyang

これを回避する最も簡単な解決策は、タイプsubmitおよびトリガークリックで「一時的な」入力を作成することです。

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