web-dev-qa-db-ja.com

jQuery：フォームは$（ "＃id"）。submit（）で送信しませんが、「送信」ボタンで送信しますか？

_<form method="post" action="load_statements.php?action=load" id="loadForm"
                            enctype="multipart/form-data">
_

それが私のフォームであり、私には見た目が良いです。そのフォームに、このボタンを配置します。

_<input type="button" name="submit" id="submit" value="Submit" onclick="confirmSubmit()" class="smallGreenButton" />
_

呼び出す関数は次のとおりです。

_function confirmSubmit() {
    // get the number of statements that are matched
    $.post(
        "load_statements.php?action=checkForReplace",
        {
            statementType : $("#statementType").val(),
            year : $("#year").val()
        },
        function(data) {
            if(data['alreadyExists']) {
                if( confirm("Statements already exist for " + $("#statementType").html() + " " + $("#year").val() +
                    ". Are you sure you want to load more statements with these settings? (Note: All duplicate files will be replaced)"
                )) {
                    $("#loadForm").submit();
                }
            } else {
                $("#loadForm").submit();
            }
        }, "json"
    );
}
_

ご覧のとおり、$("#loadForm").submit();を呼び出していますが、フォームは送信されていません（つまり、ページが更新されていません）。何故ですか？

ありがとう！

jqueryformsform-submit
37
Garrett

http://api.jquery.com/submit/

JQuery submit()イベントは、フォームを送信したときに発生するイベントリスナーを追加します。したがって、コードは基本的に送信イベントに何もバインドしていません。 そのフォームを送信したい場合は、昔ながらのJavaScript document.formName.submit()を使用します。

元の答えをそのまま残して、どこにいたのかを指摘します。私が意味と言っているのは、このような関数を持っている場合、ajax部分に値を投稿してからjQueryを使用してフォームを送信する理由がわかりにくいことです。この場合、ボタンのクリックにイベントをバインドし、それを返したい場合はtrueを返し、そうでない場合はfalseを返します。

$('#submit').click( function() {
  // ajax logic to test for what you want
  if (ajaxtrue) { return confirm(whatever); } else { return true;}
});

この関数がtrueを返した場合、送信ボタンのクリック成功としてカウントされ、通常のブラウザーの動作が発生します。次に、イベントハンドラーの形式でマークアップからロジックを分離しました。

うまくいけば、これはもっと理にかなっています。

17
NateDSaint

ボタンの「送信」名を別のものに変更します。それが問題の原因です。 dennisjqの回答を参照してください： http://forum.jquery.com/topic/submiting-a-form-programmatically-not-working

JQuery submit（）のドキュメントを参照してください。

フォームとその子要素は、送信、長さ、メソッドなど、フォームのプロパティと競合する入力名またはIDを使用しないでください。名前の競合は、混乱を招く障害を引き起こす可能性があります。ルールの完全なリストおよびこれらの問題のマークアップを確認するには、DOMLintを参照してください。

76
Adam Berecz

$("form")[0].submit()を使用します

ここで$("form")はDOM要素の配列を返すので、関連するインデックスにアクセスすることにより、フォーム要素のDOMオブジェクトを取得し、そのDOM要素内でsubmit()関数を実行できます。

欠点は、1つのhtmlページ内に複数のフォーム要素がある場合、「フォーム」の正しい順序についてのアイデアを持っている必要があることです。

19
sahan maldeniya

私は同様の問題を抱えていましたが、それを理解するのに時間がかかりました。 jQueryの.submit（）関数は、ハンドラーを渡さない場合にフォーム送信をトリガーする必要がありますが、送信ボタンの名前が「submit」であり、フォームの送信機能をオーバーライドしているためです。

つまり、jQueryはDOMオブジェクトの<form>.submit()関数を呼び出しますが、フォーム内のすべての入力は_<form>.<inputname>_を呼び出すことでもアクセスできます。入力の1つが「submit」という名前の場合、<form>.submit()関数を_<form>.submit_でオーバーライドします-入力DOM要素になります。したがって、jQueryが<form>.submit()を呼び出すと、submitは関数ではないため機能しません。 つまり、ボタンの名前を変更しても機能するはずです。

コンソールがエラーをログに記録しない理由は不明です。おそらく、jQueryは送信関数が存在することを最初にチェックし、関数が存在しない場合は要求を無視しているだけです。

13
Donovan

非表示の送信ボタンをフォームに追加し、submit（）関数を呼び出す代わりに、送信ボタンでclick（）関数を呼び出します=）

ボタン：_<div style="display:none"><input id="alternateSubmit" type="submit" /></div>_

フォーム送信を回避するクレイジーな方法：$("#alternateSubmit").click();

4
Garrett

送信ボタンの属性「名前」を消去します。

これはあなたのコードです：

<input type="button" name="submit" id="submit" value="Submit" onclick="confirmSubmit()" class="smallGreenButton" />

このようにする必要があります：

<input type="button" id="submit" value="Submit" onclick="confirmSubmit()" class="smallGreenButton" />
3
Robith Ritz