Genereting 'n' html inputs based on database variable

Question

My intention is to create a form in HTML where the user could register some quality features of a product. The number of features to be registered varies according to the model, this info is registered on a table in SQL.

So far I manage to generate the inputs, but it is very fast, the user cannot fill all the inputs.


## query to get the product information from database ## 

$query_list = "SELECT * FROM data_products";
$result_list = mysqli_query($conn, $query_list);

## get the number of rows
$query_data_rows = mysqli_query($conn, $query_list);
$data_rows = mysqli_fetch_array($query_data_rows);
?>

## here is the first form, where the user selects the product model, 
## therefore it should query the number of raws (n) registered on the table

<div class="container">
    <form action="" method="post" onsubmit="getdata()">
        <select name="select1">
            <option value=" "> </option>
            <?php
                while ($row = mysqli_fetch_array($result_list)) {
                echo "<option value='" . $row['customer_Id'] . "'>" . $row['customer_Id'] . "</option>";
                }
            ?>
        </select>
        <input type="submit" name="submit" value="Go"/>
    </form>
</div>

## here my intention is to return the (n) number of input fields
## it correctly displays the number of input fields, but it is very fast
## I am missing something here

<?php 

if(isset($_POST['select1'])){ ?>
<form id="form" action="" method="post">
    <input type="submit">
</form>

<?php       
}
?>

## I am almost zero skilled on Javascript, 
## but browsing on the world web wide and reading the documentation of the language 
## I got the code below.  

<script>    
    function getdata() {
        var no = <?php echo $data_rows['number'] ;?>;
        for(var i=0;i<no;i++) {
            var textfield = document.createElement("input");
            textfield.type = "text";
            textfield.value = "";
            textfield.name = i+1 + "a"
            textfield.placeholder = i+1
            document.getElementById('form').appendChild(textfield);
        }
    }
</script> ```

Of course, because your form _submits_, and your JavaScript submit handler does not _prevent_ this default action. — CBroe, Aug 24 '20 at 14:54
But there’s more stuff here that does not make sense, like `var no = `, here you appear to be outputting the value for the _first_ product record you read from the database all the time, there does not seem to be any limitation of this to any _selected_ product. — CBroe, Aug 24 '20 at 14:56
All in all, to me this reads like another case of missing basics, I think you should probably go and have a good, thorough read of https://stackoverflow.com/questions/13840429/what-is-the-difference-between-client-side-and-server-side-programming first of all. — CBroe, Aug 24 '20 at 14:56
Does this answer your question? [What is the difference between client-side and server-side programming?](https://stackoverflow.com/questions/13840429/what-is-the-difference-between-client-side-and-server-side-programming) — rahul rai, Aug 25 '20 at 07:21

score 0 · Accepted Answer · answered Aug 24 '20 at 17:41

Here what actually happening is that when you are submitting the form getdata() function is called till the it get submitted, after submission is done the content called by function disappears, in order to avoid this use return false statement at the end of the function.

<div class="container">
<form action="" id="form_id" method="post" onsubmit="return getdata()">
    <select name="select1">
        <option value=" "> </option>
        <?php
            //accesing the database table
            $query_list = "SELECT * FROM `data_products`";
            $result = mysqli_query($conn, $query_list);
            //to get rows
            $data_rows = mysqli_num_rows($result);
            echo $data_rows;
            while ($row = mysqli_fetch_array($result)) {
            echo "<option value='" . $row['srno'] . "'>" . $row['srno'] . "</option>";
            }
        ?>
    </select>
    <input type="submit" name="submit" value="go"/>
</form></div>
<?php 
    if($_SERVER['REQUEST_METHOD'] == 'POST' ){
        echo '<form id="form" action="" method="post">
        <input type="submit">
        </form>';
    }
?>      

<script>    
    function getdata() {
        var no = <?php echo $data_rows;?>;
        for(var i=0;i<no;i++) {
            
            var btn = document.createElement("INPUT");
            btn.type = "text";
            btn.value = "";
            btn.name = i+1 + "a"
            btn.placeholder = i+1
            document.getElementById('form').appendChild(btn);
        }
        return false;
    }
    
</script>

This is working. Here I have made some changes in your code like replacing 'textfield' with 'btn', 'customerid' with 'srno' (for easy understanding) and avoid using php again and again.

Your post helped me in the way to find the solution. I meant I wanted the number of inputs based on the info registered for each product, I just had to do a slightly change and it worked fine. — Henrique de Oliveira, Aug 26 '20 at 15:26
the only little problem now is that the inputs are just appearing after clicking twice on the 'go' button. — Henrique de Oliveira, Aug 26 '20 at 15:34

Genereting 'n' html inputs based on database variable

1 Answers1