CODEWITHSUNDEEP
javascriptphphtmlforms
Anagh
Anagh

Reputation: 383

Adding a dropdown from database in a form

My questions are in the end of this referred as MY PROBLEMS. Please read the questions before you try to go through all the things I have written, so that I don't waste so much of your time.

I have a form where I need to enter certain values as

ITEM | QUANTITY | PRICE | DISCOUNT | TOTAL

Item 1 | 1 | 100 | 05 | 95

Item 2 | 4 | 250 | 10 | 900

Add more

Total : 995

The script I use to have the 'Add more' functionality is the following

<script>
 $(document).ready(function() {
 var InputsWrapper = $("#InputsWrapper");
 var AddButton = $("#AddMoreFileBox");
 var x = InputsWrapper.length;
 var FieldCount = 1;
    $(AddButton).click(function(e){
                FieldCount++;
                $(InputsWrapper).append('<tr><td><input class="item" type="text" name="item[]"></td><td><input class="qty" type="number" name="qty[]"></td><td><input class="price" type="number" name="price[]"></td><td><input class="discount" type="number" name="discount[]">%</td><td><input class="total" type="number" name="total[]" readonly ></td></tr>');
                x++;
                return false;
            });
 });
</script>

The following is the form I have.

<table id="InputsWrapper">
            <tr>
            <span class="small"><a href="#" id="AddMoreFileBox" class="btn btn-info">Add More Field</a></span></tr>
                        <tr>
                            <td><label for='item'>Item:</label></td><td><label for='qty'>Quantity:</label></td><td><label for='price'>Price:</label></td><td><label for='discount'>Discount</label></td><td><label for='vat'>VAT</label></td><td><label for='total'>Final Price:</label></td>
                        </tr>
                        <tr>
                            <td><input class='item' type='text'  name='item[]'></td>
                            <td><input class='qty' type='number' name='qty[]'></td>
                            <td><input class='price' type='number' name='price[]'></td>
                            <td><input class='discount' type='number'  name='discount[]'>%</td>
                            <td><input class='total' type='number' name='total[]' readonly></td>
                        </tr>
                        <tr>
                            <td><input id='totaldp' type='number' name='totaldp' readonly</td>
                        </tr>
</table>

Now, I need to have an extra field called tax, which will be fetched using a drop down populated from a database with tax values. I need this tax value also to be displayed against each item as a dropdown

ITEM | QUANTITY | PRICE | DISCOUNT | TAX | TOTAL

This is the code I use to make the dropdown in the form

<td>
  <?php 
     $query = mysqli_query($con, "SELECT * FROM `tax`");
     echo '<select name="vat" class="vat">';

     while ($row = mysqli_fetch_array($query)) {
     echo '<option value="' . $row['tax_rate'] . '">' . $row['tax'] . '</option></br>';
     }

     echo '</select>';
  ?>
</td>

And in the script, I add class="vat" type="number" name="vat[]"

MY PROBLEMS:

  1. Doing this way, I get the dropdown only once. Clicking the 'add more' field gives only an empty dropdown.
  2. If anyone could help, let me know how.
  3. I think this is very inefficient and stupid way of doing it, so if there is a better way, please let me know.

Upvotes: 1

Views: 147

Answers (1)

shaxaaa
shaxaaa

Reputation: 151

Please share how do you add the select to the append code. It seems that you are making something wrong there.

So i would recommend you this first the html and php:

<table id="InputsWrapper">
        <tr>
        <span class="small"><a onclick="addRow();" id="AddMoreFileBox" class="btn btn-info">Add More Field</a></span></tr>
                    <tr>
                        <td><label for='item'>Item:</label></td><td><label for='qty'>Quantity:</label></td><td><label for='price'>Price:</label></td><td><label for='discount'>Discount</label></td><td><label for='vat'>VAT</label></td><td><label for='total'>Final Price:</label></td>
                    </tr>
                    <tr>
                        <td><input class='item' type='text'  name='item[]'></td>
                        <td><input class='qty' type='number' name='qty[]'></td>
                        <td><input class='price' type='number' name='price[]'></td>
                        <td><input class='discount' type='number'  name='discount[]'>%</td>
<td>
  <?php 
 $query = mysqli_query($con, "SELECT * FROM `tax`");
 echo '<select name="vat" class="vat">';

 while ($row = mysqli_fetch_array($query)) {
 echo '<option value="' . $row['tax_rate'] . '">' . $row['tax'] . '</option></br>';
 }

 echo '</select>';
  ?>
</td>
                        <td><input class='total' type='number' name='total[]' readonly></td>
                    </tr>
                    <tr>
                        <td><input id='totaldp' type='number' name='totaldp' readonly</td>
                    </tr>

Note that for the "Add more button" i use a javascript function:

<script type="text/javascript"><!--
var module_row = <?php echo $module_row; ?>;

function addRow() { 
html = '<tr>';
html+= '<td><input class='item' type='text'  name='item[]'></td>';
                        html+= '<td><input class='qty' type='number' name='qty[]'></td>';
                        html+= '<td><input class='price' type='number' name='price[]'></td>';
                        html+= '<td><input class='discount' type='number'  name='discount[]'>%</td>';
<?php $query = mysqli_query($con, "SELECT * FROM `tax`"); ?>
html += '<select name="vat" class="vat">';
<?php while ($row = mysqli_fetch_array($query)) { ?>

html += '<option value="<?php echo $row['tax_rate']; ?>">';
html += $row['tax'];
html += '</option></br>';
<?php } ?>

html += '</select>';
                        html+= '<td><input class='total' type='number' name='total[]' readonly></td>';
                    html+= '</tr>';
module_row++;

 $(InputsWrapper).append(html);
}
//--></script>

I am very sorry for the code format and that there is no code check, but i am in work and have no time. If you can remove the js and code mistakes i did, it should work fine. If not i can make you a better solution when i am back home.

Upvotes: 1

Related Questions