0

是的，我有一个在页面上运行的查询，它为数据库中的每条记录打印一个表单（这是简化的，是的，我知道 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 人，所以您可以给我的任何帮助将不胜感激。

谢谢！

4

2 回答 2

0

它应该像#form1在第一个示例中更改为一样简单form。$('#form1')然后，您需要将函数内部的引用更改为$(this)

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

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

于 2013-03-18T11:20:30.167 回答
0

问题出在这里：

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

来自jQuery 文档

表单及其子元素不应使用与表单属性（例如提交、长度或方法）冲突的输入名称或 ID。名称冲突可能会导致令人困惑的失败。有关规则的完整列表并检查这些问题的标记，请参阅 DOMLint。

于 2013-03-18T11:22:41.700 回答