Alvin Alvin - 7 months ago 24
PHP Question

jQuery form button in dynamic table doesnt detect 2nd row onwards

i have a file that generate dynamic table based on the records in database. and next to each row, I put a button to delete the row. My code now works well but only with the first row. Starting from row 2 onwards, the jquery wont detect the particular row clicked.

this is my php file

while ($row = mysqli_fetch_array($queryresult)){
$id = $row['requestID'];
$customerID = $row['userID'];
$username = $row['username'];
$amount = $row['amount'];
$time = $row['requested_at'];
$status = $row['status'];

//display out the results to the user
echo "<tr>";
echo "<td> $username </td>";
echo "<td> $amount </td>";
echo "<td> $time </td>";
echo "<td> $status </td>";
echo "<td> <form method='POST'>
<input type='hidden' name='wdID' id='wdID' value='".$id."'/>
<input type='hidden' name='customerID' id='customerID' value='".$customerID."'/>
<input type='hidden' name='amount' id='amount' value='".$amount."'/>
<button class=\"btn btn-success btn-xs\" id=\"acceptWD\" title=\"Accept Withdraw Request\" type=\"button\"><i class=\"glyphicon glyphicon-ok\"></i></button>
</form>
</td>";
echo "</tr>";

}
mysqli_free_result($queryresult);
mysqli_close($connection); //close the database


and this is my javascript file

$("#acceptWD").click(function(event){
event.preventDefault();
var self = $(this);
var wdID = $(this).$("#wdID").val();
var customerID = $("#customerID").val();
var amount = $("#amount").val();
console.log(wdID);
$.ajax({
type: 'POST',
url: 'process_withdraw_request.php',
data: {wdID:wdID, customerID:customerID, amount:amount},
success: function(result){
//console.log(result);
if(result){
$.notify({
// options
message: 'The Request Has Been Accepted'
},{
// settings
delay: 2000,
allow_dismiss: false,
placement: {
from: "top",
align: "center"
},
type: 'success'
})
setTimeout(function(){
window.location.reload(1);
}, 4000);
}
}
});
});


I tried to use following code but still nothing

$("#acceptWD").on('click', function(){
var a = $(this).closest('tr').val();
console.log(a);
});


Please help and thank you

Answer

all these IDs will be the same in every row:

echo "<td> <form method='POST'>
    <input type='hidden' name='wdID' id='wdID' value='".$id."'/>
    <input type='hidden' name='customerID' id='customerID' value='".$customerID."'/>
    <input type='hidden' name='amount' id='amount' value='".$amount."'/>
    <button class=\"btn btn-success btn-xs\" id=\"acceptWD\" title=\"Accept Withdraw Request\" type=\"button\"><i class=\"glyphicon glyphicon-ok\"></i></button> 
   </form>
</td>";

Now an ID has to be unique, if not, you brake something. So you might change those IDs to classes something like:

echo "<td> <form method='POST'>
    <input type='hidden' name='wdID' class='wdID' value='".$id."'/>
    <input type='hidden' name='customerID' class='customerID' value='".$customerID."'/>
    <input type='hidden' name='amount' class='amount' value='".$amount."'/>
    <button class=\"btn btn-success btn-xs acceptWD\" title=\"Accept Withdraw Request\" type=\"button\"><i class=\"glyphicon glyphicon-ok\"></i></button> 
   </form>
</td>";

Then your javascript will look something like:

$(".acceptWD").on('click', function(){
     var parentTd = $(this).closest('td');
     console.log(parentTd.find('.wID').val());
});