SitePoint Sponsor

User Tag List

Results 1 to 4 of 4

Thread: help requested

  1. #1
    SitePoint Member utopian's Avatar
    Join Date
    Mar 2002
    Location
    Michigan
    Posts
    16
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    help requested

    Could someone please help me with why this is not working? I am just trying to add two variables together that the user types in and have it appear in a third input box. Any help is greatly appreciated.
    Thanks.
    _____________________________________
    <html>
    <head>
    <title>Registration Form</title>
    </head>
    <body>
    <SCRIPT type="text/javascript">
    function calculate(){
    var tutition_1 = document.reg.tutition_1.value;
    var tutition_2 = document.reg.tutition_2.value;
    var total = (tutition_1 + tutition_2);
    }
    </SCRIPT>

    <table border=1 cellpadding=0 cellspacing=0>
    <form name=reg>
    <tr><td><INPUT TYPE="text" NAME="tutition_1" SIZE="10"></td></tr>
    <tr><td><INPUT TYPE="text" NAME="tutition_2" SIZE="10"></td></tr>
    <tr><td><input onClick=calculate() type=button value=Calculate name="button"> <input type=reset value=Reset name="reset">
    <br><br>
    <INPUT size=5 value=" " NAME="total">
    </td></tr></table>

    </FORM>
    </body>
    </html>

  2. #2
    SitePoint Evangelist
    Join Date
    Jan 2002
    Posts
    420
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I believe this is what you are looking for:

    Code:
    <html>
    <head>
    <title>Registration Form</title>
    <script type="text/javascript">
    function calculate(){
    var tutition_1 = eval(document.reg.tutition_1.value);
    var tutition_2 = eval(document.reg.tutition_2.value);
    var total = tutition_1 + tutition_2;
    document.reg.total.value = total;
    }
    </script>
    </head>
    <body>
     
    <form name="reg">
     
    <table border="1" cellpadding="0" cellspacing="0">
    <tr><td><input type="text" name="tutition_1" size="10" /></td></tr>
    <tr><td><input type="text" name="tutition_2" size="10" /></td></tr>
    <tr><td><input onclick="calculate();" type="button" value="Calculate" name="button"> <input type="reset" value="Reset" name="reset" />
    <br /><br />
    <input size="5" value="" name="total" /> 
    </td></tr></table>
     
    </form>
     
    </body>
    </html>
    (I made the code slightly more XHTML compliant as well)
    Wavelan

  3. #3
    SitePoint Guru Vincent Puglia's Avatar
    Join Date
    Feb 2000
    Location
    where the World once stood
    Posts
    700
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi,

    there are 3 things you should notice in the code below:
    1) parseInt(...) -- if you do not use it, addition becomes concatenation. Remember: input boxes are text. Also, if you want more than integers, you need to use "parseFloat(...)"
    2) formObj --> I passed a parameter (the form object) to the function, mostly because I'm lazy and want to avoid typos.
    3) this.form --> the 'this' keyword is extremely useful. It means whatever it is pointing to. In this case, the 'Calculate' button. By adding ".form" to it, I made it point to the button's form (reg).

    Code:
    function calculate(formObj)
    {
    var tutition_1 = parseInt(formObj.tutition_1.value);
    var tutition_2 = parseInt(formObj.tutition_2.value);
    formObj.total.value = (tutition_1 + tutition_2);
    }
    </SCRIPT>
    ...
    <input onClick=calculate(this.form) type=button value=Calculate name="button">
    Vinny
    Where the World Once Stood
    the blades of grass
    cut me still

  4. #4
    SitePoint Member utopian's Avatar
    Join Date
    Mar 2002
    Location
    Michigan
    Posts
    16
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thank you to both of you very much. The information you provided was extremely helpful and exactly what I was looking for.
    -utopian


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
  •