How to add the value of two input box and show them instantly in another label

[sshuvro58]

Suppose I have two select box , each box has several option and all are number and I have a text box which is read only .

I want that text will show instantly a value which is the sum of the value of two select box and each value of the select box will be multiply by 100 and 200 each .

Lets say I have selected 2 for first select option and 1 for second one .

the readonly text box will instantly show 2100 + 1200= 400

Here is my JS code

function sum() 
{ 
var q=document.frm_add.quantity1; var p=document.frm_add.quantity2; var result=q.value*100 + p.value*200;
    var n = new Number(result);     
    var r = n.toPrecision(4);       
    document.frm_add.total.value = r;

}

Here is the form code
< select class=”form-control” id=”quantity1″ name=”quantity1″ onkeyup=” sum();” onblur=”sum();”>
0
1
2
3
4
5

<select class="form-control" id="quantity1" name="quantity1" onkeyup="sum();" onblur="sum();">
                              <option>0</option>
                              <option>1</option>
                              <option>2</option>
                              <option>3</option>
                              <option>4</option>
                              <option>5</option>
                            </select>

<input type=text name="value" maxlength=15 size=10 class=taho12 readonly>

Here is what I have tried
http://codepen.io/sshuvro58/pen/JymAa

[Eric Gregoire]

Here’s a list of issues I came across – Option tags contain no value attributes (are called in the script). – Reference to frm_add leads to undefined element. – Both boxes had the same ID and name of ‘quantity1’. – Get that script tag outta the JS section of CodePen :).

I had some free time, so here’s a pen: http://codepen.io/Boogiesox/pen/cqzfC

I used querySelector() to get the select boxes for convenience, but you can grab the select boxes any way you’d like. I added event listeners to both of the input boxes so that when they change, they load the added value total into the box by manipulating the ‘value’ attribute using the setAttribute() method with the first argument being the name of the attribute being selected and the second argument being the value you want in there.

[Author]

Posts