CODEWITHSUNDEEP
phpjquery
Anibel
Anibel

Reputation: 175

Update database using Ajax and Jquery

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!

Upvotes: 0

Views: 1070

Answers (2)

H&#252;seyin BABAL
H&#252;seyin BABAL

Reputation: 15550

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/

Upvotes: 1

Bryan
Bryan

Reputation: 3494

The previous answer will probably solve your problem, but I think it can be simplified. for the form... 

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

and the javascript

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

Upvotes: 0

Related Questions