Question

I have a page with multiple forms that I would like to submit and store its values into a mySQL database via PHP. My problem is very similar to the question asked here ( submitting multiple forms with AJAX ) except ideally I would like to submit each form onChange() to be processed and stored in the database.

My forms in general look like this:

<form name="form1" id="form1" action="" method="POST"> 
  <input type="text" class="input-block-level" placeholder="Placeholder text">
  <input type="text" class="input-block-level" placeholder="Placeholder text">
</form>
....
<form name="form2" id="form2" action="" method="POST"> 
  <input type="text" class="input-block-level" placeholder="Placeholder text">
  <input type="text" class="input-block-level" placeholder="Placeholder text">
</form>
....

And my current jQuery/AJAX code:

$(document).ready(function () {
    $('#form1').change(function () {
    $.post('process.php', $("#form1").serialize(), function(data) {
        $('#results').html(data);
        });
    });

});

Ideally, I wouldn’t need to copy/paste this snippet for every form (I have a LOT of different forms) but could instead have a block of code that works for any form when it is changed. Any help would be very much appreciated.

Answer 1

You can just add a CSS class to all your forms and retrieve all of them to do the same job.

$(document).ready(function () {

    // Retrieve all form on the page
    $('.formAjax').change(function () {
        $.post('process.php', $(this).serialize(), function(data) {
            // Update the result area
            $('#results').html(data);
        });
    });
});

Assuming you have added the good CSS class to all your forms.

<form name="form1" id="form1" action="" class="formAjax" method="POST"> 

Note: The id of each form is useless