PDA

View Full Version : Newbie needs help with form input



Nora9999
Mar 2nd, 2008, 05:14 PM
Hi there- this is a school assignment and I need help with what seems to be a minor detail.
Assignment is to take an HTML form and use the form inputs to do some calculation using javascript.

What field/input/type/whatever do I call the input in order to call it up to do the calculation?
Here's a snippet of what I mean: *edit: if you add in the headings, this will show up as a page.
Number to calculate with: <input type="text" value = "" name="field1" id="field1 size="7" />

When I use value or name, nothing happens. Objective is to put a 5 into the input box and have an alert box "yes" pop up.

Here's a larger snip:
Danke schon,
Nora

<head>
<title>Lab 2</title>
<script type = "text/javascript" src="form.js"

function calculate()
if value = 5
{
alert (yes)
}
else
{
alert(no)
}
script/>
</head>

<body>
<img border="0" src="lab10-1logo.jpg" />
<form name="Calc" id="Calc" length ="6" method="get" action="">
<table width="600" border="0" align="left">
<tr>
<td width="300" align="left" valign="top">
Please fill out the fields.
</td>
<td width="900">

Number to calculate with: <input type="text" value = "" name="field1" id="field1 size="7" /><br />

<input name="button" type="button" value="Calculate" onclick = "calculate(document.field1);/>"
</td>
</tr>
</table>
</form>
</body>
</html>

Philip M
Mar 2nd, 2008, 05:29 PM
A good many errors, I am afraid.

Look carefully at this and compare with your own original. But it is important that you learn from the help you have been given and not just blindly hand this in as your own work.


<html>
<head>
<title>Lab 2</title>
<script type = "text/javascript">

function calculate(which) { // function must be contained in {} curly brackets
if (which.value == 5) { // note the == meaning comparison and the brackets
alert ("Yes") // "yes" as a literal must be in quotes. Without the quotes it refers to a variable named yes.
}
else {
alert("No")
}

} // end of function
</script> // must have <
</head>

<body>
<img border="0" src="lab10-1logo.jpg" />

<form name="Calc" id="Calc" length ="6" action="">
<table width="600" border="0" align="left">
<tr>
<td width="300" align="left" valign="top">
Please fill out the fields.
</td>
<td width="900">

Number to calculate with: <input type="text" value = "" name="field1" id="field1" size="7" /><br />

<input name="calcButton" type="button" value="Calculate" onclick = "calculate(field1)"/> // best not to name a button simply "button" to avoid confusion
</td>
</tr>
</table>
</form>

</body>
</html>

Nora9999
Mar 2nd, 2008, 05:34 PM
Thank you.
No worries- I am def not handing this in as my own work!
:)
I appreciate the response!
-Nora

Nora9999
Mar 2nd, 2008, 06:38 PM
I'm still unsure of which property holds the value. If it is value, as you have shown in your code, Philip - then how would you differentiate value 1 from value 2? Thanks- Nora
See code below:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml/DTD/xhtml1

transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<title>Lab 4</title>
<script type = "text/javascript">

function calculate(throws) {
if (throws.value == 5) { // would like to multiple field1*field2
alert ("yes") // "yes" as a literal must be in quotes. Without the quotes it refers to a variable named yes.
}
else {
alert("No")
}

}
</script> // must have <
</head>

<body>

<form name="Calc" id="Calc" length ="6" action="">
<table width="600" border="0" align="left">
<tr>
<td width="300" align="left" valign="top">
Please fill out the fields.
</td>
<td width="900">

Throws Attempted: <input type="text" value = "" name="field1" id="field1 size="7" /><br />
Throws Made: <input type="text" value = "" name="field2" id="field2 size="7" /><br />

<input name="calcButton" type="button" value="Calculate" onclick = "calculate(field1,field2)"/>
</td>

</tr>
</table>
</form>

</body>
</html>

Philip M
Mar 2nd, 2008, 07:19 PM
function calculate(throwsA, throwsM) {
if (throwsA.value == 5) {
alert ("Yes")
result = throwsA.value * throwsM.value;
alert (result);
}
else {
alert("No");
}
}
</script>