Forum Moderators: open
I am looking to create a calculator for my website. The user will be entering variables in input boxes and the total will appear in another input box. I was curious how I can make the total appear as they are typing it in. I don't want them to have to refresh to see the total.
I'm sure I have done this on other sites. Would it have to do with the onChange function or something like that?
I am by no means a Javascript expert, I'm as noob as they come.
Thanks in advance for your help :)
Wes
try this it may suit your requirements...
<!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>a very simple calculator</title><meta http-equiv="Content-Type" content="application/xhtml+xml; charset=utf-8" />
<style type="text/css">
/*<![CDATA[*/
body {
background:#ddf;
}
#container {
width:220px;
background:#ddd;
border:double 3px #000;
padding:10px;
margin:30px auto;
}
#calcs label,input {
font-family:verdana;
font-size:16px;
}
.text {
width:100px;
margin:3px;
}
.butts {
width:25px;
}
/*//]]>*/
</style><script type="text/javascript">
//<![CDATA[
var df=document.forms;function calc(what) {
one=parseFloat(df[0][0].value);
two=parseFloat(df[0][1].value);if((isNaN(one))¦¦(isNaN(two))) {
df[0].reset();
return;
}if(what=="add") {
df[0][2].value=one+two;
}
else {
if(what=="subt") {
df[0][2].value=one-two;
}
else {
if(what=="mult") {
df[0][2].value=one*two;
}
else {
if(what=="div") {
df[0][2].value=one/two;
}
}
}
}
}
//]]>
</script></head>
<body><div id="container">
<form id="calcs" action="#">
<div>
<label><input class="text" type="text"/> : number</label>
</div><div>
<label><input class="text" type="text"/> : number</label>
</div><div>
<label><input class="text" type="text"/> : result</label>
</div><div>
<input class="butts" type="button" value="+" onclick="calc('add')" onfocus="this.blur()"/>
<input class="butts" type="button" value="-" onclick="calc('subt')" onfocus="this.blur()"/>
<input class="butts" type="button" value="x" onclick="calc('mult')" onfocus="this.blur()"/>
<input class="butts" type="button" value="÷" onclick="calc('div')" onfocus="this.blur()"/>
<input type="reset" value="clear" onfocus="this.blur()"/>
</div></form>
</div>
</body>
</html>
birdbrain
That was kind of what I am looking for but I don't need multiple ways of calculating it. What I am looking to do is this..... the user would enter the first number, and then the second number and as soon as they are done typing the number it calculates it without them having to push a "+" "-" "X" or "/". I think I figured out how to do it. It is using the onKeyUp command. An example is this:
onkeyup="document.form.total.value = document.form.input1.value + document.form.input2.value;"
This would calculate the addition of the two inputs right after they type the second on in, without having to push any submit buttons.
Thanks though that was very close :)
Wes
Cheers,
JP
