www.webdeveloper.com
Results 1 to 4 of 4

Thread: JavaScript for on-the-fly calculations

  1. #1
    Join Date
    Aug 2010
    Posts
    4

    JavaScript for on-the-fly calculations

    I am in need of a Javascript which will allow the user to input information in an input field to allow them to determine the cost of a particular product and then display the result of the calculation. I have a Javascript I am using now but I would like for the cost to display automatically and not have to click a submit button.
    This is the Javascript I am using now.
    <head>

    <title></title>

    </head>

    <body>

    </body>

    </html><html>
    <head>
    <title>Input tutorial</title>
    <script language="javascript">
    function addNumbers()
    {
    var val1 = parseInt(document.getElementById("value1").value);
    var val2 = parseInt(document.getElementById("value2").value);
    var ansD = document.getElementById("answer");
    ansD.value = val1 * val2 *.61 + 24.05 ;
    }
    </script>
    </head>
    <body>
    <input type="text" id="" name="value1" value=""/>
    <input type="text" id="" name="value2" value=""/>
    <input type="button" name="Sumbit" value="Click here" onclick="javascript:addNumbers()"/>
    <input type="text" id="" name="answer" value=""/;>
    </body>
    </html> </BODY>
    </HTML>

    Thanks

  2. #2
    Join Date
    May 2006
    Location
    Somewhere behind your screen
    Posts
    1,648
    1 fix your page markup it looks awful
    2 use [ CODE ] [ /CODE ] tags when posting code
    3
    Code:
    <script type="text/javascript">
    function addNumbers(){
    var val1 = parseInt(document.getElementById("value1").value);
    var val2 = parseInt(document.getElementById("value2").value);
    if(val1 && val2){
    document.getElementById("answer").value = val1 * val2 *.61 + 24.05;
    }
    else{return;}
    }
    </script>
    </head>
    <body>
    <input type="text" id="value1" value="" onkeyup="addNumbers()" />
    <input type="text" id="value2" value="" onkeyup="addNumbers()" />
    <input type="text" id="answer" value="" />
    </body>
    Last edited by Padonak; 08-31-2010 at 12:16 PM.
    xxx: Guess Buddhist riddle: "What is the sound of one hand clapping?"
    yyy: facepalm

  3. #3
    Join Date
    Aug 2010
    Posts
    4

    Thumbs up Thanks

    Thanks, Padonak you are the best.

  4. #4
    Join Date
    Oct 2007
    Location
    Western Massachusetts, USA
    Posts
    387
    Answered this on the HTML forum. Try not to duplicate posts :S
    Also: the above script doesn't make sure an element with id "answer" actually exists as well. If you have both numeric textboxes but you forgot the answer textbox, then you get an error. I'm sure that Padonak spotted it while coding though, it is hard to miss. More than likely the logic is this: if 66&#37; of the form is defined as not null, it makes sense that the rest should also be not null.
    Last edited by savvykms; 08-31-2010 at 03:12 PM.
    Computer programmer / web developer.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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



Recent Articles