62

jQuery を使用して送信イベントをキャプチャし、JSON 形式のフォーム要素を PHP ページに送信しようとしています。ただし、送信のキャプチャに問題があります。イベントから始めました.click()が、代わりにイベントに移動しました.submit()。

私は今、次のトリミングされたコードを持っています。

HTML

<form method="POST" id="login_form">
    <label>Username:</label>
    <input type="text" name="username" id="username"/>
    <label>Password:</label>
    <input type="password" name="password" id="password"/>
    <input type="submit" value="Submit" name="submit" class="submit" id="submit" />
</form>

Javascript

$('#login_form').submit(function() {
    var data = $("#login_form :input").serializeArray();
    alert('Handler for .submit() called.');
});
4

5 に答える 5

163

コードをドキュメントの準備ができた状態でラップし、デフォルトの送信アクションを防止します。

$(function() { //shorthand document.ready function
    $('#login_form').on('submit', function(e) { //use on if jQuery 1.7+
        e.preventDefault();  //prevent form from submitting
        var data = $("#login_form :input").serializeArray();
        console.log(data); //use the console for debugging, F12 in Chrome, not alerts
    });
});
于 2012-09-03T18:27:26.660 に答える
16

これを試して：

イベントの流れを遮断するには、「return false」を使用します。

$('#login_form').submit(function() {
    var data = $("#login_form :input").serializeArray();
    alert('Handler for .submit() called.');
    return false;  // <- cancel event
});

編集

フォーム要素が jQuery の「長さ」であるかどうかを確認します。

alert($('#login_form').length) // if is == 0, not found form
$('#login_form').submit(function() {
    var data = $("#login_form :input").serializeArray();
    alert('Handler for .submit() called.');
    return false;  // <- cancel event
});

また：

DOM の準備が整うまで待機します。

jQuery(function() {

    alert($('#login_form').length) // if is == 0, not found form
    $('#login_form').submit(function() {
        var data = $("#login_form :input").serializeArray();
        alert('Handler for .submit() called.');
        return false;  // <- cancel event
    });

});

ドキュメントの「準備完了」イベント内にコードを配置しますか、それとも DOM の準備が整った後にコードを配置しますか?

于 2012-09-03T18:15:16.403 に答える
7

form.submit 関数を独自の実装に置き換えるだけです。

var form = document.getElementById('form');
var formSubmit = form.submit; //save reference to original submit function

form.onsubmit = function(e)
{
    formHandler();
    return false;
};

var formHandler = form.submit = function()
{
    alert('hi there');
    formSubmit(); //optionally submit the form
};
于 2013-04-24T14:34:00.363 に答える