patternjavascriptMinor

Script for adding a set of form fields on clicking an Add More button

Submitted by: @import:stackexchange-codereview·Mar 10, 2026·

Viewed 0 times

scriptfieldsclickingmoreaddingforbuttonformsetadd

Problem

This is a script that I use to add a set of form fields on clicking an Add More button:


        $(document).ready(function() {

            var InputsWrapper = $("#InputsWrapper");
            var AddButton = $("#AddMoreFileBox");
            var x = InputsWrapper.length;
            var FieldCount = 1;
            $(AddButton).click(function(e)//on add input button click
            {

                FieldCount++;
                $(InputsWrapper).append(' Select Vat"';while ($row = mysqli_fetch_array($query)) {echo '' . $row['vat_description'] . '';}echo '';?>');
                x++;
                return false;
            });
        });

This is the form:


                
                    Add More Field
                
                
                    Item:Quantity:Price:Discount %VAT %:Final Price:
                
                
                    
                    
                    
                    
                    Select Vat"';while ($row = mysqli_fetch_array($query)) {echo '' . $row['vat_description'] . '';}echo '';?>
                    
                
            
            Total :

In the form, there is a dropdown box which fetch certain details from the database. The PHP code to fetch and display the dropdown box is coded in the form so that it is displayed on the initial load of the page, and then, the same code is coded in the append function the script so that the same set of input fields are displayed on clicking the Add More button.

The whole thing works perfectly fine. But the code looks terribly ugly. Is there a better way to do it?

Solution

Put the php code outside the form, run it once and create a variable with the options, something like:

$dropDownList = 'Select Vat';

$query = mysqli_query($con, "SELECT * FROM `tax_vat` "); 
while ($row = mysqli_fetch_array($query)) 
{
$dropDownList .= '' . $row['vat_description'] . '';
}

$dropDownList .= '';

Now, in your form you just need to `` where you want the drop down to appear.

For your javascript you could do something like this:

var dropOption = "";

And modify the append() html data like this:

$(InputsWrapper).append(''+dropOption+'');

Hope this helps.

Code Snippets

$dropDownList = '<select name="vat" id="find" data-required="true"><option value="">Select Vat</option>';

$query = mysqli_query($con, "SELECT * FROM `tax_vat` "); 
while ($row = mysqli_fetch_array($query)) 
{
$dropDownList .= '<option value="' . $row['vat_rate'] . '">' . $row['vat_description'] . '</option>';
}

$dropDownList .= '</select>';

var dropOption = "<?php echo $dropDownList?>";

$(InputsWrapper).append('<tr><td><input id="find" type="text" name="item[]"></td><td><input id="find" type="number" name="qty[]"></td><td><input id="find" type="number" name="price[]"></td><td><input id="find" type="number" name="discount[]"></td><td>'+dropOption+'</td><td><input id="find" type="number" name="total[]" readonly ></td></tr>');

Context

StackExchange Code Review Q#54477, answer score: 2

Revisions (0)

No revisions yet.