dynamic calculation of input fields using php javascript

Question

I have an form in which I need to add dynamic field. the code to form of codeigniter is below

<?php echo form_open('admin/sales/create' , array('class' => 'form-horizontal form-groups-bordered validate','target'=>'_top'));?>
                        <div class="form-group">
                                <div class="col-sm-2">
                                <label>Date</label>
                                    <input type="text" class="datepicker form-control" name="date" data-validation="date" data-validation-format="mm/dd/yyyy"/>
                                </div>
                                <div class="col-sm-2">
                                <label>Invoice No.</label>
                                    <input type="text" class="form-control" name="invoice" data-validation="required" data-validation-error-msg="Required Field"/>
                                </div>
                                <div class="col-sm-3">
                                <label>Customer Name</label>
                                    <input type="text" class="form-control" name="cname" value="Cash" data-validation="required" data-validation-error-msg="Required Field"/>
                                </div>
                                <div class="col-sm-2">
                                <label>Payment Received</label>
                                    <input type="text" class="form-control" name="pay" data-validation="required" data-validation-error-msg="Required Field"/>
                                </div>
                                </div>
                            <div id="row0" class="form-group rows">
                                <div class="col-sm-4">
                                <label>Product Name</label>
                                <select name="pname[]" class="form-control">
                                        <?php 
                                        $this->db->order_by('name','asc');
                                        $students = $this->db->get('product')->result_array();
                                        foreach($students as $row):
                                        ?>
                                        <?php $qnty=$this->crud_model->count_products($row['prod_id']);?>
                                            <option value="<?php echo $row['prod_id'];?>" <?php if($qnty==0) echo 'disabled'; ?> >
                                                <?php echo ucwords($row['name']);?> 
                                                (Available Qnty = <?php echo $this->crud_model->count_products($row['prod_id']);?>)
                                                (Average Price = <?php echo $this->crud_model->avg_price($row['prod_id']);?>)

                                            </option>
                                        <?php
                                        endforeach;
                                        ?>
                                    </select>
                                </div>
                                <div class="col-sm-4">
                                <label>Quantity (Should be less than Available Qnty)</label>
                                <input type="text" class="form-control" name="qnty[]"  data-validation="required" data-validation-error-msg="Required Field" />
                                </div>
                                <div class="col-sm-2">
                                <label>Price / Unit</label>
                                <input type="text" class="form-control" name="price[]"  data-validation="required" data-validation-error-msg="Required Field" />
                                </div>
                                <div class="col-sm-2">
                                <label>Subtotal</label>
                                <input type="text" class="form-control" name="tot[]"  data-validation="required" data-validation-error-msg="Required Field" />
                                </div>

                            </div>

                            <a href="javascript:" onclick="hello();">Add Row</a>
                                <div class="form-group">
                              <div class="col-sm-6">
                                  <button type="submit" class="btn btn-primary">Add Invoice</button>
                              </div>
                                </div>
                        </form>

when click on Add row, It will clone the div with having row0. Now I need to calculate the field of these rows. My formula is

Qnty          Price           Subtotal
5             10               50
7             12                84

Grand total    134 (total of all subtotal)

I used below function to clone the row

function hello()
{
$("#row0").clone().insertAfter("div.rows:last");
var list = document.getElementsByClassName("rows");
  for (var i = 1; i < list.length; i++) {
   list[i].setAttribute("id", "row" + i);
  }
}

Thanks for any suggestion using ajax or any method.

Is your cloning function already working ? If so, please, show us. — AdrienXL
– AdrienXL, Commented Feb 13, 2015 at 22:12

Pang · Accepted Answer · 2017-09-18 01:23:49Z

PHP code

<?php echo form_open('admin/sales/create' , array('class' => 'form-horizontal form-groups-bordered validate','target'=>'_top'));?>
                        <div class="form-group">
                                <div class="col-sm-2">
                                <label>Date</label>
                                    <input type="text" class="datepicker form-control" name="date" data-validation="date" data-validation-format="mm/dd/yyyy"/>
                                </div>
                                <div class="col-sm-2">

                                <label>Invoice No.</label>
                                    <input type="text" readonly class="form-control" value="<?php echo $this->crud_model->generate_invoice_number();?>" name="invoice" data-validation="required" data-validation-error-msg="Required Field"/>
                                </div>
                                <div class="col-sm-3">
                                <label>Customer Name</label>
                                    <input type="text" class="form-control" name="cname" value="Cash" data-validation="required" data-validation-error-msg="Required Field"/>
                                </div>
                                </div>
                                <div class="table-responsive">
              <table id="table-data" class="table table-bordered">
                <thead>
                  <tr class="table_header">
                    <th>Product</th>
                    <th>Quantity</i></th>
                    <th class="text-right">Unit Price</th>
                    <th class="text-right">Sub-total <br/> (Tax Excl.)</th>
                    <th>&nbsp;</th>
                  </tr>
                </thead>
                <tbody>
                  <tr id="new_item tr_clone">
                    <input type="hidden" name="invoice_id" value="" id="invoice_id">
                    <input type="hidden" name="item_id" value="">
                    <td style="width:40%"> <select id="pname.0" name="pname[]" class="form-control">
                                        <?php 
                                        $this->db->order_by('name','asc');
                                        $students = $this->db->get('product')->result_array();
                                        foreach($students as $row):
                                        ?>
                                        <?php $qnty=$this->crud_model->count_products($row['prod_id']);?>
                                            <option value="<?php echo $row['prod_id'];?>" <?php if($qnty==0) echo 'disabled'; ?> >
                                                <?php echo ucwords($row['name']);?> 
                                                (Available Qnty = <?php echo $this->crud_model->count_products($row['prod_id']);?>)
                                                (Average Price = <?php echo $this->crud_model->avg_price($row['prod_id']);?>)

                                            </option>
                                        <?php
                                        endforeach;
                                        ?>
                                    </select></td>
                    <td style="width:10%"><input class="form-control" onchange="javascript:calc();" id="item_quantity.0" name="item_quantity" value=""/></td>
                    <td class="text-right" style="width:10%"><input class="form-control text-right" onchange="javascript:calc();" id="item_price.0" name="item_price" value=""/></td>

                    <td class="text-right" style="width:10%"><input class="form-control text-right" id="subtot.0" readonly name="item_sub_total" value=""/></td>
                    <td style="width:10%;"><input type="button" name="add" value="Add" class="addButton"><input type="button" name="remove" value="Remove" class="removebutton"></td>
                  </tr>
                </table>

                  <table class="table table-bordered">
                                  <tr class="text-right" id="invoice_total_row">
                    <td colspan="6" class="no-border">Sub Total:</td>
                    <td style="width:12%;" ><label><span id="items_total_cost"></span></label></td>
                 </tr>
                <tr class="text-right">
                    <td colspan="6" class="no-border" style="vertical-align: middle">Paid Amount</td>
                    <td  style="width:10%;" >


                        <input type="text" class="form-control text-right invoice_grand_total" name="invoice_discount_amount" onchange="javascript: calt();"  id="paid"/>

                    </td>
                  </tr>
                  <tr class="text-right">
                    <td colspan="6" class="no-border "> Total Amount Due : </td>
                    <td class="invoice_amount_due"><label><span id="amount_due"></span></label></td>
                  </tr>
                </tbody>
              </table>


            </div>

                                <div class="form-group">
                              <div class="col-sm-6">
                                  <button type="submit" class="btn btn-primary">Add Invoice</button>
                              </div>
                                </div>
                        </form>

JavaScript code -> You can paste this the on same page as your PHP page

<script>
$(function(){
    $("#table-data").on('click', 'input.addButton', function() {
        var $tr = $(this).closest('tr');
        var allTrs = $tr.closest('table').find('tr');
        var lastTr = allTrs[allTrs.length-1];
        var $clone = $(lastTr).clone();
        $clone.find('td').each(function(){
            var el = $(this).find(':first-child');
            var id = el.attr('id') || null;
            if(id) {
                var i = id.substr(id.length-1);
                var prefix = id.substr(0, (id.length-1));
                el.attr('id', prefix+(+i+1));
                el.attr('name', prefix+(+i+1));
            }
        });
        $clone.find('input:text').val('');
        $tr.closest('table').append($clone);
    });

    $("#table-data").on('change', 'select', function(){
        var val = $(this).val();
        $(this).closest('tr').find('input:text').val(val);
    });
});
 $(document).on('click', 'input.removebutton', function () {
     $(this).closest('tr').remove();
     return false;
 });
</script>
<script>
function calc()
{
var total=0;
for( var i = 0; i < 30; i++ ) {
    var qnty = document.getElementById("item_quantity." + i).value;
    var price = document.getElementById("item_price." + i).value;
        document.getElementById("subtot." + i).value=(qnty*price);
        var subtot=(qnty*price);
        total=total+subtot;
        document.getElementById("items_total_cost").innerHTML=total;
}
}
function calt()
{
    var total=document.getElementById("items_total_cost").innerHTML;
    var paid=document.getElementById("paid").value;
    ftotal=total-paid;
    document.getElementById("amount_due").innerHTML='<i class="fa fa-inr" style="padding-right:5px;"></i>'+ftotal;
}
</script>

Collectives™ on Stack Overflow

dynamic calculation of input fields using php javascript

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related