jQuery add the value of 2 input text then sum it with total

Question

oh god i dont know what to do here please help me...

i have this html code

<div id="project_math">
<form method="post">
 Quantity : <input type="text" name="quatity" value="1" />
 Amount : <input type="text" name="amounty" value="20" />
 <span id="total">20</span>
</form>
</div>

jQuery

$(document).ready(function(){

    /* COMPUTATION */
    $('input[name=quantity_e]').keyup(function(){

        var sum = $('input[name=amt_e]').val();

        sum *= $('input[name=quantity_e]').val();
        $("#total").text($(this).val());

    });
});

what im trying to do is that when i keyup and input value like 2 or 10 it will times the value of it to the amount value so if i keyup 2 then the amount value is 20 the total should be 40.

is my jQuery wrong?

Magus · Accepted Answer · 2012-12-06 13:23:54Z

6

val return a string. So you must convert it into a number. You can use parseInt.

var sum = parseInt($('input[name=amt_e]').val(), 10);
sum *= parseInt($('input[name=quantity_e]').val(), 10);
$("#total").text(sum);

The names you use in your javascript are not the same in your html. But it's maybe just your example.

answered Dec 6, 2012 at 13:23

Magus

15.1k4 gold badges40 silver badges52 bronze badges

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

2 Comments

Butternut Over a year ago

thank you thank you so much for the that. im learning thumbs up

War10ck Over a year ago

@user1538668 $('input[name=total]').val(sum); will place the value of sum in the hidden input named total. To ensure this works, you can open the console in your browser and type $('input[name=total]').val(); and it should return you your number.

augustomen · Accepted Answer · 2012-12-06 13:24:35Z

2

Try parseInt for that:

    var sum = parseInt($('input[name=amt_e]').val());
    sum *= parseInt($('input[name=quantity_e]').val());

It will, of course, fail if the value is not an integer.

answered Dec 6, 2012 at 13:24

augustomen

9,8774 gold badges49 silver badges73 bronze badges

Comments

Ram · Accepted Answer · 2012-12-06 13:27:30Z

2

Well, your selectors are wrong and val returns a string, you should first convert the string to a number.

$('input[name=quatity]').keyup(function(){
    var sum = parseInt(this.value, 10)
    sum *= parseInt($('input[name=amounty]').val(), 10);
    $("#total").text(sum);
});

answered Dec 6, 2012 at 13:27

Ram

145k16 gold badges174 silver badges201 bronze badges

Comments

phemt.latd · Accepted Answer · 2012-12-06 13:29:06Z

1

use this:

/* COMPUTATION */
$('input[name=quatity]').keyup(function(){

    var sum = parseInt($('input[name=amounty]').val());

    sum += parseInt($('input[name=quatity]').val());
    $("#total").text(sum);

});

Try this on fiddle:

http://jsfiddle.net/XwjKN/

answered Dec 6, 2012 at 13:29

phemt.latd

1,80323 silver badges34 bronze badges

Comments

Murali Murugesan · Accepted Answer · 2012-12-06 13:32:15Z

1

val() returns string, so convert to int value using parseInt with 10 radix, as default is 8

var total= parseInt($('input[name=amt_e]').val(), 10);
total*= parseInt($('input[name=quantity_e]').val(), 10);
$("#total").text(total);

answered Dec 6, 2012 at 13:32

Murali Murugesan

22.6k18 gold badges76 silver badges124 bronze badges

Comments

Uttam Kadam · Accepted Answer · 2012-12-06 13:41:10Z

0

Above solution gives NaN if any text box is empty. please try this it will give 0.

var v1=0; var v2=0;

if(!isNaN(parseInt($('input[name=amounty]').val()))){ v1 = parseInt($('input[name=amounty]').val()); }
if(!isNaN(parseInt($('input[name=quatity]').val()))){ v2 = parseInt($('input[name=quatity]').val()); }


sum = v1 * v2;

answered Dec 6, 2012 at 13:41

Uttam Kadam

4581 gold badge7 silver badges20 bronze badges

Comments

War10ck · Accepted Answer · 2012-12-06 13:42:22Z

0

You could try the following:

var item1 = parseInt($('input[name=amounty]').val(), 10);
var item2 = parseInt($('input[name=quantity]').val(), 10);
if(item1 !== NaN && item2 !== NaN) {  //This is a check to make sure the values are numbers
    var product = item1 * item2;
    $('#total').text(product);
    $('input[name=total]).val(product);    //This will put the value in the hidden input field
}

This solution won't attempt to compute if the values are not both numbers.

Hope this helps.

answered Dec 6, 2012 at 13:42

War10ck

12.5k7 gold badges46 silver badges56 bronze badges

Comments

Dhanasekar Murugesan · Accepted Answer · 2012-12-06 13:47:26Z

lot of corrections in INPUT field names:

Quantity is the actual input field name you might have wished, but it is not used correctly in both HTML and Jquery.
span displaying total value does not update with SUM you are calculating instead it always get updated with quantity value.

Find the corrected HTML:

<div id="project_math">
<form method="post">
 Quantity : <input type="text" name="quantity" value="1" />
 Amount : <input type="text" name="amounty" value="20" />
 <span id="total">20</span>
</form>
</div>

jQuery:

$(document).ready(function(){

    /* COMPUTATION */
    $('input[name=quantity]').keyup(function(){

        console.log('fired');
        var sum = $('input[name=amounty]').val();

        sum *= $('input[name=quantity]').val();
        $("#total").text(sum );

    });
});

Collectives™ on Stack Overflow

jQuery add the value of 2 input text then sum it with total

8 Answers 8

2 Comments

Comments

Comments

Comments

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

8 Answers 8

2 Comments

Comments

Comments

Comments

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related