Sum of two textfields - javascript

Question

I found [this][1], rather difficult, javascript example online and I've implemented it with success in my website.

However, I would like to get the result of, in this case, the two subtotals in one new text-field.

The traditional getElementbyId and total.value=total didn't work out.

EDIT

 function doMath()
{
    // Capture the entered values of two input boxes
    var twogiga = document.getElementById('twogig').value;
    var fourgiga = document.getElementById('fourgig').value;

    // Add them together and display
    var sum = parseInt(twogiga) + parseInt(fourgiga);
    document.getElementById('total').value = parseInt(sum);
}

This is the javascript I use. But for some reason, when I have just one value (twogig), the total is set as NaN. What is wrong with my script?

try to build some html first so you and us get a better idea — amosrivera
– amosrivera, Commented Jun 24, 2011 at 2:52
Not clear with the questions, some more details required to answer ur query — gmhk
– gmhk, Commented Jun 24, 2011 at 2:58
Not the problem with your script, but if you've already used parseInt on all of the numbers you're going to be adding together you don't need to use it again on the sum. — nnnnnn
– nnnnnn, Commented Jun 27, 2011 at 0:06

John · Accepted Answer · 2011-06-24 03:06:15Z

7

Well, if you have assigned ID's to text inputs, for example: <input type="text" id="my_input" />, then you can call it with document.getElementById('my_input').value.

So:

<input type="text" id="my_input1" />
<input type="text" id="my_input2" />
<input type="button" value="Add Them Together" onclick="doMath();" />

<script type="text/javascript">
    function doMath()
    {
        // Capture the entered values of two input boxes
        var my_input1 = document.getElementById('my_input1').value;
        var my_input2 = document.getElementById('my_input2').value;

        // Add them together and display
        var sum = parseInt(my_input1) + parseInt(my_input2);
        document.write(sum);
    }
</script>

Naturally, that is a very basic script, it doesn't check to make sure the entered values are numbers. We have to convert the fields into integers, otherwise they'll be strings (so 2+2 would equal 22). When the button is clicked, the function is called, which makes a variable for each input box, converts them to ints, adds them, and outputs our sum.

answered Jun 24, 2011 at 3:06

John

3602 silver badges8 bronze badges

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

12 Comments

bhagyas Over a year ago

You should be defining a radix for the parseInt function, otherwise your results will be messed up.

John Over a year ago

Well, that's completely optional, and unless you want to use a hex or octa, it will default to decimal. Of course, if you do want to use a radex, use: parseInt(my_input1, 10); (10 means decimal). Personally, I don't really use them at all, and it would only mess up if the user tries to enter a number that starts with a 0 or an "x".

Michiel Over a year ago

Ok, that's helpful! How do I get the value sum in a defined textfield? myText.value = sum?

John Over a year ago

Make an input field, give it an id, for example my_sum, and then use: document.getElementById('my_sum').value = sum;

Michiel Over a year ago

Ok, seems like a good solution. But whenever I enter just 1 textfield, I get an NaN error. So both fields are required to make the sum?

|

SuperKael · Accepted Answer · 2012-11-01 20:05:35Z

3

Replace:

document.getElementById('total').value = parseInt(sum);

With:

document.getElementById('total').value = sum;

You have already done all the int-parsing you need to do.

answered Nov 1, 2012 at 20:05

SuperKael

2262 silver badges11 bronze badges

Comments

Gauravbhai Daxini · Accepted Answer · 2020-05-10 06:12:30Z

0

$("#value1, #value2").on('focusout', function() {
  var value2 = parseInt($("#value2").val()) > 0 ? parseInt($("#value2").val()) : 0;
  var value1 = parseInt($("#value1").val()) > 0 ? parseInt($("#value1").val()) : 0
  var sumOfValues = value1 + value2;
  console.log('Your sum is ' + sumOfValues);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="text" class="input" id="value1">
<input type="text" class="input" id="value2">

answered May 10, 2020 at 6:12

Gauravbhai Daxini

2,2002 gold badges26 silver badges29 bronze badges

Collectives™ on Stack Overflow

Sum of two textfields - javascript

3 Answers 3

12 Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

12 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related