CODEWITHSUNDEEP
jquery
Butternut
Butternut

Reputation: 843

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

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?

Upvotes: 2

Views: 6625

Answers (8)

Dhanasekar Murugesan
Dhanasekar Murugesan

Reputation: 3229

lot of corrections in INPUT field names:

  1. Quantity is the actual input field name you might have wished, but it is not used correctly in both HTML and Jquery.

  2. 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 );

    });
});​

Upvotes: 0

War10ck
War10ck

Reputation: 12508

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.

Upvotes: 0

Uttam Kadam
Uttam Kadam

Reputation: 458

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;

Upvotes: 0

Murali Murugesan
Murali Murugesan

Reputation: 22619

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);

Upvotes: 1

phemt.latd
phemt.latd

Reputation: 1803

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/

Upvotes: 1

Ram
Ram

Reputation: 144659

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);
});

Upvotes: 2

augustomen
augustomen

Reputation: 9739

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.

Upvotes: 2

Magus
Magus

Reputation: 15104

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.

Upvotes: 6

Related Questions