/    Sign up×
Community /Pin to ProfileBookmark

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

to post a comment
JavaScript

3 Comments(s)

Copy linkTweet thisAlerts:
@PadonakAug 31.2010 — 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>[/CODE]
Copy linkTweet thisAlerts:
@louisirbyauthorAug 31.2010 — Thanks, Padonak you are the best.
Copy linkTweet thisAlerts:
@savvykmsAug 31.2010 — 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.
×

Success!

Help @louisirby spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 BETA 5.7,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @AriseFacilitySolutions09,
tipped: article
amount: 1000 SATS,

tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,
)...