Question

I am adding ajax to this little list web app I made.

I have buttons being output by a php script for each item of a list. I want to call ajax to delete an item with php and mysql when the delete button is clicked for one of the items.

Below is the delete button for item 62. It has a hidden field which contains the id of the list item in the database. When the button is clicked I want a jquery click event to be called which should send off an ajax request to delete the item with that id from the database.

<form class="actions" action="index.php" method="POST">
<input type="hidden" name="idDel" id="62" value="62">
<input type="submit" class="button delete" value="X">
</form>

The jquery I have thought of so far is below. When a button with the class .delete is clicked (any of the delete buttons) it needs to somehow get the id value from the hidden field.

('.delete').click(function(){
              //add click logic here

              var id = $("input.delete").val();

    return false;

    $.ajax({
      type: "POST",
      url: "delete.php",
      data: id,
      success: function() {

Now, I have looked at two similar questions and tried their solutions but I could not figure out the code from them.

1. JQuery – which form was submitted?
2. How can I get the button that caused the submit from the form submit event?

Thanks.

Answer 1

Use $(this) to reference the button that was clicked, then use .prev() to get the element before the button, which is the input you want in this case:

$('.delete').click(function() {
    // Add click logic here

    var id = $(this).prev('input').val();

    return false;

    $.ajax({
        type: "POST",
        url: "delete.php",
        data: id,
        success: function() {

        });
    });
});

---

You could also store the ID in a data- attribute of the button itself, which would mean less HTML (but you would lose the non-JS POST-ability of the form):

HTML:

<form class="actions" action="index.php" method="POST">
   <input type="submit" class="button delete" value="X" data-id="62">
</form>

jQuery:

$('.delete').click(function() {
    // Add click logic here

    var id = $(this).data('id');

    return false;

    $.ajax({
        type: "POST",
        url: "delete.php",
        data: id,
        success: function() {

        });
    });
});