PDA

View Full Version : user input and variables?

stevenrj35
11-23-2004, 12:52 AM
HI,
I''m doing pretty good with HTML, cut and pasting(tweaking as needed) javascripts. I'm reading tutorials,but what I'm told is simple is escaping me,,please help.
please write a script to do this,,and I will expand on it from there.
I need input from the user "How many total square feet do you need?", I'm assuming a text box is probably what I need.Then I assume need to assign a variable name for right now will call this x.Then multiply x*$2.50 and out put the answer.\
if this could be written for me I would appreciate it,,including any helpfull notes,,
Thank you in advance
Steve
coothead
11-23-2004, 04:39 PM
Hi there stevenrj35,

and a warm welcome to these forums :)

Have a look at this, it may help you...
<!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>form calculation</title>

<meta http-equiv="Content-Type" content="application/xhtml+xml; charset=utf-8" />

<style type="text/css">
/*<![CDATA[*/

body {
background:#aaa;
}
#container {
width:347px;
border:inset 4px #888;
background:#999;
margin:50px auto;
}

#labelone {
margin:0px 10px;
font-family:arial;
font-size:16px;
}

#labeltwo {
padding: 0px 18px 0px 0px;
margin:10px 10px;
font-family:arial;
font-size:16px;
}

#area {
width:100px;
margin: 10px 10px 0px 0px;
}

#cost {
width:100px;
margin:5px 10px 0px 0px;
}

#calculate {
margin:5px; 0px 10px 10px;
}

#reset {
margin:5px; 0px 10px 0px;
}

/*//]]>*/
</style>

<script type="text/javascript">
//<![CDATA[

var df=document.forms; /* bit of shorthand */

function doSums() {

var area=parseFloat(df[0][0].value); /* returns number value */
var cost=(area*2.5).toFixed(2); /* calculates to 2 decimal places */

if((isNaN(area))||(area=="")) { /* test for numbers in area box */

alert("Please insert your total area"); /* gives message of errors */
df[0][0].value=""; /* resetting the box to blank */
df[0][0].focus(); /* resetting the focus */

}

else {

df[0][1].value="$"+cost; /* displays result of calculation */

}
}

//]]>
</script>

</head>
<body onload="document.forms[0][0].focus()"> <!--sets focus to area box-->

<form action="">

<div id="container">

<label id="labelone"> total square feet that you need </label>
<input id="area" type="text"/>

<label id="labeltwo">This is how much it will cost</label>
<input id="cost" type="text" readonly="readonly"/>

<input id="calculate" type="button" value="calculate" onclick="doSums()"/>

<input id="reset" type="reset" onclick="document.forms[0][0].focus()"/>

</div>

</form>

</body>
</html>
stevenrj35
11-24-2004, 01:55 AM
Thanks alot for your help,,,I've pasted this in notepad,and then brought it in to IE to view.I get the everything and it looks good,but when I input my square footage in the text box and hit calculate I get nothing.
could you take a another look at it for me please.
coothead
11-24-2004, 08:02 AM
Hi there stevenrj35,

I am sorry about that :o
The code is fine and has been fully tested.
The problem was in one of the comments that I
added as explanations to the code.
I left white space between an * and a / and this caused the script to throw an error :supereek:
This is the offending comment...
/* returns number value * /
...just close it up on your copy or copy and paste the edited version.
stevenrj35
11-24-2004, 01:22 PM
I really appreciate al the work you did for me, Thank you very much
coothead
11-24-2004, 01:31 PM
No problem, you're welcome :D