Load value in input text

Hi,
I want to load the multiplication result of 1st and 2nd input text in the 3rd input text before clicking the submit portion of the form (all the values in the input texts will be numeric)

I tried with this code but something is worng here

<script type="text/javascript">
function myfunc() {
var a = document.my.n1.value;
var b = document.my.n2.value;
var c = a*b;
return c;
}
</script>
<form name="my" method="post">
<input type="text" name="n1"/>
<input type="text" name="n2"/>
<input type="text" onChange="myfunc()"/>
<input type="submit" />
</form>

  1. You declare <script> before <form>, not going to work because your script won’t find the elements it’s looking for
  2. myFunc() just returning c, not assigning c to the value of the third text input
  3. a and b are strings, you’re multiplying strings
  4. Don’t you think the onChange event should be declared on <form> ?

I would do something along these lines.

I haven’t included any error checking to check if numbers were entered.

 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script language="JavaScript" type="text/javascript">
 
window.onload=function() {
    //get the 2 input text boxes
    var inpO = document.getElementById("inputs").getElementsByTagName('input');
    //assign an onchange to each of inpO
    for(i=0; i < inpO.length; i++) {
         inpO[i].onchange = updateResult;
    }
}
 
function updateResult() {
    var num1 = new Number(document.my.n1.value);
    var num2 = new Number(document.my.n2.value);
    document.my.result.value = num1 * num2;
    return true; 
}

</script>
</head>
<body>
 
<form name="my" method="post" action="#" onsubmit="return updateResult();">
<fieldset id="inputs">
     <input type="text" name="n1"/>
     <input type="text" name="n2"/>
</fieldset>
<input type="text" name="result"/>
<input type="submit" />
</form> 
 
</body>
</html>

Kalon, many thanks for your code. Your code is working great. But as you entered fieldset tag in the form,the 2 input boxes look different from the 3rd one. Is there anyway, with which all input boxes will look same like a simple form but also will work correctly like your code?

Thanks

The fieldset can jThe only purpose of the fieldset is so that this line can get the inputs


var inpO = document.getElementById("inputs").getElementsByTagName('input');

You could just as easily use a div instead of the fieldset.

Or, if you don’t want them to be wrapped, you could remove the fieldset completely and use something like this code instead:


var form = document.getElementById("inputs"),
    inpO = [form.elements.n1, form.elements.n2];

pmw57, thanks for your valuable tips.

as pmw57 said, the only purpose of the fieldset in my demo code is to make it easier to get the 2 input element objects. I could have just as easily used a div.

normally, unless I had to wrap ths inputs for another purpose I would have just given them a class name and then used a customised getElementsByClassName() function to get the 2 input elements. but that means a little more code and I wanted to keep the demo as simple as possible.

 
function getElementsByClassName(oElm, strTagName, strClassName) {
    var arrElements = (strTagName == "*" && oElm.all)? oElm.all : oElm.getElementsByTagName(strTagName);
    var arrReturnElements = new Array();
    strClassName = strClassName.replace(/\\-/g, "\\\\-");
    var oRegExp = new RegExp("(^|\\\\s)" + strClassName + "([\\\\s|$](file:///s:$))");
    var oElement;
    for(var i=0; i<arrElements.length; i++){
        oElement = arrElements[i];
        if(oRegExp.test(oElement.className)){
            arrReturnElements.push(oElement);
        }
    }
    return (arrReturnElements)
}

and pmw57 showed another way of getting the 2 inputs if you don’t wrap them. quite often there is more than 1 way to do things.