CODEWITHSUNDEEP
jquery
Ibrahim Azhar Armar
Ibrahim Azhar Armar

Reputation: 25745

fetching values and calculating using jQuery

i have some input fields

<input type="text" name="quantity[]" class="est_quantity" placeholder="quantity"/>
<input type="text" name="quantity[]" class="est_quantity" placeholder="quantity"/>
<input type="text" name="quantity[]" class="est_quantity" placeholder="quantity"/>

<input type="text" name="cost[]" class="est_cost" placeholder="cost"/>
<input type="text" name="cost[]" class="est_cost" placeholder="cost"/>
<input type="text" name="cost[]" class="est_cost" placeholder="cost"/>

i need to perform some calculations.

//Calculate total Quantity, this is how i do it.
$('.est_quantity').live('keyup', function(){
    var val = 0;
    $('.est_quantity').each(function() {
        if($(this).val().length && $(this).val() != '') {
            val += Number($(this).val());
            $('.est_total_quantity').html(val);
        }
    });
});

the above code works fine, since total quantity is the sum of all quantity[] however calculating the total cost is little different. since the calculation goes like this.

total cost = total_quantity * cost
//for each field or row.

while calculating the cost i want the value to be multiplied by it's corresponding quantity field.

something like

var cost = $('.est_quantity').val * $('.est_cost').val();

i tried doing it this way

$('.est_cost').live('keyup', function(){
    var val = 0.00;
    $('.est_cost').each(function() {
        if($(this).val().length && $(this).val() != '') {
            var cost = $(this).val() * $('.est_quantity').val();
            val += parseFloat(cost);
            $('.est_total_cost').html(val.toFixed(2));
        }
    });
});

the above code fetch proper calculations for only first row, for rest it fetches some weird value.

how do i go with the code for proper calculations?

P.S: initially there is one row of input fields which includes quantity and cost input fields, the rest input fields are dynamically added upon click event.

thank you

Upvotes: 0

Views: 417

Answers (4)

thecodeparadox
thecodeparadox

Reputation: 87073

$('.est_cost').each(function(index,val) {
        if($(this).val().length && $(this).val() != '') {
            var cost = $(this).val() * $('.est_quantity:eq('+ index +')').val(); //here eq(index) maintain the order
            val += parseFloat(cost);
            $('.est_total_cost').html(val.toFixed(2));
        }
    });

Upvotes: 1

Parv Sharma
Parv Sharma

Reputation: 12705

in the second code sample.. you should take care that there are more than one element with .est_quantity class you will have to select one when you are iterating over elements with .est_cost class.
something like this

$('.est_cost').live('keyup', function(){
    var val = 0.00;
    $('.est_cost').each(function(i) {
        if($(this).val().length && $(this).val() != '') {
            var cost = $(this).val() * $('.est_quantity').eq(i).val();
            val += parseFloat(cost);
            $('.est_total_cost').html(val.toFixed(2));
        }
    });
});

notice that im using index parameter of each function. note:- assuming there are equal number of .est_quantity and .est_cost elements

Upvotes: 1

Tomalak
Tomalak

Reputation: 338158

$(document).on('keyup', '.est_cost, .est_quantity', function(){
    var result = 0,
        $cost = $('.est_cost'),
        $quant = $('.est_quantity');

    $.each($cost, function(i) {
        var costVal = parseFloat( $cost.eq(i).val() ),
            quantVal = parseFloat( $quant.eq(i).val() );

        if (quantVal && costVal) {
            result += costVal * qantVal;
        }
    });

    $('.est_total_cost').text( result.toFixed(2) );
});

Upvotes: 1

ahren
ahren

Reputation: 16961

.val() returns an array. You're going to need to parseFloat() or parseInt() before performing calculations.

Upvotes: 0

Related Questions