PHP頁面上的多個表單使用AJAX自動提交

Question

對，我有一個查詢運行在頁面上，併爲數據庫中的每個記錄打印一個表單（這是簡化的，是的，我知道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傢伙，所以任何幫助，你可以給我將非常感激。

謝謝！

Answer 1

它應該像在第一個示例中將#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）是引發該事件的表單的引用。

Answer 2

的問題就在這裏：

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

從jQuery documentation

形式及其子元素不應該使用輸入姓名或ID的 與窗體的屬性，如提交衝突，長度或方法。 名稱衝突可能導致令人困惑的失敗。有關 規則的完整列表並檢查您的標記是否存在這些問題，請參閱DOMLint。