How can i get the dynamic value of button on click with id or data attribute

Question

HI in this code only the first button on click event is working but when i click on 2nd nothin happen i don't want to use input:button coz i have multiple button on page..

   <table border="1">
 <tr>
      <td>Name</td>
      <td>Email</td>
      <td>phone</td>
      <td>Btn</td>
    </tr>
    <tr>
      <td>user 1</td>
      <td>user1@mail.com</td>
      <td>123456</td>
      <td>
        <button id="btnids" data-id="a1" value="a1">active</button>
       </td>
    </tr>
     <tr>
      <td>user 1</td>
      <td>user1@mail.com</td>
      <td>123456</td>
      <td>
        <button id="btnids" data-id="a2" value="a2">active</button>
       </td>
    </tr>
     <tr>
      <td>user 1</td>
      <td>user1@mail.com</td>
      <td>123456</td>
      <td>
        <button id="btnids" data-id="a3" value="a3">active</button>
       </td>
    </tr>
    </table>
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
<script type="text/javascript">
    $(document).ready(function(){
          $("#btnids").click(function(){
            alert($(this).val());
          });
    });
</script>

thanks!

`id`s should be unique. You need to use `class` – Eddie May 10 '18 at 09:55 — Eddie, May 10 '18 at 09:55
Don't use same id for every button. Use class instead. – Mihai Alexandru-Ionut May 10 '18 at 09:55 — Mihai Alexandru-Ionut, May 10 '18 at 09:55

score 1 · Answer 1 · answered May 10 '18 at 09:56

Attribute id should be unique. Change the attribute from id to class:

$(document).ready(function(){
    $(".btnids").click(function(){
      alert($(this).val());
    });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table border="1">
  <tr>
    <td>Name</td>
    <td>Email</td>
    <td>phone</td>
    <td>Btn</td>
  </tr>
  <tr>
    <td>user 1</td>
    <td>user1@mail.com</td>
    <td>123456</td>
    <td>
      <button class="btnids" data-id="a1" value="a1">active</button>
     </td>
  </tr>
   <tr>
    <td>user 1</td>
    <td>user1@mail.com</td>
    <td>123456</td>
    <td>
      <button class="btnids" data-id="a2" value="a2">active</button>
     </td>
  </tr>
   <tr>
    <td>user 1</td>
    <td>user1@mail.com</td>
    <td>123456</td>
    <td>
      <button class="btnids" data-id="a3" value="a3">active</button>
     </td>
  </tr>
</table>

score 0 · Accepted Answer · answered May 10 '18 at 09:55

Use class instead of ID because element IDs should be unique within the entire document.

<table border="1">
 <tr>
      <td>Name</td>
      <td>Email</td>
      <td>phone</td>
      <td>Btn</td>
    </tr>
    <tr>
      <td>user 1</td>
      <td>user1@mail.com</td>
      <td>123456</td>
      <td>
        <button class="btnids" data-id="a1" value="a1">active</button>
       </td>
    </tr>
     <tr>
      <td>user 1</td>
      <td>user1@mail.com</td>
      <td>123456</td>
      <td>
        <button class="btnids" data-id="a2" value="a2">active</button>
       </td>
    </tr>
     <tr>
      <td>user 1</td>
      <td>user1@mail.com</td>
      <td>123456</td>
      <td>
        <button class="btnids" data-id="a3" value="a3">active</button>
       </td>
    </tr>
    </table>
<script src="https://code.jquery.com/jquery-3.3.1.js"></script>
<script type="text/javascript">
    $(document).ready(function(){
          $(".btnids").on('click',function(){
            alert($(this).val());
          });
    });
</script>

How can i get the dynamic value of button on click with id or data attribute

2 Answers2