2

Some strange problem occurred. I am trying to delete a record from a table by using AJAX but whenever I click the delete button it is sending the ID of the last row in the table each time instead of that specific ID which I want to delete to my delete-process.php page. Now I checked that the PHP page and codes are just working fine. When I did console.log(dataString) I got to see that no matter which Delete button I click I get the ID of the last field only.

Code

<table class="table table-hover table-striped">
              <thead>
                <th>ID</th>
                <th>Name</th>
                <th>Email</th>
                <th>Phone</th>
                <th>Date</th>
                <th>Action</th>
              </thead>
              <tbody>
                <?php while($si = $stmt->fetch()){ extract($si); ?>
                <tr>
                  <td><?php echo $ct_id; ?></td>
                  <td><?php echo $ct_name; ?></td>
                  <td><?php echo $ct_email; ?></td>
                  <td><?php echo $ct_phone; ?></td>
                  <td><?php echo date('jS M, Y (h:i a)', strtotime($ct_date)); ?></td>
                  <td>
                    <form method="post" action="">
                      <a href="view-msg.php?id=<?php echo $ct_id; if(!empty($_GET['ids'])){ ?>&ids=<?php echo $_GET['ids']; } ?>" class="btn btn-info btn-fill">View</a>
                      <input type="text" value="<?php echo $ct_id; ?>" class="ctid">
                      <input type="submit" value="Delete" class="btn btn-danger btn-fill delete">
                    </form>
                  </td>
                </tr>
                <?php } ?>
              </tbody>

AJAX

$(document).ready(function() {
  $(".delete").click(function() {
    var dataString = {
      id: $(".ctid").val()
    };
    console.log(dataString);
    var $submit = $(this).parent().find('.delete');
    $.confirm({
      title: 'Confirm!',
      content: 'Are you sure you want to delete this message?',
      buttons: {
        confirm: function () {
          $.ajax({
            type: "POST",
            //dataType : "json",
            url: "delete-process.php",
            data: dataString,
            cache: true,
            beforeSend: function(){
              $submit.val("Please wait...");
            },
            success: function(html){
              $('.message').html(html);
              if($('.message').find('#responseBox').hasClass('alert-success')){
                $.alert(html);
                setTimeout(function(){
                  window.location.replace("support.php<?php if(!empty($_GET['ids'])){ ?>?ids=<?php echo $_GET['ids']; } ?>");
                },2000);
              }
            }
          });
        },
        cancel: function(){}
      }
    });
    return false;
  });
});

I did not include PHP code because the error is detected in console.log(dataString) as every button clicked is sending the same ID. Please help.

Improve this question

5 Answers 5

Reset to default
1

$(".ctid") will return an array containing all of the elements with that class.

You are only interested in the sibling to the clicked button so you should use $(this).prev().

$(this) will reference the clicked button. .prev() selects the immediately proceeding sibling.

$(".delete").click(function() {
    var dataString = {
      id: $(this).prev().val()
    };
    ...
});
Improve this answer
Sign up to request clarification or add additional context in comments.

5 Comments

Okay so can you explain that between $(this).closest('form').find('.ctid').val() and $(this).prev().val() which one is a better code?
$(this).prev().val() is shorter and (I believe) more readable. Which is better is subjective. They essentially do the same thing.
$(this).closest('form').find('.ctid').val() would be less breakable code, for example when you add multiple buttons. The solution with $(this).siblings('.ctid').val() also is less breakable and short.
Every selector is breakable if the HTML is changed. We can only deal with the HTML as presented.
The main point here is that you need to select the relevant input based on the button clicked. How you go about selecting that element will depend on the structure of the HTML. You have lots of options presented here in the answers. All of which will work based on your current HTML structure.
1

As you are creating the table rows using loop so the class ctid is repeated. so when you are accessing this like this id: $(".ctid").val(). It will return all the elements having class ctid. So change your script like this

var dataString = {
  id: $(this).siblings('.ctid').val()
};
Improve this answer

Comments

0

Of course it is selecting the same ctid since you don't distinguish between forms. You can distinguish like this:

var dataString = {
      id: $(this).closest('form').find('.ctid').val()
    };

"closest" navigates to the form and then find the ctid that is contained in the form.

Improve this answer

Comments

0

When you do this:

$(".ctid").val()

Which matching element are you expecting? The code doesn't specify, and ".ctid" matches multiple elements. But since it can only return a single value, it's simply returning the last matching one. Essentially, you need to specify which matching element you want.

One way to do this is by navigating the DOM from the clicked button to the nearest matching element. Perhaps by navigating up to a single common parent element and then finding the target element therein. Something like this:

$(this).closest("form").find(".ctid").val()

Starting from the clicked element which raised the event (this), it navigates up to the containing <form> and then searches for the matching ".ctid" within that form. Then gets the value from only that element.

Improve this answer

Comments

-1

You can inspect to check each button value is getting unique or not You can achieve that without using ajax use below code

<a href="delete-process.php?id=value of id" onclick="return confirm('Are you sure you want to delete ?')"> Delete </a>
Improve this answer

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.