Submitting an HTML form to PHP using JQuery AJAX

Question

I was wondering if there was a succinct way to submit a form to my backend with JQuery AJAX (async). What I mean, more specifically, is:

HTML Form:

<form method="post" action="/Intranet/Resources/Forms/WorkOrder.php">
    <input type="text" name="notes[]" />
    <input type="text" name="notes[]" />
    ...
    <!-- a whole bunch more input fields here -->
</form>

This form is pretty awkward to separate into a bunch of variables with JQuery. I don't want the user to be redirected away from the page - I want the form to submit asynchronously. It's actually a save button...

Would it be better to screw it and just use JSON?

Answer 1

$(function(){
    $("form").submit(function(){
        $.ajax({
            url:"save.php",
            type:"post",
            data:$(this).serialize(),
            success: alert('saved');
        });
    });
});

Answer 2

You can use $('form').serialize() to serialize a form. The result (for your form) would be:

notes=val1&notes=val2

http://api.jquery.com/serialize/