SitePoint Sponsor

User Tag List

Results 1 to 7 of 7
  1. #1
    SitePoint Zealot
    Join Date
    Jun 2008
    Posts
    192
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    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

    Code:
    <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>

  2. #2
    SitePoint Member
    Join Date
    Dec 2010
    Location
    Bandung
    Posts
    2
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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> ?

  3. #3
    Non-Member Kalon's Avatar
    Join Date
    Aug 2010
    Location
    At my computer
    Posts
    2,012
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I would do something along these lines.

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

    Code:
     
    <!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>

  4. #4
    SitePoint Zealot
    Join Date
    Jun 2008
    Posts
    192
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Kalon View Post
    I would do something along these lines.

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

    Code:
     
    <!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

  5. #5
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,682
    Mentioned
    99 Post(s)
    Tagged
    4 Thread(s)
    The fieldset can jThe only purpose of the fieldset is so that this line can get the inputs

    Code javascript:
    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:

    Code javascript:
    var form = document.getElementById("inputs"),
        inpO = [form.elements.n1, form.elements.n2];
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  6. #6
    SitePoint Zealot
    Join Date
    Jun 2008
    Posts
    192
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    pmw57, thanks for your valuable tips.

  7. #7
    Non-Member Kalon's Avatar
    Join Date
    Aug 2010
    Location
    At my computer
    Posts
    2,012
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by coolR View Post
    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
    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.

    Code:
     
    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|$)");
        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.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •