CODEWITHSUNDEEP
javascriptphpjquery
Techy
Techy

Reputation: 2654

Get the ID of an elements who have dynamic ID values

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 IDof 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

Upvotes: 0

Views: 288

Answers (5)

Sudharsan S
Sudharsan S

Reputation: 15393

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);
});

Upvotes: 0

Arun P Johny
Arun P Johny

Reputation: 388316

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
    })
})

Upvotes: 0

Ja͢ck
Ja͢ck

Reputation: 173542

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
});

Upvotes: 0

Sridhar R
Sridhar R

Reputation: 20408

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

Upvotes: 1

logikal
logikal

Reputation: 1141

$("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');
});

Upvotes: 2

Related Questions