Jump to content

Dynamic dropdown within jquery function


Go to solution Solved by DulongC,

Recommended Posts

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 by dishadcruze
Link to post
Share on other sites

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>";
Link to post
Share on other sites

@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

post-203240-0-07802600-1495285996_thumb.png

Edited by dishadcruze
Link to post
Share on other sites

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>";
Link to post
Share on other sites

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?

Link to post
Share on other sites

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.

Link to post
Share on other sites

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.

Link to post
Share on other sites

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>";
Link to post
Share on other sites

@ 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 post-203240-0-56173600-1495356289_thumb.png

 

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 post-203240-0-78551200-1495356425_thumb.png

 

But in both the cases javascript dropdown is displays just like this  post-203240-0-05996700-1495356507_thumb.png

 

 

 

 

 

 

 

 

 

Link to post
Share on other sites
  • Solution

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>";
  • Like 1
Link to post
Share on other sites
This thread is more than a year old.

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.