jQuery Ajax working for only first result in while loop

Question

The loop works fine, it display what it supposed to do, but there is a mysql update button of which updates only the first row value displayed:

$(document).ready(function() {
  $("#update").click(function() {

    var fname = $("#fname").val();
    var lname = $("#lname").val();
    var recordId = $("#recordId").val();


    $.ajax({
      url: 'update.php',
      method: 'POST',
      async: true,

      data: {
        fname: fname,
        lname: lname,
        recordId: recordId
      },
      success: function(response) {
        alert(response);

      }

    });
  });
});

<?php
        $conn = new mysqli('localhost', 'root', '123456', 'lc');
        $sql = "SELECT * FROM lc where customer='souhail'";
        $result = $conn->query($sql);
       // while ( $row=mysqli_fetch_assoc($result)) {
            while($row = $result->fetch_array()) {
           echo  'LC ID :<input type="text" id="fname" value="'.$row['element_6'].'"><br>';         
           echo  'Status :<input type="text" id="lname" value="'.$row['element_101'].'"><br>';
            $recordId = $row['lc_id'];

           echo  '<input id="recordId" name="recordId" value="' . $recordId . '" >';

           ?>
  <button type="button" style="background-color:<?php
        if($row['element_101'] == '1'){
            echo '#0000FFF';

}elseif ($row['element_101'] == '2'){
            echo '#ffff00';

}elseif ($row['element_101'] == '3'){
            echo '#00FF00';

}elseif ($row['element_101'] == '4'){
            echo '#ffffff';

    }
        //echo $row['element_101'];
        ?>;color:#000000" id="update">Go Forward ></button>

  <br><br>
  <?php

        } ?>

Almost impossible to answer given the lack of code but the ID attribute for an element MUST be unique - so the code above references IDs `fname`, `lname` and `recordID` which I'm guessing in the HTML are NOT unique. The same applies for the ID assigned to the button(s) — Professor Abronsius, Aug 12 '18 at 12:11
Possible duplicate of [Why is it a bad thing to have multiple HTML elements with the same id attribute?](https://stackoverflow.com/questions/7505350/why-is-it-a-bad-thing-to-have-multiple-html-elements-with-the-same-id-attribute) — Nico Haase, Aug 12 '18 at 12:35

mplungjan · Accepted Answer · 2018-08-12T14:22:45.840

0

You must have unique IDs but instead wrap each set in a container and access relative tags:

$(".update").on("click", function() {
  var $container = $(this).closest(".container");
  var fname = $container.find(".fname").val();
  var lname = $container.find(".lname").val();
  var recordId = $container.find(".recordId").val();

  $.ajax({
    url: 'update.php',
    method: 'POST',
    data: {
      fname: fname,
      lname: lname,
      recordId: recordId
    },
    success: function(response) {
      alert(response);
    },
    error: function(xhr, textStatus, error) {
      alert(xhr.statusText);
      console.log(textStatus);
      console.log(error);
    }
  });
});

Php

while($row = $result->fetch_array()) { 
  echo '<div class="container">
  echo 'LC ID  :<input type="text" class="fname" value="'.$row['element_6'].'"><br>'; 
  echo 'Status :<input type="text" class="lname" value="'.$row['element_101'].'"><br>'; $recordId = $row['lc_id']; 
  echo '<input class="recordId" name="recordId" value="' . $recordId . '">'; 
  echo '<button type="button" clsss="update">Go Forward ></button>';
  echo '/div>';
} ?>

edited Aug 12 '18 at 14:22

answered Aug 12 '18 at 12:25

mplungjan

169,008
28
173
236

ok can you revise the code as there is no popup, mean data are not sending to update.php – saleh zwy Aug 12 '18 at 12:58
yes I change it back, but still no getting any popup – saleh zwy Aug 12 '18 at 13:16
Check console and network tab or go back to $.ajax but add an error function – mplungjan Aug 12 '18 at 13:18
dear still not getting – saleh zwy Aug 12 '18 at 13:31
The there is likely an issue with your implementation. It should work – mplungjan Aug 12 '18 at 19:27
sorry i was mistaken by last deleted comment, i tested it in my first code instead of your new one – saleh zwy Aug 12 '18 at 19:30
yes now its working, issue was with url:'updates.php', where it should be url:'update.php', sorry my bad – saleh zwy Aug 12 '18 at 19:56

jQuery Ajax working for only first result in while loop

1 Answers1