CODEWITHSUNDEEP
javascriptphpjquerymysqlforeach
TPLMedia24
TPLMedia24

Reputation: 45

JQuery dynamic input field function not working with php foreach?

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.

Upvotes: 0

Views: 252

Answers (2)

TPLMedia24
TPLMedia24

Reputation: 45

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>

Upvotes: 0

swmcdonnell
swmcdonnell

Reputation: 1421

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 = ...
  1. 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.

Upvotes: 1

Related Questions