CODEWITHSUNDEEP
javascriptjqueryhtml
user5308956
user5308956

Reputation:

Javascript or Jquery Math Functions

How can I use these JavaScript or jquery math functions ?

For example, I want to compute the sum of all values in a form, without submiting the form or in button click. I have 4 input fields and i want to add then and put the result of them in another input or paragraph.
Html code looks like this :

<form id='myform'>
    <label> Number 1 : </label><input value="" id="1"/><br>
    <label> Number 2 : </label><input value="" id="2"/><br>
    <label> Number 3 : </label><input value="" id="3"/><br>
    <label> Number 4 : </label><input value="" id="4"/><br> <br>
    <button href="#" class='add'> ADD</button> 
    <p id="p"> </p>
</form>

I tried to do something like this : 

var one   = $("#1").val();
var two   = $("#2").val(); 
var three = $("#3").val();
var four  = $("#4").val(); 
$("add").on("click", function(){
    var sum = one + two + three + four;
    $('p').text(sum);        
})

I created a jsfiddle: example Can you give a little help? Thank you.

Upvotes: 0

Views: 262

Answers (3)

Kevin Nagurski
Kevin Nagurski

Reputation: 1889

I know we have our answer, but I thought I'd show a different approach :-)

// get all the fields in one go
var $fields = $('#myform input');

$('.add').click(function(e){
    // kill the form submission
    e.preventDefault();

    var total = 0;
    $fields.each(function(pos, el) {
        // get the the vals, and, if blank, default to 0
        total += parseInt($(el).val()) || 0;
    });

    $('p').text(total);
});

Upvotes: 0

Reinstate Monica Cellio
Reinstate Monica Cellio

Reputation: 26143

Change it to this...

$(".add").on("click", function(){
    var one   = parseInt($("#1").val(), 10);
    var two   = parseInt($("#2").val(), 10); 
    var three = parseInt($("#3").val(), 10);
    var four  = parseInt($("#4").val(), 10); 
    var sum = one + two + three + four;
    $("p").text(sum);        // or $("#p") since you gave it an ID
});

That way you get the values at the time you click "add", and you also need parseInt() to convert the values into integers, or they'll be treated as strings and concatenated instead.

Incidentally, using numbers as element IDs is not recommended. Simply prefixing them with a common name would be a good idea, like #value1, #value2 etc..

There was also a small issues with your markup, which I fixed...

<form id='myform'>
    <label> Number 1 : </label><input value="" id="1"/><br>
    <label> Number 2 : </label><input value="" id="2"/><br>
    <label> Number 3 : </label><input value="" id="3"/><br>
    <label> Number 4 : </label><input value="" id="4"/><br> <br>
    <button type="button" class="add">ADD</button> 
    <p id="p"> </p>
</form>

The button element defaults to a submit button, unless you specify type="button", so it was causing the page to submit, rather than just handle the button click. You can stop this with the click event handler, but I prefer to set the button type.

Here's the working example...

https://jsfiddle.net/fs5ysde1/17/

Upvotes: 1

intekhab
intekhab

Reputation: 1596

Add + before each to covert it into number if you want to add it as a number like this +$("#1").val();

$(".add").on("click", function(e){
        e.preventDefault();
        var one   = +$("#1").val();
        var two   = +$("#2").val(); 
        var three = +$("#3").val();
        var four  = +$("#4").val(); 
        var sum = one + two + three + four;
        $('#p').text(sum);        
    })

Upvotes: 0

Related Questions