Submit form OnChange for multiple forms with AJAX

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.

MatRt · Accepted Answer · 2013-01-08 03:17:05Z

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

answered Jan 8, 2013 at 3:17

MatRt

3,5441 gold badge23 silver badges15 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Submit form OnChange for multiple forms with AJAX

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related