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 がトリガーされるブラウザーで問題が発生するのではないかと思っています。

4

9 に答える 9

56

申し訳ありませんが、あなたの質問を誤解しました。

Javascriptによると、form.submit() を呼び出すときに onsubmit をキャプチャします。

最近、「javascript を使用してフォームを送信したときに、form.onsubmit イベントが発生しないのはなぜですか?」という質問を受けました。

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

（強調を追加）。

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

于 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 に答える
1

関数で trigger() イベントを試してください。

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

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

最近、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」と同じ理由で失敗しました

于 2009-05-31T03:21:32.340 に答える
0

これを回避する最も簡単な解決策は、送信タイプとクリックのトリガーを使用して「一時的な」入力を作成することです。

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