使用Ajax和Jquery更新數據庫

Question

我有一個包含多行的表，該表列出了數據庫中的記錄。 這些記錄是項目的信息，在每一行中，我都有一個下拉列表來修改項目的狀態。 為此，我使用了Ajax，因為我討厭在更新后刷新整個頁面。 這是我創建的用於執行更新的功能：

function call(){
  var projid=$('#projid').val();
  var projstatus=$('#projstatus').val();
  var dataall={'projid':projid, 'projstatus':projstatus};
  $.ajax({
        type: 'POST',
        url: "stsproj.php",
        data: dataall, 
        success: function (data) { 

        }
   });
}

以下是我的下拉列表：

<?php do { ?>
<td>
<form action="<?php echo $editFormAction; ?>" method="post" name="form2" id="form2">
  <input type="hidden" name="MM_update" value="form2" />
  <input type="hidden" name="projid" id="projid" value="<?php echo $row_projlist['projid']; ?>" />
  <select name="projstatus" id="projstatus" class="select1" onchange="call()">
    <option value="<?php echo $row_status['projstatus'];?>"><?php echo $row_status['sts'];?></option>
    <option value="1">Awaiting</option>
    <option value="2">Ongoing</option>
    <option value="3">Finishing</option>
   </select>
</form>
</td>
<?php }while($row_projlist = $projlist->fetch(PDO::FETCH_ASSOC)); ?>

我的問題如下：當我更新第一個項目的狀態時，它可以工作，但是當我嘗試對其他項目進行操作時，則不起作用。 更具體地說，始終發送第一個項目的參數（這就是firebug所說的）。

請幫忙！

Answer 1

您的問題是由於ID重復。 您無需使用ID（實際上，無需使用ID即可自動生成列表。ID名稱必須是唯一的）。 從您的選擇框中刪除call功能，並在下面的javascript中使用；

您可以使用此類js來處理；

$(function() {
    $("select[name='projstatus']").change(function() {
        var projid = $(this).parent("form").find("input[name='projid']").val();
        var projstatus = $(this).val();
        var dataall = {'projid':projid, 'projstatus':projstatus};
        $.ajax({
            type: 'POST',
            url: "stsproj.php",
            data: dataall, 
            success: function (data) { 

            }
        });
    });
});

您可以在此處查看表單操作部分的工作示例： http : //jsfiddle.net/cubuzoa/SYf8s/

Answer 2

先前的答案可能會解決您的問題，但我認為可以簡化。 形式...

<form>
 <select class="select1" onchange="call(<?=$row_projlist['projid']?>)">
    <option value="<?=$row_status['projstatus']?>"><?=$row_status['sts']?></option>
    <option value="1">Awaiting</option>
    <option value="2">Ongoing</option>
    <option value="3">Finishing</option>
   </select>
</form>

和JavaScript

function call(id)
{
    $.post('stsproj.php',{'projid':id, 'projstatus':$('#projstatus').val()} )
         .done(function(data){
             //do something with data
         });
}