JavaScript for on-the-fly calculations

**louisirby** · 08-31-2010 11:40 AM

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

**Padonak** · 08-31-2010 12:09 PM

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>

**louisirby** · 08-31-2010 12:47 PM

Thanks, Padonak you are the best.

**savvykms** · 08-31-2010 03:09 PM

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% of the form is defined as not null, it makes sense that the rest should also be not null.

Thread: JavaScript for on-the-fly calculations

Thread Tools

Display

JavaScript for on-the-fly calculations

Thanks

Thread Information

Users Browsing this Thread

Bookmarks

Bookmarks

Posting Permissions