Looping through multiple forms - php

Question

I am extracting sql data to a another php table used for a site. For each row in the table I have a button to delete or edit that specific row. The edit button works fine but I have been having issues with the delete button. As of now the delete button only deletes the first row of the table and not the row that has been selected for deletion.
Here is a sample of the table:
while($row = mysqli_fetch_array($result)){
<tr>
<td>'.($row['some_data']).'</td>
<td>
<form action="meeting_update_milestone.php" method="POST">
<input type="hidden" name="mile_id" value="'.$row['id'].'" />
<input type="submit" value="EDIT" />
</form>
</td>
<td>
<form id="meeting_delete_item">
<input type="hidden" name="mile_id" value="'.$row['id'].'" />
<input type="button" onclick="delete_meeting_item()" value="DELETE" />
</form>
</td>
</tr>';
}
This data is being sent to an ajax call:
function delete_meeting_item(){
var x = confirm("Are you sure you want to permanetly delete this item?");
if (x){
$.ajax({
type: "POST",
url: "meeting_delete_item.php",
data: $('#meeting_delete_item').serialize(),
cache: false,
success: function(result){
alert(result);
}
})//end ajax
}
else{
return false;
}
}
As you can tell I loop through the rows creating multiple forms with the same id. I think this is creating the issue here? If so how can I fix it by keeping the same formatting. I believe the forms have to have a unique name, but I am not sure how to implement this into the ajax data string.

Answer 1

I can't comment on the validity of your php code, but as you say, the id values have to be unique. In this instance, I don't believe the ID really makes much difference to what you are trying to achieve.
Remove the id and the inline onclick event:
while($row = mysqli_fetch_array($result)){
<tr>
<td>'.($row['some_data']).'</td>
<td>
<form action="meeting_update_milestone.php" method="POST">
<input type="hidden" name="mile_id" value="'.$row['id'].'" />
<input type="submit" value="EDIT" />
</form>
</td>
<td>
<form>
<input type="hidden" name="mile_id" value="'.$row['id'].'" />
<input type="button" class="delete" value="DELETE" />
</form>
</td>
</tr>';
}
And bind it using jQuery. I added a class to be able to get a selector to the delete button.
$(document).ready(function(){
$('.delete').click(function(){
var x = confirm("Are you sure you want to permanetly delete this item?");
if (x){
$.ajax({
type: "POST",
url: "meeting_delete_item.php",
data: $(this).closest(form).serialize(),
cache: false,
success: function(result){
alert(result);
}
})//end ajax
}
else{
return false;
}
}
}
On click of the delete button, we get the nearest form and serialize the data for that form.

Answer 2

Your problem is here
$('#meeting_delete_item').serialize()
You should use something else to determine that the current line is.
HTML FORM PART FOR DELETE
<form id="meeting_delete_item">
<input type="button" onclick="delete_meeting_item('.$row['id'].')" value="DELETE" />
</form>
JS
function delete_meeting_item(deleteId){
var x = confirm("Are you sure you want to permanetly delete this item?");
if (x){
$.ajax({
type: "POST",
url: "meeting_delete_item.php",
data: {mile_id: deleteId},
cache: false,
success: function(result){
alert(result);
}
})//end ajax
}
else{
return false;
}
}

Answer 3

Outside of your loop, you can keep a counter: $x = 0 and use that when generating the form: <form id="meeting_delete_item"'.$x.'>. At the end of the loop, increment the counter for the next iteration ++$x. In your javascript, you will probably retrieve the id according to the button that is pressed.
Sample Forms:
<form id="myForm1">
<button>Click me!</button>
</form>
<form id="myForm2">
<button>Click me!</button>
</form>
Sample JavaScript:
$('form button').click(function(e) {
var $form = $(this).closest('form');
console.log($form.attr('id'));
return false; //stop form submission
});
Live demo (click).
Also, inline js (like onclick in your html) has never been good practice. Instead, follow the example in my sample code and bind the click function with javascript. For more on this subject, read some of these results: https://www.google.com/search?q=Why+is+inline+js+bad%3F