Only first row button is working in a table-CodePudding

Problem: In the complete column, there is yes button after clicking on it, it show consulted but problem is only one row is working. I don't understand how i defined each row uniquely. Please have a look at this code and let me know what mistake I'm doing here.

<div >
    <div >
<?php
    $query = "SELECT * FROM book_now";
    $query_run = mysqli_query($conn, $query);
?>
        <table  id="dataTable" cellspacing="0">
            <thead  style="width: 80%">
                <tr>
                    <th style="width: 1%"> S.No </th>
                    <th> Patient Name </th>
                    <th> UHID </th>
                    <th style="width: 12%"> Time Slot </th>
                    <th> Contact No </th>
                    <th> Complete </th>
                    <th> Write Prescription </th>
                </tr>
            </thead>
            <tbody>
<?php
if(mysqli_num_rows($query_run) > 0)        
{
    foreach($query_run as $row)
    {
?>
                <tr >
                    <td><?php  echo $row['booking_id']; ?></td>
                    <td><?php  echo $row['name']; ?></td>
                    <td><?php  echo $row['booked_by']; ?></td>
                    <td><?php  echo $row['appointment_time_slot']; ?></td>
                    <td><?php  echo $row['phone']; ?></td>
                    <td>
                        <form action="" method="post">
                            <input onclick="func()" id="accountDetails" type="button" value="Yes"></input>
<script>
function func() {
    document.getElementById('accountDetails').value  = 'Consulted';
}
</script>
                        </form>

CodePudding user response：

The issue is because you're using id attributes in the repeated content which creates duplicates. id have to be unique.

To fix the issue change that id to a class, then you can create an event handler to listen for any click on any of the button elements. From there you can use the Event object passed to the event handler to update only the button which was clicked.

Note in the example below the use of an unobtrusive event handler instead of an inline onclick attribute. The latter is not good practice and should be avoided. Also note that the event is delegated to the parent table. This allows us to use a single event handler no matter how many rows/buttons the table contains, or if they are dynamically created after the DOM loads.

document.querySelector('#dataTable').addEventListener('click', e => {
  if (e.target.matches('.accountDetails'))  
    e.target.value = 'Consulted';
});

<div >
  <div >
    <table  id="dataTable" cellspacing="0">
      <thead  style="width: 80%">
        <tr
          <th> Complete </th>
          <th> Write Prescription </th>
        </tr>
      </thead>
      <tbody>
        <tr >
          <td>
            <form action="" method="post">
              <input  type="button" value="Yes" />
            </form>
          </td>
        </tr>
        <tr >
          <td>
            <form action="" method="post">
              <input  type="button" value="Yes" />
            </form>
          </td>
        </tr>        
        <tr >
          <td>
            <form action="" method="post">
              <input  type="button" value="Yes" />
            </form>
          </td>
        </tr>
      </tbody>
    </table>
  </div>
</div>

CodePudding user response：

The reason is you have make the form have same id accountDetails and then you select by the same id,so it's only work for first row

<form action="" method="post">
    <input onclick="func()" id="accountDetails" type="button" value="Yes"></input>
    <script>
    function func() {
    document.getElementById('accountDetails').value  = 'Consulted';
    }
    </script>
</form>

In order to solve it,you need to make id unique in each row,below is one option for you

<form action="" method="post">
    <input onclick="func()" id="accountDetails<?php  echo $row['booking_id']; ?>" type="button" value="Yes"></input>
    <script>
    function func() {
    document.getElementById('accountDetails<?php  echo $row['booking_id']; ?>').value  = 'Consulted';
    }
    </script>
</form>