Multiple forms on a PHP page auto-submit with AJAX

Question

Right, I've got a query that runs on a page and for every record in the database it prints a form (this is simplified, and yes I know mysql_* is depreciated):

$sql = "select * from `$table1`";
    $result = mysql_query ($sql) or die(mysql_error());
    while ($row = mysql_fetch_array($result)) 
     { 
       $carid = $row["car_id"]; 
       $carnum = $row["carnum"]; 
       $carlocation = $row["carlocation"];
       $carstate = $row["carstate"];

       echo "<tr id='$carid'>";
       echo "<td>$carnum</td>";
       echo "<td><form action='' method='post' id='form$carid'>";
       echo "<select id='popup' name='ctate'>";
       echo "<option value='In-Service-Bay'>In Service Bay</option>";
       echo "<option value='Awaiting-Service'>Awaiting Service</option>";
       echo "<option value='Service-Complete'>Service Complete</option>";
       echo "</select></td>";
       echo "<select id='popup' name='clocation'>";
       echo "<option value='Carpark-1'>Carpark-1</option>";
       echo "<option value='Carpark-2'>Carpark-2</option>";
       echo "<option value='Carpark-3'>Carpark-3</option>";
       echo "</select></td>";
       echo "<td><input type='submit' name='submit' value='Submit'>";
       echo "</form></tr>";
 }
 echo "</table>";

Now what I want to do is make it so that when one of the drop-downs is changed just that form submits. Now I know that in order to do this I need to use some JS and AJAX but I'm not a javascript programmer in any way, shape or form. So after reading up on submitting forms without refreshing the page I thought I would give this a try:

  print '<script type="text/javascript">';
  print "       

  $('#form1').change(function() 
  {
    console.log('success!');
    $.ajax({ 
    type: 'post',
    url: 'process.php',
    data: $('#form1').serialize(),
    success: function() {
    }
 });
            return false;
 }); 
  </script>";

Now in principle this works, when I change the first record in form1 it executes and prints "Success!" to the log. It doesn't however appear to call process.php but thats not my main problem. What I now want to do is implement this so it works for all of the forms. Bearing in mind that the number of forms on the page varies significantly from day to day.

So I did this:

$sql = "select * from `$table1`";
    $result = mysql_query ($sql) or die(mysql_error());
    while ($row = mysql_fetch_array($result)) 
     { 
       $carid = $row["car_id"]; 
       $carnum = $row["carnum"]; 
       $carlocation = $row["carlocation"];
       $carstate = $row["carstate"];


 $formname = "#form".$carid;

 print '<script type="text/javascript">';
 print "        var cnum;";
 print "        cnum = '$formname',";
 print "        

 $(cnum).change(function() 
 {
 console.log(cnum);
  $.ajax({ 
    type: 'post',
    url: 'process.php',
    data: $(cnum).serialize(),
    success: function() {
    }
 });
 return false;
  }); 
 </script>";

       echo "<tr id='$carid'>";
       echo "<td>$carnum</td>";
       echo "<td><form action='' method='post' id='form$carid'>";
       echo "<select id='popup' name='ctate'>";
       echo "<option value='In-Service-Bay'>In Service Bay</option>";
       echo "<option value='Awaiting-Service'>Awaiting Service</option>";
       echo "<option value='Service-Complete'>Service Complete</option>";
       echo "</select></td>";
       echo "<select id='popup' name='clocation'>";
       echo "<option value='Carpark-1'>Carpark-1</option>";
       echo "<option value='Carpark-2'>Carpark-2</option>";
       echo "<option value='Carpark-3'>Carpark-3</option>";
       echo "</select></td>";
       echo "<td><input type='submit' name='submit' value='Submit'>";
       echo "</form></tr>";
 }
 echo "</table>";

Unfortunately however, it was not that simple as this does not work. I can't work out if its trying to submit every form on the page or if it just doesn't work. If I hard set the form names but keep the JS in the loop, it works but it submits the record multiple times which I don't particularly want.

As I say I'm not a javascript guy so any help you can give me will be much appreciated.

Thanks!

Answer 1

It should be as simple as changing #form1 in your first example to form . You will then need to change references from $('#form1') inside the function to $(this)

$('form').change(function() 
  {
    console.log('success!');
    $.ajax({ 
        type: 'post',
        url: 'process.php',
        data: $(this).serialize(),
        success: function() {
        }
    });
    return false;
 });

By using $('form') you are applying the event to all form elements on the page. jQuery is then smart enough to know which form triggered the event, hence the $(this) being a reference to the form that triggered the event.

Answer 2

The problem lies here:

   echo "<td><input type='submit' name='submit' value='Submit'>";

From the jQuery documentation

Forms and their child elements should not use input names or ids that conflict with properties of a form, such as submit, length, or method. Name conflicts can cause confusing failures. For a complete list of rules and to check your markup for these problems, see DOMLint.