Question

87

Capturing a form submit with jquery and .submit

rated 0 times [ 94] [ 7] / answers: 1 / hits: 176984 / 12 Years ago, mon, september 3, 2012, 12:00:00

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

});

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

ramiro

Add To Favorites

Follow

Total Points: 431

Total Questions: 96

Total Answers: 105

Location: Northern Ireland

Member since Mon, Nov 14, 2022

2 Years ago

answered 12 Years ago alli · Accepted Answer

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

    });

});