Question

OK, so I thought I had this licked by I was wrong.

Basically, I have a form wrapped in a span (#container) and embedded in a page. The server side does all the validation and detects whether it’s a full HTTP request or XHR.

If it’s a full HTTP request, the server returns a full page, complete with layout. If it’s an XHR request, the server returns only the form element and its children. The form may or may not include errors.

So, I’m looking for the easiest way to ajaxify this form using jQuery. Basically, I think I need to do something like this:

• When the document is ready, bind a function to the click event of the submit button using jQuery’s .live() method. (This is easy enough).

The function needs to do something like this:

• Trigger the submit event on the form
• Capture the html response
• Replace the contents of #container with the response contents

Does this sound about right? Any asssitance is appreciated!

Answer 1

If you trigger the submit event on the form, it will submit as a full http request unless you add onsubmit = "return false;” to your form tag. The easiest way would be to use $.post() in combination with a $.serialize() where you can also capture the servers response. It might look something like this.

$.post(
    'myFormURL.php',
    $('#idOfMyForm').serialize(),
    function(results) {
        $('#container').html(results);
    }
);