Get the ID of an elements who have dynamic ID values

Question

I am a newbie in Jquery. I have a table in my webpage which shows the contents of a user table from the database.I have also created an edit button and Delete button for each row of data.I need the id of each edit and delete button for writing code for editing and deleting the records in the database as well as implementing this changes in the table in the webpage also.

   $query = mysqli_query($con,"SELECT * FROM user_details");
      while($row = mysqli_fetch_array($query))
      {
          echo "<tr>";
          echo "<td>".$row['fname']."</td>";
          echo "<td>".$row['mname']."</td>";
          echo "<td>".$row['childname']."</td>";
          echo "<td><input type='button' id = 'edit".$row['Id']."' value='Edit'></td>";
          echo "<td><input type='button' id = 'delete".$row['Id']."' value='Delete'></td>";
          echo "</tr>";
      }

If I am using Jquery,how to get the ID of each button?Or If I write a onclick event using javascript for each button and passes the ID's as arguments,can I access via Jquery.Please help me

Answer 1

$("button").each(function(index, item) {
    var itemId = $(item).attr('id');
});

But I would set the $row['id'] into a data-id attribute and then use:

$("button").each(function(index, item) {
    var itemId = $(item).data('id');
});

Answer 2

Add common class name and use that as a selector to get id of the buttons like below

Try like this

$(document).on('click','.edit_btn',function(){
  alert($(this).attr('id'));
});
$(document).on('click','.del_btn',function(){
  alert($(this).attr('id'));
});

HTML

<input type='button' id ='edit' class="edit_btn" value='Edit'>
<input type='button' id ='delete' class="del_btn" value='Delete'>

DEMO

Answer 3

Use Attribute starts with selector , and Event Delegation

$(document).on("click" , "[id^='edit']" ,function() {
    console.log(this.id);
});

$(document).on("click" , "[id^='delete']" , function() {
    console.log(this.id);
});

Answer 4

You can use a data-* attribute to specify the ID and use a common class to call the click handler

echo "<td><input type='button' id = 'edit".$row['Id']."' data-id='".$row['Id']."' value='Edit' class='edit-record'></td>";

then in jQuery

jQuery(function ($) {
    $(document).on('click', '.edit-record', function () {
        //this is called when the edit button is clicked
        var $this = $(this),
            id = $this.data('id');
        //now id has the value of current record's id
    })
})

Answer 5

First of all, you need to escape your variables in HTML context using htmlspecialchars() . Second, you can use data attributes to easily identify the record that needs be edited or deleted.

?>
<tr>
    <td><?= htmlspecialchars($row['fname'], ENT_QUOTES, 'UTF-8') ?></td>
    <td><?= htmlspecialchars($row['mname'], ENT_QUOTES, 'UTF-8') ?></td>
    <td><?= htmlspecialchars($row['childname'], ENT_QUOTES, 'UTF-8') ?></td>
    <td><input type="button" class="edit" data-id="<?= $row['Id'] ?>" value="Edit"></td>
    <td><input type="button" class="delete" data-id="<?= $row['Id'] ?>" value="Delete"></td>
</tr>
<?php

Then, you can use classes to identify the buttons instead:

$('.edit').on('click', function() {
    var id = $(this).data('id');
    // edit stuff
});

$('.delete').on('click', function() {
    var id = $(this).data('id');
    // delete stuff
});