Dynamic dropdown within jquery function

[dishadcruze]

Hi,

 

This is the extending thread of https://forums.phpfreaks.com/topic/303946-auto-calculation-not-happening-for-dynamic-rows/.

 

I want to add dropdown for tax , instead of textbox.

 

Here is my code (php, html)

 <td><select name="tax[]" class="form-control tax" id="tax_1">
                                <option value="">Select Tax</option>
                                <?php $s1 = mysqli_query($con, "select * from taxes"); while($s2 = mysqli_fetch_array($s1)) { ?>
                                <option value="<?php echo $s2['rate']; ?>"><?php echo $s2['name']; ?></option> <?php } ?> 
                                </select>
                               </td> 

I am not getting how to add this in my script here, without affecting other functionalities of the code.

   var data = "<tr><td><input type='checkbox' class='case'/></td><td><span id='snum" + i + "'>" + count + ".</span></td";
    data += "<td><input class='form-control' type='text' id='productcode_" + i + "' name='productcode[]'/></td> <td><input class='form-control' type='text' id='description_" + i + "' name='description[]'/></td><td><input class='form-control' type='text' id='uom_" + i + "' name='uom[]'/></td><td><input class='form-control price' type='text' id='price_" + i + "' name='price[]'/></td><td><input class='form-control tax' type='text' id='tax_" + i + "' name='tax[]'/></td><td><input class='form-control quantity' type='text' id='quantity_" + i + "' name='quantity[]'/></td><td><input class='form-control discount' type='text' id='discount_" + i + "' name='discount[]'/></td><td><input class='form-control amount' type='text' id='amount_" + i + "' name='amount[]'/></td><td><input class='form-control tamount' type='text' id='tamount_" + i + "' name='tamount[]'/></td></tr>";

Can someone suggest me please? Here is jsFiddle:  https://jsfiddle.net/cwmoo4hm/1/

Edited May 20, 2017 by dishadcruze

[DulongC]

I would store your options in a variable, then you only have to call the DB query once.

 

<?php
  $s1 = mysqli_query($con, "select * from taxes"); 

  $options = '';

  while($s2 = mysqli_fetch_array($s1)) { 

    $options .= "<option value='" . $s2['rate'] . "'>" . $s2['name'] . "</option>";
  }
 
?>

Then just modify your JS to show the drop down instead

 

   var data = "<tr><td><input type='checkbox' class='case'/></td><td><span id='snum" + i + "'>" + count + ".</span></td";
    data += "<td><input class='form-control' type='text' id='productcode_" + i + "' name='productcode[]'/></td> <td><input class='form-control' type='text' id='description_" + i + "' name='description[]'/></td><td><input class='form-control' type='text' id='uom_" + i + "' name='uom[]'/></td><td><input class='form-control price' type='text' id='price_" + i + "' name='price[]'/></td><td><select class='form-control tax' id='tax_" + i + "' name='tax[]'/><option value=''>Select Tax</option><?= $options; ?></td><td><input class='form-control quantity' type='text' id='quantity_" + i + "' name='quantity[]'/></td><td><input class='form-control discount' type='text' id='discount_" + i + "' name='discount[]'/></td><td><input class='form-control amount' type='text' id='amount_" + i + "' name='amount[]'/></td><td><input class='form-control tamount' type='text' id='tamount_" + i + "' name='tamount[]'/></td></tr>";

[dishadcruze]

@DulongC : Thanks for the reply.

 

But the value is not passing properly to the script. As i am naive in jquery and scripts, i cant make out how what exactly to be done.

 

Here is what i am getting when i do inspect element

Edited May 20, 2017 by dishadcruze

[DulongC]

Sorry, you don't have short tags enabled. Try this instead:

 

var data = "<tr><td><input type='checkbox' class='case'/></td><td><span id='snum" + i + "'>" + count + ".</span></td";data += "<td><input class='form-control' type='text' id='productcode_" + i + "' name='productcode[]'/></td> <td><input class='form-control' type='text' id='description_" + i + "' name='description[]'/></td><td><input class='form-control' type='text' id='uom_" + i + "' name='uom[]'/></td><td><input class='form-control price' type='text' id='price_" + i + "' name='price[]'/></td><td><select class='form-control tax' id='tax_" + i + "' name='tax[]'/><option value=''>Select Tax</option><?php echo $options; ?></td><td><input class='form-control quantity' type='text' id='quantity_" + i + "' name='quantity[]'/></td><td><input class='form-control discount' type='text' id='discount_" + i + "' name='discount[]'/></td><td><input class='form-control amount' type='text' id='amount_" + i + "' name='amount[]'/></td><td><input class='form-control tamount' type='text' id='tamount_" + i + "' name='tamount[]'/></td></tr>";

[dishadcruze]

No, not working!.

 

Actually, 

<?php $s1 = mysqli_query($con, "select * from taxes"); $options = ''; while($s2 = mysqli_fetch_array($s1)) {
                                $options .= "<option value='" . $s2['rate'] . "'>" .$s2['name'] . "</option>";   } ?>

this itself is not displaying any dropdown values. Do i need to put echo?

[DulongC]

I made a couple small changes...

 

<?php
$s1 = mysqli_query($con, "select * from taxes");

$options = '';

while($s2 = mysqli_fetch_array($s1)) {

$options .= "<option value='" . $s2['rate'] . "'>" . $s2['name'] . "</option>";
}

?>

And

 

var data = "<tr><td><input type='checkbox' class='case'/></td><td><span id='snum" + i + "'>" + count + ".</span></td";data += "<td><input class='form-control' type='text' id='productcode_" + i + "' name='productcode[]'/></td> <td><input class='form-control' type='text' id='description_" + i + "' name='description[]'/></td><td><input class='form-control' type='text' id='uom_" + i + "' name='uom[]'/></td><td><input class='form-control price' type='text' id='price_" + i + "' name='price[]'/></td><td><select class='form-control tax' id='tax_" + i + "' name='tax[]'><option value=''>Select Tax</option><?= $options; ?></select></td><td><input class='form-control quantity' type='text' id='quantity_" + i + "' name='quantity[]'/></td><td><input class='form-control discount' type='text' id='discount_" + i + "' name='discount[]'/></td><td><input class='form-control amount' type='text' id='amount_" + i + "' name='amount[]'/></td><td><input class='form-control tamount' type='text' id='tamount_" + i + "' name='tamount[]'/></td></tr>";

JS Fiddle of the above (minus PHP): https://jsfiddle.net/u490wv5o/

 

If it's still not working, then the issue is with your DB query.

[mac_gyver]

this is slightly off topic, but doing the following will GREATLY simplify your javascript code, making it easy to create both the 1st set of form fields and any dynamically added ones, and to fix or change any coding (your - remove row code doesn't work now.), because the markup will only exist once.

 

see this post and the thread it is in - https://forums.phpfreaks.com/topic/298777-dynamic-for-additions/?hl=%2Btemplate&do=findComment&comment=1524053

 

this 'template' method will allow you to produce the html markup for the first set of fields only. the dynamic add will simply append a copy of that first set of fields. you would not use the numerically index ids when using this method. the linked to post also shows working remove row functionality.

 

once you make this change, you will only need to produce and output the tax select/option menu in the 1st set of form fields and the simplified and general purpose add/remove javascript will take care of the rest.

 

populating the dynamically added field values in the ajax code will require some rework, since you won't have the numerically indexed ids.

[DulongC]

Forogt to change this back to long form echo and it's too late for me to edit my post above.

 

var data = "<tr><td><input type='checkbox' class='case'/></td><td><span id='snum" + i + "'>" + count + ".</span></td";data += "<td><input class='form-control' type='text' id='productcode_" + i + "' name='productcode[]'/></td> <td><input class='form-control' type='text' id='description_" + i + "' name='description[]'/></td><td><input class='form-control' type='text' id='uom_" + i + "' name='uom[]'/></td><td><input class='form-control price' type='text' id='price_" + i + "' name='price[]'/></td><td><select class='form-control tax' id='tax_" + i + "' name='tax[]'><option value=''>Select Tax</option><?php echo $options; ?></select></td><td><input class='form-control quantity' type='text' id='quantity_" + i + "' name='quantity[]'/></td><td><input class='form-control discount' type='text' id='discount_" + i + "' name='discount[]'/></td><td><input class='form-control amount' type='text' id='amount_" + i + "' name='amount[]'/></td><td><input class='form-control tamount' type='text' id='tamount_" + i + "' name='tamount[]'/></td></tr>";

[dishadcruze]

@ DulongC :

 

if i do

<?php
$s1 = mysqli_query($con, "select * from taxes");

$options = '';

while($s2 = mysqli_fetch_array($s1)) {

$options .= "<option value='" . $s2['rate'] . "'>" . $s2['name'] . "</option>";
}

?>

I get blank values in the 1st row i mean here also

 

But if i do like this

 <?php $s1 = mysqli_query($con, "select * from taxes"); $options .= ''; while($s2 = mysqli_fetch_array($s1)) { 
                                $options = "<option value='". $s2['rate'] . "'>" .$s2['name'] . "</option>";   
								echo $options;
								} ?> 

I get dropdown like this

 

But in both the cases javascript dropdown is displays just like this 

 

 

 

 

 

 

 

 

 

[DulongC]

Is your JavaScript being included inline or is it in a separate .js file?

[dishadcruze]

in seperate .js file

[DulongC]

Okay, that's what is causing your issue then. a JS file cannot parse PHP, you will have to load the PHP variable into a JS variable to pass it to the JS file.

 

i.e.

<?php
$s1 = mysqli_query($con, "select * from taxes");

$options = '';

while($s2 = mysqli_fetch_array($s1)) {

$options .= "<option value='" . $s2['rate'] . "'>" . $s2['name'] . "</option>";
}

?>

<script type="text/javascript">
  var options = "<?= $options; ?>";
</script>

<script type="text/javascript" src="myScript.js"></script>

then in your JS file

 

var data = "<tr><td><input type='checkbox' class='case'/></td><td><span id='snum" + i + "'>" + count + ".</span></td";data += "<td><input class='form-control' type='text' id='productcode_" + i + "' name='productcode[]'/></td> <td><input class='form-control' type='text' id='description_" + i + "' name='description[]'/></td><td><input class='form-control' type='text' id='uom_" + i + "' name='uom[]'/></td><td><input class='form-control price' type='text' id='price_" + i + "' name='price[]'/></td><td><select class='form-control tax' id='tax_" + i + "' name='tax[]'><option value=''>Select Tax</option>" + options + "</select></td><td><input class='form-control quantity' type='text' id='quantity_" + i + "' name='quantity[]'/></td><td><input class='form-control discount' type='text' id='discount_" + i + "' name='discount[]'/></td><td><input class='form-control amount' type='text' id='amount_" + i + "' name='amount[]'/></td><td><input class='form-control tamount' type='text' id='tamount_" + i + "' name='tamount[]'/></td></tr>";

[dishadcruze]

@DulongC :

 

Thanks a ton for your patience in understanding and resolving my problem step by step. Thank you very much.