how to id of button in table using jquery? - php

Question

<table id="example1" class="table table-bordered table-striped">
<thead>
<tr>
<th>Email</th>
<th>Name</th>
<th>Subject</th>
<th>Message</th>
</tr>
</thead>
<tbody>
<?php
foreach($fetchContactData as $value)
{
?>
<tr>
<td><?php echo $value['email'] ?></td>
<td><?php echo $value['name']?></td>
<td><?php echo $value['subject'] ?></td>
<td><button type="button" class="btn btn-warning" value="<?php echo $value['message'] ?>">Show</button></td>
<?php
}?>
</tbody>
<tfoot>
<tr>
<th>Email</th>
<th>Name</th>
<th>Subject</th>
<th>Message</th>
</tr>
</tfoot>
</table>
Js code:
<script type="text/javascript">
$(document).ready(function(){
$("#example1 button").click(function(){
var id=$(this).attr('value');
});
});
</script>
here at each row there is unique id to button. so onclick of that button i want that id in jquery. I tried many searches from stackoverflow but its not working so anyone can help me with jquery part with this exact same code
Here is my js now i want that long message so that i could show it in modal class div.
[Violation] Forced reflow while executing JavaScript took 73ms ---> This is the error i got

Answer 1

An "id" is always used to identify something and therefore should be unique. So you have to make it unique in the first place. Something like this should work.
<table id="example1" class="table table-bordered table-striped">
<thead>
<tr>
<th>Email</th>
<th>Name</th>
<th>Subject</th>
<th>Message</th>
</tr>
</thead>
<tbody>
<?php
$i = 0;
foreach($fetchContactData as $value)
{
?>
<tr>
<td><?php echo $value['email'] ?></td>
<td><?php echo $value['name']?></td>
<td><?php echo $value['subject'] ?></td>
<td><button type="button" class="btn btn-warning" id="show-<?= $i; ?>" value="<?php echo $value['id'] ?>">Show</button></td>
<?php
$i++;
}?>
</tbody>
<tfoot>
<tr>
<th>Email</th>
<th>Name</th>
<th>Subject</th>
<th>Message</th>
</tr>
</tfoot>
</table>
In this code, there will be the variable "$i" that is set to 0 in the beginning and just appended to the id "show-". Last step of the foreach-loop, this 0 is just counted up by one.
This will generate and id in the format of "show-0", "show-1" (you could set $i to 1 in the beginning to make it start counting from 1). In jQuery, you then could use the "starts with"-selector to select all buttons and set an onclick event on it. (just one example) https://api.jquery.com/attribute-starts-with-selector/
<script>
$( "button[id^='show-']" ).on('click', clickhandler);
</script>
So for every button that has an id starting with "show-" you can make it do the action "clickhandler".

Answer 2

your id=button is into loop, so is not unique.
I advise you do not use id, better you can use something like class and in your js script listen click to this, like:
<td><button type="button" class="btn btn-warning button_msg" value="<?php echo $value['message'] ?>">Show</button></td>
Js (jquery)
$(".button_msg').click(function(){
//Do anything
})