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>[email protected]</td>
      <td>123456</td>
      <td>
        <button id="btnids" data-id="a1" value="a1">active</button>
       </td>
    </tr>
     <tr>
      <td>user 1</td>
      <td>[email protected]</td>
      <td>123456</td>
      <td>
        <button id="btnids" data-id="a2" value="a2">active</button>
       </td>
    </tr>
     <tr>
      <td>user 1</td>
      <td>[email protected]</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!

ids should be unique. You need to use class

Eddie
– Eddie

2018-05-10 09:55:45 +00:00
Commented May 10, 2018 at 9:55 — Eddie
– Eddie, Commented May 10, 2018 at 9:55
Don't use same id for every button. Use class instead.

Mihai Alexandru-Ionut
– Mihai Alexandru-Ionut

2018-05-10 09:55:54 +00:00
Commented May 10, 2018 at 9:55 — Mihai Alexandru-Ionut
– Mihai Alexandru-Ionut, Commented May 10, 2018 at 9:55

Mamun · Accepted Answer · 2018-05-10 09:56:44Z

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>[email protected]</td>
    <td>123456</td>
    <td>
      <button class="btnids" data-id="a1" value="a1">active</button>
     </td>
  </tr>
   <tr>
    <td>user 1</td>
    <td>[email protected]</td>
    <td>123456</td>
    <td>
      <button class="btnids" data-id="a2" value="a2">active</button>
     </td>
  </tr>
   <tr>
    <td>user 1</td>
    <td>[email protected]</td>
    <td>123456</td>
    <td>
      <button class="btnids" data-id="a3" value="a3">active</button>
     </td>
  </tr>
</table>

Kiran Shahi · Accepted Answer · 2018-05-10 09:55:54Z

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>[email protected]</td>
      <td>123456</td>
      <td>
        <button class="btnids" data-id="a1" value="a1">active</button>
       </td>
    </tr>
     <tr>
      <td>user 1</td>
      <td>[email protected]</td>
      <td>123456</td>
      <td>
        <button class="btnids" data-id="a2" value="a2">active</button>
       </td>
    </tr>
     <tr>
      <td>user 1</td>
      <td>[email protected]</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>

Collectives™ on Stack Overflow

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

2 Answers 2

Comments

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Linked

Related