使用php-Ajax动态填充数据库中的每一行

Question

I have a table that is dynamically populated from mysql database.User are expected to select a staff number, which automatically goes to the DB and fetches his staff number.I have like 10rows. it works fine for the first row but not the subsequent other others.

Please, take a look at the code and advice where I am missing it.

Thanks

<tr>
    <th nowrap="nowrap">S/N</th>
    <th nowrap="nowrap">VNO</th>
    <th nowrap="nowrap">Name</th>
    <th nowrap="nowrap">Staff No</th>
</tr>
<tr>
  <?php 
  $c=0; 
  $st =mysqli_query($connection,"SELECT * FROM tab_flt WHERE mainloc='".$_SESSION['location']."' AND status='Active'"); 
  while($r = mysqli_fetch_array($st)){  $c++?> 
  <td><?php echo $c;?></td>
  <td><input type="text" name="flt[]" value="<?php echo $r['fltno'];?>" class="form-control" readonly="readonly" /></td>
  <td><select name="opname[]" class="form-control" id="subloc">
    <option>Select...</option>
    <?php  
        $fs = getOperators($_SESSION['location']); 
        while($f = mysqli_fetch_array($fs)){?>
            <option value="<?php echo $f['name'];?>"><?php echo $f['name'];?></option>
    <?php };?>
    </select></td>
  <td id="staffno"></td>
</tr>

Ajax side:

<script type="text/javascript">
$(document).ready(function() {
    $("#subloc").change(function(){
        var sname = $("#subloc option:selected").val();
        $.ajax({
            type:"POST",
            url:"process-opno.php",
            data:{opname:sname}
        }).done(function(data3){
            $("#staffno").html(data3);  
        });
    });
});
</script>

The above fetches the first rows when subloc id is selected successfully into staffno id. But it does not do it for the remaining lines. What can i do so, that it will recognise the second line, third line etc and fetches the corresponding staff number into the staffno id .

Thanks.

Answer 1

Please try this:

PHP Part I have added classes for select box and select box ajax result

<tr>
<?php 
    $c=0; 
    $st =mysqli_query($connection,"SELECT * FROM tab_flt WHERE mainloc='".$_SESSION['location']."' AND status='Active'"); 
    while($r = mysqli_fetch_array($st)){  
    $c++;
?> 
    <td><?php echo $c;?></td>
    <td><input type="text" name="flt[]" value="<?php echo $r['fltno'];?>" class="form-control" readonly="readonly" /></td>
    <td>
        <select name="opname[]" class="form-control js-sel-box" data-id="<?php echo $c;?>">
            <option>Select...</option>
            <?php  
                $fs = getOperators($_SESSION['location']); 
                while($f = mysqli_fetch_array($fs)){
            ?>
                    <option value="<?php echo $f['name'];?>"><?php echo $f['name'];?></option>
            <?php 
                };
            ?>
        </select>
    </td>
    <td class="js-sel-box-ajax-result-<?php echo $c;?>"></td>
<?php 
    }//End While
?>
</tr>

Ajax Part:

<script type="text/javascript">
$(document).ready(function() {
    $(".js-sel-box").change(function(){
        var sname = $(this).val();
        var result_id = $(this).attr("data-id");
        $.ajax({
            type:"POST",
            url:"process-opno.php",
            data:{opname:sname}
        }).done(function(data3){
            $(".js-sel-box-ajax-result-"+result_id).html(data3);  
        });
    });
});
</script>