Question

I populate a list of <form> using a PHP while loop, and fill the fields with values from MySQL. Now I want to be able to update all forms with one submit– button.

The form looks something like this in HTML (note, on my actual page there are multiple like this. The only thing that differes is the <form id='X'>:

<form id='34' name='customercontact' method='post' action='customerUpdate.php'>
    Förnamn: <br /><input type='text' name='contact_firstname' class='textbox' value='text....'>
    Efternamn: <br /><input type='text' name='contact_lastname' class='textbox' value='text....'>
    Telefonnummer: <br /><input type='text' name='contact_phone' class='textbox' value='text....'>
    Mobiltelefon: <br /><input type='text' name='contact_cellphone' class='textbox' value='text....'>
    E-mail: <br /><input type='text' name='contact_email' class='textbox' value='text....'>
        <select name='isActive'>
            <option value="0" selected>Inaktiv</option>
            <option value="1">Aktiv</option>
        </select>
</form>

How do I use jQuery serialize to send each form and all the values as a string? I don’r really know where to start.

Answer 1

You can select all forms on the page $('form') and then iterate through them and ‘submit’ values via AJAX.

UPDATE:

<script type="text/javascript">
$(document).ready(function() {
    $('#customer_contact_save').live('click', function(e){
        e.preventDefault(); // prevent form submit
        $.each($('form'), function(index) { 
            var sData = $(this).serialize(); // get data from form for submit
            $.ajax({
                type: "POST",// path to php script that saves data to db
                url: "some.php",
                data: sData,
                success: function(someMessageFromPhp) {
                    alert(someMessageFromPhp); // alert to user what some.php returned
                }
            });
        });
    });
});
</script>