使用AJAX自动提交PHP页面上的多个表单

好的，我有一个在页面上运行的查询，对于数据库中的每一条记录，它都会打印一个表单，这是简化的，是的，我知道mysql_*会贬值：

$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>";

现在我想做的是，当其中一个下拉列表被更改时，表单提交。现在我知道为了做到这一点，我需要使用一些JS和AJAX，但我不是一个javascript程序员。因此，在阅读了提交表单而没有刷新页面后，我想我会尝试一下：

  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>";

现在，原则上这是可行的，当我更改form1中的第一条记录时，它将执行并打印成功！到日志。不过，它似乎没有调用process.php，但这不是我的主要问题。我现在要做的是实现它，使它适用于所有形式。请记住，页面上的表格数量每天都有很大差异

所以我这样做了：

$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>";

然而，不幸的是，这并不是那么简单，因为这不起作用。我无法确定是试图提交页面上的每一张表单，还是根本不起作用。如果我硬设置表单名称，但将JS保留在循环中，那么它可以工作，但它会多次提交记录，我并不特别想要

正如我所说，我不是一个javascript的家伙，所以任何你能给我的帮助都将不胜感激

---

谢谢

它应该像将第一个示例中的form1更改为form一样简单。然后需要将函数中的引用从$'form1'更改为$this

通过使用$'form'，您将事件应用于页面上的所有表单元素。jQuery很聪明，可以知道是哪个表单触发了事件，因此$this是对触发事件的表单的引用。

问题在于：

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

从

表单及其子元素不应使用 与表单属性（如提交、长度或方法）冲突。 名称冲突可能会导致混乱的失败。有关完整的 规则，要检查标记是否存在这些问题，请参阅DOMLint

---

你能给我们看一下这个页面吗？第一眼看上去还可以，但是看到生成的HTML会很好。谢谢！这让它在所有表格上都能工作。非常感谢！

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