Vladimir Mrksic
Vladimir Mrksic

Reputation: 1

how to sum dynamically Add Input Fields?

I have a problem, For now, I can count the sum of static html fields.I want to count the sum of each new dynamic fileds.The photo shows the first row is static and properly account the sum. This is a concrete deployment example other fields are added dynamically, and the first field is static. http://postimg.org/image/ivjbblo1p/ My question is, how to write code that the dynamic fields automatically calculate the sum?

$(document).ready(function(){
    var counter = 0;
    $('.fee').keyup(function(){
        //iterate through each textboxes and add keyup
        //handler to trigger sum event
        var tax = (parseFloat($('.quantity_1').val()) * (parseFloat($('.priceperunit_1').val())) * (0.20));
        var neto = (parseFloat($('.quantity_1').val()) * (parseFloat($('.priceperunit_1').val())));
        var total = tax + (parseFloat($('.quantity_1').val()) * (parseFloat($('.priceperunit_1').val())));
        // var total = (parseFloat($('.quantity_1').val()) * (parseFloat($('.priceperunit_1').val())));
        counter += 1;       

        $('.fee').each(function(){
            var item = parseFloat($(this).val());
            if (isNaN(item)) { item = 0; }
            total = total;          
            tax = tax;
            neto = neto;
        });

        $('.tax_1').val(tax.toFixed(2));
        $('.neto_1').val(neto.toFixed(2));
        $('.rez').val('din' + total.toFixed(2));
        $('.total_1').val(total.toFixed(2));
    });
});

var counter = 1;
$(function(){
    $('p#add_field').click(function() { 
        counter += 1;

        $('.item_1').append('<input type="hidden" name="numItems" id="numItems1' + counter + '" value="' + counter + '"       />'  +  
            '<div class="item item_total_' + counter + '"><input type="text" id="total_' + counter + '" class="total_' + counter + '" name="total_' + counter + '" value="<?php set_value("total_' + counter + '"); ?>"/>'+ 
            '<div class="item item_tax_' + counter + '"><input type="text" id="tax_' + counter + '" class="tax_' + counter + '" name="tax_' + counter + '" value="<?php set_value("tax_' + counter + '"); ?>"     />'+
            '<div class="item item_neto_' + counter + '"><input type="text" id="neto_' + counter + '" class="neto_' + counter + '" name="neto_' + counter + '" value="<?php set_value("neto_' + counter + '"); ?>"     />'+
            '<div class="item item_quantity_' + counter + '"><input type="text" id="quantity_' + counter + '" class="fee quantity_' + counter + '" name="quantity_' + counter + '" value="<?php set_value("quantity_' + counter + '"); ?>"/>'+
            '<div class="item item_priceperunit_' + counter + '"><input type="text"    id="priceperunit_' + counter + '" class="fee priceperunit_' + counter + '"   name="priceperunit_' + counter + '" value="<?php set_value("priceperunit_' + counter + '");    ?>"     />'+
            '<div class="item item_description_' + counter + '"><input type="text" id="description_' + counter + '" class="description_' + counter + '" name="description_' + counter + '" value="<?php set_value("description_' + counter + '"); ?>"/>'+
            '<div class="item item_unit_' + counter + '"><input type="text" id="unit_' + counter + '" class="unit_' + counter + '" name="unit_' + counter + '" value="<?php set_value("unit_' + counter + '"); ?>"     />'
        );    
    });
});

HTML

<input type="hidden" name="numItems" id="numItems1" value="1" />
<div class="item item_1">
    <div class="item item_unit_1">
        <p>Unit</p>
        <input type="text" id="unit_1" class="unit_1" name="unit_1" value="<?php set_value("unit_1"); ?>"/>
        <?php echo form_error('unit_1'); ?>
    </div>
    <div class="item item_description_1">
        <p>Description</p>
        <input type="text" id="description_1" class="description_1" name="description_1" value="<?php set_value("description_1"); ?>"/>
        <?php echo form_error('description_1'); ?>
    </div>
    <div class="item item_priceperunit_1">
        <p>pricepernit</p>
        <input type="text" id="priceperunit_1" class="fee priceperunit_1" name="priceperunit_1" value="<?php set_value("priceperunit_1"); ?>"/>
        <?php echo form_error('priceperunit_1'); ?>
    </div>
    <div class="item item_quantity_1">
        <p>Quantity</p>
        <input type="text" id="quantity_1" class="fee  quantity_1" name="quantity_1" value="<?php set_value("quantity_1"); ?>"/>
        <?php echo form_error('quantity_1'); ?>
    </div>
    <div class="item item_neto_1">
        <p>Neto</p>
        <input type="text" id="neto_1" class="neto_1" name="neto_1" value="<?php set_value("neto_1"); ?>"/>
        <?php echo form_error('neto_1'); ?>
    </div>
    <div class="item item_tax_1">
        <p>Tax</p`enter code here`>
        <input type="text" id="tax_1" class="tax_1" name="tax_1" value="<?php set_value("tax_1"); ?>"/>
        <?php echo form_error('tax_1'); ?>
    </div>
    <div class="item item_total_1">
        <p>Total</p>
        <input type="text" id="total_1" class="total_1" name="total_1" value="<?php set_value("total_1"); ?>"/>
        <?php echo form_error('tax_1'); ?>
    </div>
</div>

Upvotes: 0

Views: 2231

Answers (1)

Mark
Mark

Reputation: 2221

I'm not exactly sure what problem you're having since you haven't posted any errors, and the code provided is incomplete, but I do think the code below might help you simplify your function.

You can have as many inputs in here as you wish. You could optionally add a data-type attribute on the input fields you want to sum and select based on that.

HTML:

<form id="myForm">
    <input type="text" placeholder="enter number one" />
    <input type="text" placeholder="enter number two" />
    <div>
        <label for="calculateSum">Sum is</label>
        <span id="calculateSum">0</span>
    </div>
</form>

JavaScript:

$(document).ready( function() {
    $('#myForm').on('keyup', 'input', function() {
        var iSum = 0;
        $('#myForm input').each( function() {
           iSum = iSum + parseFloat($(this).val());
        });
        $('#calculateSum').html(iSum);
    });
});

JSFiddle: http://jsfiddle.net/markwylde/gjz9h/

Upvotes: 2

Related Questions