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;

您可以使用此类j来处理;

$(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
         });
}

使用Ajax和Jquery更新数据库

2 个答案: