自动填充动态生成的表单

Question

我构建了一个可以从 MySQL 数据库中选择数据的表单，并且所选行的所需字段将显示在表单的输入字段中。但是，从某种意义上说，这种形式是动态的，您可以拥有同一种形式的多种形式。

如果生成了两个或多个表单，则只有第一个表单会自动填充。我希望每个表单在从数据库中选择一行时自动填充其相应的输入字段。

代码如下：

<?php
$start=1;
$end= $_POST['item']; echo'<br>';

for($start;$start<=$end;$start++){

require("connect.php");

$sql = "(SELECT * FROM drug_name)";


 $result = mysqli_query($conn, $sql);


?>
<form align="center" method="post" action="transaction.php">


        Name:
        <select align="right" name="inputname[]" onchange="showunit(this.value); showqty(this.value)"
 value="inputvalue[]">
 <option selected="selected" value="0">S/N Select drug --</option>

 <?php while($row = $result->fetch_assoc()){ ?>

 <option value='<?php echo $row['SN']; ?>'><?php     

echo$row['Drug_Item_Name']?></option> 

        <?php
}
    ?>      

        </select>



        <td  align="right">Stock Level:</td>
        <td><input type="text" name="input3[]" placeholder="Enter QTY" size="5" id="displayqty"></td>
        </tr> 


<?php       echo '<br>'; ?>

<?php }

?>   </form>

这是制作AJAX代码的代码：

     <script>
        function showqty(str) {   

            if (str == "") {
        document.getElementById("displayqty").value = "";    
                return;  `
            } else {     
                if (window.XMLHttpRequest) {




                    // code for IE7+, Firefox, Chrome, Opera, Safari
                    xmlhttp = new XMLHttpRequest();
                } else {    
                    // code for IE6, IE5
                    xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
                }
                xmlhttp.onreadystatechange = function() {
                    if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
                        document.getElementById("displayqty").value = xmlhttp.responseText;
                    }
                }
                xmlhttp.open("GET","qtydisplay.php?q2="+str,true);
                xmlhttp.send();
            }
        }  


        </script>

这是从 MySQL 数据库中获取数据的 AJAX 代码：

        <?php

        $q2 = intval($_GET['q2']);
        include("connect.php");//connection to database


        mysqli_select_db($conn,"ajax_demo");
        $sql="SELECT Qty_Stocked FROM drug_name WHERE SN = '".$q2."' LIMIT 1";
        $result = mysqli_query($conn,$sql);


        while($row = mysqli_fetch_array( $result)) {
            echo $row['Qty_Stocked'];  
        }

        mysqli_close($conn);
        ?>

Answer 1

以下是我解决此问题的方法。我已经在 cmets 中给出了所有这些信息，但是如果我以编号的方式列出它可能会有所帮助，这样它就不会产生歧义。最好避免在此处跳过项目，因为每个任务都依赖于前一个任务。

1. 首要任务是修复重复的id 属性。在你的循环中考虑这个 HTML：

   <td>
       <input type="text" name="input3[]"
              placeholder="Enter QTY" size="5" id="displayqty">
   </td>
   

   这将为您提供多个具有冲突唯一标识符的输入标签。您可以在这里使用整数，或者$row['SN'] 会这样做吗？如果该值是唯一的，您可以执行以下操作：

   <td>
       <input type="text" name="input3[]"
              placeholder="Enter QTY" size="5"
              id="displayqty_<?php echo (int) $row['SN'] ?>"
       >
   </td>
   

   （出于安全原因，我已将其强制为 int，但如果它在数据库中定义为整数，则不需要此）。

   修改代码以呈现 id 属性的唯一名称后，查看生成的 HTML 并确保其正常工作。

2. 然后您需要修改您的 JavaScript 函数，以便您可以告诉它使用什么 id。由于它目前硬连线到displayqty，它最多只会修改一个元素，这不是你想要的。尝试切换：

   function showqty(str)
   

   到这里：

   function showqty(str, id)
   

   然后，您可以在函数中使用变量 id 而不是 "displayqty"。

3. 最后要将它们连接在一起，您的更改处理程序需要传入目标id。改变这个：

   showqty(this.value)
   

   到您之前用于id 的任何字符串。例如，也许是这个？

   showqty(this.value, "displayqty_<?php echo (int) $row['SN'] ?>")
   

请记住，这未经测试，我对您的屏幕在这里的作用只有一个初步的了解。不要指望这会在没有一点调整和调试的情况下工作——如果你愿意坚持，你就会到达那里。祝你好运！