Autopopulating a dynamically generated form

Question

I built a form that can select data from MySQL database and the desired field of the selected row will be displayed in an input field of a form. However, this form is dynamic in the sense that you can have multiple forms of the same form.

If two or more forms are generated, only the first form is auto populated. I want each form to auto-populate their corresponding input field upon selection of a row from the database.

Here is the code:

<?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>

This is the code to make the AJAX code:

     <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>

This is the AJAX code to fetch data from MySQL database:

        <?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

Here's how I'd resolve this. I've given all this information in comments already, but perhaps it will help if I list it in a numbered fashion, so that it is unambiguous. It is probably best to avoid skipping items here, since each task relies on the previous one.

1. The first task is to fix your duplicate id attributes. Consider this HTML inside your loop:

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

   That will give you multiple input tags with conflicting unique identifiers. You could use an integer here, or would $row['SN'] do it? If that value is unique, you could do something like this:

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

   (I have forced it to an int for security reasons, but if it is defined as an integer in the database, you don't need this).

   Once you have modified your code to render unique names for your id attributes, view your generated HTML and make sure it works.

2. You then need to modify your JavaScript function so that you can tell it what id to use. Since it is hardwired presently to displayqty it will only modify one element at most, which is not what you want. Try switching this:

   function showqty(str)
   

   to this:

   function showqty(str, id)
   

   You can then use the variable id instead of "displayqty" in your function.

3. Finally to wire it all together, your change handler needs to pass in the target id. Change this:

   showqty(this.value)
   

   to whatever string you used for id before. For example, maybe this?

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

Bear in mind that this is not tested, and I only have a passing idea of what your screen is doing here. Do not expect this to work without a little bit of tweaking and debugging your end - if you are willing to persist, you will get there. Good luck!