I have this form with some input fields, where upon submitting the form the data gets appended to a table, more like a list. The data gets appended to the table list and also gets sent to the data base using ajax, both action takes place when I click on submit. Below is the form.
<div id ="product_calculator" style="border: 1px solid gray; padding: 10px; display:none;margin-top: 5px;"><br>
<div class="row">
<div class="col-md-2">
<label>Product Name</label>
<input class="form-control" name="productname" type="text" id="productname" value=""><br>
</div>
<div class="col-md-2">
<label>Width</label>
<input class="form-control" name="width" step ="any" type="text" id="width" value=""><br>
</div>
<div class="col-md-2">
<label>Height</label>
<input class="form-control" name="height" step ="any" type="text" id="height" value=""><br>
</div>
<div class="row">
<div class="col-md-1">
<input type="button" class="btn btn-default" name="submit" class="submit" id="submit" class="btn btn-info" value="ADD TO LIST" />
</div>
</div>
This is table where the data gets appended,
<div>
<table class="table table-hover">
<thead>
<tbody class="details">
</tbody>
<tfoot>
</tfoot>
</table>
</div>
This is the jquery and ajax where I append the data to the list and send it to the database as well, you can also I attach a remove button to each of my appended list item
$('#submit').on("click" , function(){
var productname = $('#productname').val();
var width = $('#width').val();
var height = $('#height').val();
$.ajax({
url:"item_list_process.php",
method:"POST",
data:{productname:productname,width:width,height:height},
success:function(data){
$("#list_message").html(data)
}
})
var tr = '<tr>'+
'<td><input type="text" name="product_name[]" required class="form-control product_name" value="'+productname+'"></td>'+
'<td><input type="text" name="width[]" required class="form-control width" value="'+width+'"></td>'+
'<td><input type="text" name="height[]" required class="form-control height" value="'+height+'"></td>'+
'<td><input type="button" name="remove" class="btn btn-danger remove" value="Remove"></td>'+
'</tr>';
$('.details').append(tr);
})
Now you can see I attach a remove button to each of my list item, upon clicking on the button I remove the list item from the table as well as from the data base using ajax and jquery. The code is below, I use the data from the appended list to send it to php for it to recognize which line of item to delete
$('.details').on('click','.remove',function(){
var con = confirm("Do you want to remove it ?");
if(con){
var pro = $('.product_name').val();
var wid = $('.width').val();
var hei = $('.height').val();
$.ajax({
url:"item_list_delete.php",
method:"POST",
data:{pro:pro,wid:wid,hei:hei},
success:function(data){
$("#delete").html(data)
}
})
$(this).parent().parent().remove();
}
});
Now the problem is when I delete the data, ajax seems to be only working once when deleting the data from the data base, after that it dosent work, for example lets say I have 4 items, lets say I clicked on the 3rd item, the item gets deleted from database and also gets removed from the list, but when I click on the first item after deleting the 3rd item, the ajax dosent work anymore, nor does it work on any more of my list items when I click on thier remove button.
Check what is been passed to the id='delete' via this $("#delete").html(data). Because any data if you are manipulating via ajax thous class will not be consider for next action.
You can check weather action triggers when you click on it by adding alert('test');
for each row you can consider different id's by appending row id's to it. When you are preforming any action on remove button you can remove particular row based on the unique ids. like