JQuery dynamic input field function not working with php foreach?

Question

Here is my html

<table class="table table-borderd table-hover">
    <thead>
        <tr>
            <th>Product Name</th>
            <th>Price</th>
            <th>Quantity</th>
            <th>Discount %</th>
            <th>Total</th>
            <th>
                <input type="button" class="btn btn-primary addmore" value="+">
            </th>
        </tr>
    </thead>
    <tbody id="itemlist2">
        <tr id="tr_1">
            <td class="prod_c">
                <select class="select-product form-control" id="itemName_1" name="product_name[]">
                     <option value=""></option>
                     <?php foreach ($product as $key ): ?>
                     <option value="<?php echo $key['product_name'] ?>">
                         <?php echo $key['product_name'] ?>
                     </option>
                     <?php endforeach; ?>
                 </select>
             </td>
             <td>   
                 <input type="text" name="price[]" id="price_1" class="price form-control" value=""  data-cell="C1">
             </td>
             <td>
                 <input type="text" data-cell="D1" name="quantity[]" id="quantity_1" class="qty form-control">
             </td>
             <td>
                 <input type="text" data-cell="E1" name="discount[]" id="discount_1" class="form-control">
             </td>
             <td>
                 <input type="text" data-cell="F1" data-formula="(C1*D1)-(C1*D1*E1/100)" name="total[]" id="total_1" class="amount form-control">
             </td> 
         </tr>
     </tbody>
 </table>

Dynamic input field jQuery function

<script>
$(".addmore").on('click',function(){
    addNewRow();
});
var addNewRow = function(id){
    html =  '<tr id="tr_'+i+'">';
    html += '<td class="prod_d"><select class="select-product form-control" name="product_name[]" id="itemName_'+i+'"><option value=""></option><?php
                        foreach ($product as $key ):
                          ?><option value="<?php echo $key['product_name']  ?>"><?php echo $key['product_name'] ?></option><?php  endforeach; ?></select></td>';
    html += '<td><input type="text" data-cell="C'+i+'" type="text" name="price[]" id="price_'+i+'" class="price form-control"></td>';
    html += '<td><input type="text" data-cell="D'+i+'" name="quantity[]" id="quantity_'+i+'" class="qty form-control"></td>';
    html += '<td><input type="text" data-cell="E'+i+'"  name="discount[]" id="discount_'+i+'" class="form-control"></td>';
    html += '<td><input type="text" data-cell="F'+i+'" data-formula="(C'+i+'*D'+i+')-(C'+i+'*D'+i+'*E'+i+'/100)" id="total_'+i+'" name="total[]" class="amount form-control"></td>';
    html += '<td><a href="#" class="remove">Remove</a></td>';
    html += '</tr>';

    $('#itemlist2').append(html);

    $form.calx('update');
    $form.calx('getCell', 'G1').setFormula('SUM(F1:F'+i+')');

    console.log(id);
    $('#price_'+i).focus();
    i++;
}

$('#itemlist2').on('click', '.remove', function(){
    $(this).parent().parent().remove();
    $form.calx('update');
    $form.calx('getCell', 'G1').calculate();
});

</scrtipt>

when i removed php foreach loop, it works but with php foreach loop does not work. I am unable to create new row.

I need to include php foreach loop to populate dynamic field. what is the best way to solve this problem.

generlly, this is really bad style. If you need to render your HTML with PHP in the backend, then do it seperately. This code mixup is the style of the last century. Not sure is someone needs this bump of code again... — alpham8
– alpham8, Commented Nov 22, 2016 at 6:08

swmcdonnell · Accepted Answer · 2016-11-22 06:00:01Z

1

There are two issues I see right away:

1) The addNewRow function takes a parameter (id), but you're not passing it a parameter when you call it; you just have addNewRow() without a parameter. You can also combine the code a little like this:

$(".addmore").click(function(id) {
   var html = ...

In the addNewRow function, you're adding i to everything, but that variable is undefined. Did you mean for it to be the id you're supposed to pass to the function?

I'm not sure if this will completely fix your issue, but it's a good start.

answered Nov 22, 2016 at 6:00

swmcdonnell

1,44111 silver badges24 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

TPLMedia24 Over a year ago

Thank you but i have solved my problem. Thank you again.

TPLMedia24 · Accepted Answer · 2016-11-22 06:06:24Z

I have just changed my jquery code and assign php foreach part on a js variable.

<script>
    $(".addmore").on('click',function(){
      addNewRow();

    });

    var ss = "<?php foreach ($product as $key ):?> <option value=\"<?php echo $key['product_name']  ?>\"><?php echo $key['product_name'] ?></option><?php  endforeach; ?>";
    var addNewRow = function(id){
        html = '<tr id="tr_'+i+'">';
        html += '<td class="prod_d"><select class="select-product form-control" name="product_name[]" id="itemName_'+i+'"><option value=""></option>' + ss + '</select></td>';
        html += '<td><input type="text" data-cell="C'+i+'" type="text" name="price[]" id="price_'+i+'" class="price form-control"></td>';
        html += ' <td><input type="text" data-cell="D'+i+'" name="quantity[]" id="quantity_'+i+'" class="qty form-control"></td>';
        html += '<td><input type="text" data-cell="E'+i+'"  name="discount[]" id="discount_'+i+'" class="form-control"></td>';
        html += '<td><input type="text" data-cell="F'+i+'" data-formula="(C'+i+'*D'+i+')-(C'+i+'*D'+i+'*E'+i+'/100)" id="total_'+i+'" name="total[]" class="amount form-control"></td>';
        html += '<td><a href="#" class="remove">Remove</a></td>';
        html += '</tr>';

        $('#itemlist2').append(html);

                    $form.calx('update');
                    $form.calx('getCell', 'G1').setFormula('SUM(F1:F'+i+')');

      console.log(id);
      $('#price_'+i).focus();
      i++;
    }
         $('#itemlist2').on('click', '.remove', function(){
                    $(this).parent().parent().remove();
                    $form.calx('update');
                    $form.calx('getCell', 'G1').calculate();
                });

    </script>

Collectives™ on Stack Overflow

JQuery dynamic input field function not working with php foreach?

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related