javascript - Capturing a form submit with jquery and .submit

Question

I'm attempting to use jQuery to capture a submit event and then send the form elements formatted as JSON to a PHP page. I'm having issues capturing the submit though, I started with a .click() event but moved to the .submit() one instead.

I now have the following trimmed down code.

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.');
});

Answer 1

Wrap the code in document ready and prevent the default submit action:

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