Only first row button is working in a table - PHP

dorami
November 8, 2022
188 views
0 votes
2 Answers

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 class="card-body">
    <div class="table-responsive ">
<?php
    $query = "SELECT * FROM book_now";
    $query_run = mysqli_query($conn, $query);
?>
        <table class="table table-bordered table table-striped" id="dataTable" cellspacing="0">
            <thead class="table table-success text-center" 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 class="text-center">
                    <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>

Answers

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>

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 class="card-body">
  <div class="table-responsive ">
    <table class="table table-bordered table table-striped" id="dataTable" cellspacing="0">
      <thead class="table table-success text-center" style="width: 80%">
        <tr
          <th> Complete </th>
          <th> Write Prescription </th>
        </tr>
      </thead>
      <tbody>
        <tr class="text-center">
          <td>
            <form action="" method="post">
              <input class="accountDetails" type="button" value="Yes" />
            </form>
          </td>
        </tr>
        <tr class="text-center">
          <td>
            <form action="" method="post">
              <input class="accountDetails" type="button" value="Yes" />
            </form>
          </td>
        </tr>        
        <tr class="text-center">
          <td>
            <form action="" method="post">
              <input class="accountDetails" type="button" value="Yes" />
            </form>
          </td>
        </tr>
      </tbody>
    </table>
  </div>
</div>

Please signup or login to give your own answer.

Click here to cancel reply.

Only first row button is working in a table – PHP

Answers