首页 > 解决方案 > 我回显了一个表单和 ajax 代码以使用 php 保存该特定表单,但无论我选择什么,它都只保存第一行数据

问题描述

这是我正在处理的页面有问题。即使我单击下面行的保存按钮,表格第一行的数据也会被保存。是否有相同的解决方案或建议。

 <table>
  <tr>
   
   <th>BED</th>
    <th>NAME</th>
   
    <th>RBS<br>Serum Electrolytes<br>RFT</th>
     <th>CBC</th>
     <th>PT,APTT,INR</th>
    <th>LFT</th>
    
    <th>Urine <br>Electrolytes</th>
    <th>Serum & <br>Urine<br> OSMOLALITY</th>
    
    <th>Procalcitonine</th>
    <th>TFT</th>
    <th>LIPID<br>Profile</th>
    <th>Ammonia <br>& Phosphate</th>
    <th>ACTION</th>
  </tr>
 
  
  
  <?php
  
  include'connection.php';
  
  $sql = "SELECT id,fname,mname, lname,uhid,bednumber FROM patientlist WHERE status='active' ORDER BY `bednumber` ASC";
$result = mysqli_query($link, $sql);

if (mysqli_num_rows($result) > 0) {
  // output data of each row
  while($row = mysqli_fetch_assoc($result)) {
    
    
    $id=$row["id"];
    $fname=$row["fname"];
    $mname=$row["mname"];
    $lname=$row["lname"];
    $uhid=$row["uhid"];
    $bednumber=$row["bednumber"];
    
    $spacer='&nbsp;';
    
    $name=$fname.$spacer.$mname.$spacer.$lname;
    

我遇到了以下代码段的问题,该代码段从 db 动态呈现为表单。每一行将是一个单独的表单,在 sumbit 按钮上具有不同的 id

    echo"  
  <tr>
  
 <form>
  <input type='hidden' name='id' id='id' value='$id'>
   <input type='hidden' name='fname' id='fname' value='$fname'>
   <input type='hidden' name='mname' id='mname' value='$mname'>
   <input type='hidden' name='lname' id='lname' value='$lname'>
   <input type='hidden' name='uhid' id='uhid' value='$uhid'>
    <input type='hidden' name='bednumber' id='bednumber' value='$bednumber'>
    
   
   <td>$bednumber</td>
    <td>$name</td>
    <td><input type='checkbox' name='rbs' id='rbs' value='RBS,SE,RFT' checked></td>
    <td><input type='checkbox' name='cbc' id='cbc' value='CBC' ></td>
    <td><input type='checkbox' name='pt' id='pt' value='PT,APTT,INR' ></td>
    <td><input type='checkbox' name='lft' id='lft' value='LFT' ></td>
    <td><input type='checkbox' name='ue' id='ue' value='URINE ELECTROLYTES' ></td>
    <td><input type='checkbox' name='osmo' id='osmo' value='SERUM & URINE OSMOLALITY' ></td>
    <td><input type='checkbox' name='procal' id='procal' value='PROCALCITONINE' ></td>
    <td><input type='checkbox' name='tft' id='tft' value='TFT' ></td>
    <td><input type='checkbox' name='lipid' id='lipid' value='LIPID PROFILE' ></td>
    <td><input type='checkbox' name='ammo' id='ammo' value='AMMONIA & PHOSPHATE' ></td>
    <td>
 <input id='$id' type='button' class='btn-submit' value='Save' ><input type='reset'></td>
 </form>
  </tr>

这是使用提交按钮 id 来保存数据的 ajax 代码。表单和 ajax 代码都将进入 php 的 echo

  <script>
  

  
    $(document).ready(function() {
 
            $('#$id').click(function() {
 
                var id = $('#id').val();
                var fname = $('#fname').val();
                var mname = $('#mname').val();
                var lname = $('#lname').val();
                var uhid = $('#uhid').val();
                var bednumber = $('#bednumber').val();
                
                
                var rbs = $('#rbs').val();
                var cbc = $('#cbc').val();
                var pt = $('#pt').val();
                var lft = $('#lft').val();
                var ue = $('#ue').val();
                var osmo = $('#osmo').val();
                var procal = $('#procal').val();
                var tft = $('#tft').val();
                var lipid = $('#lipid').val();
                var ammo = $('#ammo').val();
                
                
 
                if(id==''||uhid==''||bednumber=='') {
                    alert('Form render error.Demographics return empty.');
                    return false;
                }
 
                $.ajax({
                    type: 'POST',
                    url: 'labbookformhandler.php',
                    data: {
                        id: id,
                        fname: fname,
                        mname: mname,
                        lname: lname,
                        uhid: uhid,
                        bednumber: bednumber,
                        rbs: rbs,
                        cbc: cbc,
                        pt: pt,
                        lft: lft,
                        ue: ue,
                        osmo: osmo,
                        procal: procal,
                        tft: tft,
                        lipid: lipid,
                        ammo: ammo
                    },
                    cache: false,
                    success: function(data) {
                        alert(data);
                    },
                    error: function(xhr, status, error) {
                        console.error(xhr);
                    }
                });
                 
            });
 
        });
        
        
    </script> 
  
  
  ";
    
    
    
    
    
    
    
  }
} 

我的目标是为每行末尾提供的特定保存按钮分别保存每一行数据。我尽力了。我不是专业人士。我这样做是一种爱好。请给我一个建议,以便我可以纠正它并学习新的东西。

标签: phphtmlcssajax

解决方案


我根据您的建议更改了我的代码,它就像一个魅力

<form id='form-$id' method='POST' action='' >
  <input type='hidden' name='id' id='id' value='$id'>
   <input type='hidden' name='fname' id='fname' value='$fname'>
   <input type='hidden' name='mname' id='mname' value='$mname'>
   <input type='hidden' name='lname' id='lname' value='$lname'>
   <input type='hidden' name='uhid' id='uhid' value='$uhid'>
    <input type='hidden' name='bednumber' id='bednumber' value='$bednumber'>
    
   
   <td>$bednumber</td>
    <td>$name</td>
    <td><input type='checkbox' name='rbs' id='rbs' value='RBS,SE,RFT' checked></td>
    <td><input type='checkbox' name='cbc' id='cbc' value='CBC' ></td>
    <td><input type='checkbox' name='pt' id='pt' value='PT,APTT,INR' ></td>
    <td><input type='checkbox' name='lft' id='lft' value='LFT' ></td>
    <td><input type='checkbox' name='ue' id='ue' value='URINE ELECTROLYTES' ></td>
    <td><input type='checkbox' name='osmo' id='osmo' value='SERUM & URINE OSMOLALITY' ></td>
    <td><input type='checkbox' name='procal' id='procal' value='PROCALCITONINE' ></td>
    <td><input type='checkbox' name='tft' id='tft' value='TFT' ></td>
    <td><input type='checkbox' name='lipid' id='lipid' value='LIPID PROFILE' ></td>
    <td><input type='checkbox' name='ammo' id='ammo' value='AMMONIA & PHOSPHATE' ></td>
    <td>
 <input id='save-$id' type='button' class='btn-submit' value='Save' ><input type='reset'></td>
 </form>
  </tr>
  
  
  <script>
  $(document).on('click','#save-$id',function(e) {
    var data = $('#form-$id').serialize();
    $.ajax({
         data: data,
         type: 'post',
         url: 'labbookformhandler.php',
         success: function(data){
              alert(data);
         }
    });
});
        
        
    </script> 

给出了更正的代码。如果有更多建议,请发表评论


推荐阅读