How to POST from php table generated by mysql select when toggle btn in row is clicked?

I have a PHP page that retrieves data from a MYSQL select statement to populate 8-12 rows of a HTML table. Each row has a server name and a status represented by a bootstrap toggle switch for either condition on or off. When the toggle is changed, I want to POST the servername and desired state for that server to action.php. I was able to use some AJAX scripts I found to get the POST info to change the condition from 1 to 2, but only for the last row. I have not be able to figure out how to get the servername for each row to the script. How can I achieve this?

<table class="table table-hover" >
  <thead>
    <tr>
      <th class="all"> Server </th>
      <th class="all"> Status </th>
    </tr>
  </thead>
  <tbody>
    <?php
      include '../includes/DBConn.php';
    
      $sql="SELECT name FROM ServerList WHERE active = 1 AND location = 3";
      $result = $conn->query($sql);
    
      if ($result->num_rows > 0) {
        // output data of each row
        while($row = $result->fetch_assoc()) {
          $ServerName = $row['name'];
          ?>
          <tr>
            <td> <?php echo $ServerName;?> </td>
            <td> 
              <?php 
                if($condition1 !== false ) {
                ?>
                <input id="toggle-event" checked type="checkbox" data-toggle="toggle" data-onstyle="success" data-offstyle="danger" data-size="small" >
               <?php
               }elseif($condition2 == false) {
               ?>
                 <input id="toggle-event" type="checkbox" data-toggle="toggle" data-onstyle="success" data-offstyle="danger" data-size="small">
               <?php
               }
               ?>
             </td>
          </tr>
          <?php        
         }
       }else {
         echo "0 results";
       }
       $conn->close();
       ?>                
  </tbody>
</table>

My attempt at ajax. This will POST to the desired page for the last row only and only if toggle is checked (condition1).

<table class="table table-hover">
  <thead>
    <tr>
      <th class="all"> Server </th>
      <th class="all"> Status </th>
    </tr>
  </thead>
  <tbody>
  <?php
    include '../includes/DBConn.php';
                
    $sql="SELECT name FROM ServerList WHERE active = 1 AND location = 3";
    $result = $conn->query($sql);
                
    if ($result->num_rows > 0) {
      // output data of each row
      while($row = $result->fetch_assoc()) {
        $ServerName = $row['name'];
        ?>
        <tr>
          <td> <?php echo $ServerName;?> </td>
          <td> 
          <?php 
          if($condition1) !== false ) {
          ?>
            <form id="toggle-form1-<?php echo $ServerName; ?>" name="myForm" action="action.php" method="post">
            <input id="toggle-event1<?php echo $ServerName;?>" checked type="checkbox" data-toggle="toggle" data-onstyle="success" data-offstyle="danger" data-size="small">
            </form>
            <div id="console-event"></div>
            <script> var serverName = '<?=$ServerName?>';</script>
          <?php
          }elseif($condition2) == false) {
          ?>
            <input id="toggle-event2" type="checkbox" data-toggle="toggle" data-onstyle="success" data-offstyle="danger" data-size="small">
          <?php
          }
          ?>
        </td>
      </tr>
      <?php        
     }
   }else {
      echo "0 results";
   }
   $conn->close();
   ?>                
 </tbody>

<script>
  $(function() {
    $('#toggle-event1' + serverName).change(function() {
      $('#console-event').html('Toggle: ' + $(this).prop('checked'));
      console.log(serverName);
      var mode= $(this).prop('checked');
     
      $.post("/action.php", {
        mode:mode,
        desire:0,
        server:serverName,
      });
    })
  })
</script>

Answer

Inside the while loop you have:

<script> var serverName = '<?=$ServerName?>';</script>

which is why the last one is only picked up.

<script>
    $(function() {
        $('.toggle-event').change(function() {
            var serverName = $(this).data('server-name');
            var mode = $(this).prop('checked');

            $(this).siblings('.console-event').html('Toggle: ' + mode);

            console.log(serverName);


            $.post("/action.php", {
                mode:mode,
                desire:0,
                server:serverName,
            });
        })
    })
</script>

<table class="table table-hover" >
    <thead>
    <tr>
        <th class="all"> Server </th>
        <th class="all"> Status </th>
    </tr>
    </thead>
    <tbody>
    <?php include '../includes/DBConn.php';

    $sql="SELECT name FROM ServerList WHERE active = 1 AND location = 3";
    $result = $conn->query($sql);

    if ($result->num_rows > 0) {
        // output data of each row
        while($row = $result->fetch_assoc()) {?>
            <tr>
                <td> <?php echo $row['name'];?> </td>
                <td>
                    <input data-server-name="<?php echo $row['name']?>" class="toggle-event" <?php echo ($condition1 !== false) ? "checked" : "" ?> type="checkbox" data-toggle="toggle" data-onstyle="success" data-offstyle="danger" data-size="small" />
                    <div class="console-event"></div>
                </td>
            </tr>
            <?php
        }
    } else {
        echo "0 results";
    }
    $conn->close();
    ?>
    </tbody>
</table>

Advertisement

Answer