How to multiply text box values with javascript

Question

I would like to multiply the values from two text boxes (txtBox1 should contain an Integer value, txtBox2 should contain a Float value) and place the result in a third text box. My code is below, but it doesn't work. The javascript function is called, otherwise it fails. Can someone please help me to code this correctly :\ ? Thank you

       //the javascript function   
       function CalculateTotal(id1, id2) {
            var txt1 = document.getElementById(id1);
            var txt2 = document.getElementById(id2);

            var total = txt1 * txt2;
            document.getElementById("txtTotal").value = parseFloat(total);
        }

        //c# code, programmatically adding attribute
        txtBox1.Attributes.Add("onBlur", "CalculateTotal('txtBox1, txtBox2')");

It's hard to pick a right answer when both are very similar. There was an additional problem that i encountered in my C# code. Although the text boxes were created as so: TextBox txtBox1 = new TextBox(); What i needed to do was also add a value for the ID as so: txtBox1.ID = "txtBox1"; Thanks for ur help! — brookmarker
– brookmarker, Commented Aug 20, 2010 at 14:09

Mikael Svenson · Accepted Answer · 2010-08-20 06:47:43Z

5

You should change

var total = txt1 * txt2;

to

var total = txt1.value * txt2.value;

txt1 and txt2 are the input element itself, not the value they contain.

In your line further down you use .value yourself to set the parameter ;)

[Edit]

As noted by @Dan Dumitru you can use parseFloat/parseInt, but this is more useful if your input fields contains additional text, missing digits before a decimal marker, exponential notation etc.

edited Aug 20, 2010 at 6:47

answered Aug 20, 2010 at 6:04

Mikael Svenson

39.8k8 gold badges76 silver badges80 bronze badges

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

Comments

Dan Dumitru · Accepted Answer · 2010-08-20 07:48:13Z

4

I think you also have a problem with getting the text boxes' IDs, having separate apostrophes for each variable:

//the javascript function   
function CalculateTotal(id1, id2) {
    var txt1 = document.getElementById(id1);
    var txt2 = document.getElementById(id2);

    var total = parseInt(txt1.value) * parseFloat(txt2.value);
    document.getElementById("txtTotal").value = total;
}

//c# code, programmatically adding attribute
txtBox1.Attributes.Add("onblur", "CalculateTotal('txtBox1', 'txtBox2')");

edited Aug 20, 2010 at 7:48

answered Aug 20, 2010 at 6:06

Dan Dumitru

5,3251 gold badge36 silver badges47 bronze badges

2 Comments

HS. Over a year ago

And when using parseInt you almost always want to pass the second parameter indicating the base: parseInt(txtBox1.value,10)

Dan Dumitru Over a year ago

"If there is only one argument, the number base is detected according to the general JavaScript syntax for numbers. Strings that begin with 0x or -0x are parsed as hexadecimals; strings that begin with 0 or -0 are parsed as octal numbers. All other strings are parsed as decimal numbers." So if you're worried about inputs like 077 or 0023, yes, you should use the second parameter. But I wouldn't bother with it.

Alex John · Accepted Answer · 2013-03-09 13:40:26Z

0

Replace to below code

  //the javascript function   
   function CalculateTotal(id1, id2) {
        var txt1 = document.getElementById("id1").value;
        var txt2 = document.getElementById("id2").value;
        var total = txt1 * txt2;
        document.getElementById("txtTotal").value = parseFloat(total);
    }

    //c# code, programmatically adding attribute
   txtBox1.Attributes.Add("onBlur", "CalculateTotal('txtBox1, txtBox2')");

answered Mar 9, 2013 at 13:40

Alex John

1

Collectives™ on Stack Overflow

How to multiply text box values with javascript

3 Answers 3

Comments

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related