使用Ajax和Jquery更新数据库

Question

I have a table with multiple rows that lists records from my database. These records are projects' information and in each row, I have drop down list to modify the status of the project. To do so, I used Ajax because I hate to refresh the whole page after update. This is the function I created to do the update:

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) { 

        }
   });
}

And below is my drop down list:

<?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)); ?>

My problem is the following: When I update the status of the first project, it works but when I try to do it with other projects, it doesn't work. To be more specific, the parameters of the first project are sent always (this is what firebug says).

Please help!

Answer 1

Your problem is due to duplicate ids. You don't need to use ids(actually do not use id for automatic list generation. Id names must be unique). Remove call function from your select box and use below javascript;

You can use such js to handle that;

$(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) { 

            }
        });
    });
});

You can see working example for form manipulating part here : http://jsfiddle.net/cubuzoa/SYf8s/