Захват формы с помощью jquery и .submit

Я пытаюсь использовать 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.');
});

Ответ 1

Оберните код в готовом документе и предоставьте действие отправки по умолчанию:

$(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
    });
});

Ответ 2

попробуйте следующее:

Используйте "refurn false" для вырезания потока события:

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

Edit

подтвердить, если элемент формы с длиной '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?

Ответ 3

Просто замените функцию 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
};

Ответ 4

Только совет: Не забудьте установить обнаружение кода на document.ready, иначе это может не сработать. Это был мой случай.