|
JavaScript Lecture |
Instructor: Amadou O. Wane
Last update: 10/25/01
Lecture7
FORM
<html>
<head>
<script>
function showIt(form)
{ var the_fname = form.fname.value;
document.write("<br>" + the_fname);
}
</script>
</head>
<body>
<h2>SIMPLE FORM</h2>
<form name="info">
Enter your first name:
<input type="text" name="fname" value="First Name">
<br>Enter your last name:
<input type="text" name="lname" value="Last Name">
<br>Please enter your age:
<input type="text" name="age" value=""><p>
Select a hobby:
<input type="radio" name="hobby" value="reading" checked="true">Reading
<input type="radio" name="hobby" value="shopping">Shopping
<input type="radio" name="hobby" value="movies">Movies<p>
<input type="button" name="processIt" value="Process data..."
onClick="showIt(this.form)">
</form>
You can specify the size of a text area with the "textarea"
container:
<textarea cols="40" rows="30" name="mytextarea">Inside
the text area</textarea>
//--------------------------------------------------------
Form Validation
<html>
<head>
<script type="text/javascript">
function validate()
{
x=document.myForm
at=x.myEmail.value.indexOf("@")
code=x.myCode.value
firstname=x.myName.value
submitOK="True"
if (at==-1)
{
alert("Not a valid e-mail")
submitOK="False"
}
if (code<1 || code>5)
{
alert("Your code must be between 1 and 5")
submitOK="False"
}
if (firstname.length>10)
{
alert("Your name must be less than 10 letters")
submitOK="False"
}
if (submitOK=="False")
{
return false
}
}
</script>
</head>
<body>
<form name="myForm" >
Enter your e-mail:
<input type="text" name="myEmail">
<br>
Enter your code, value from 1 to 5:
<input type="text" name="myCode">
<br>
Enter your first name, max 10 letters:
<input type="text" name="myName">
<br>
<input type="submit" value="Send input" onclick="validate(this.form)">
</form>
</body>
</html>
//--------------------------------------------------------
Form Options
<html>
<head>
<script type="text/javascript">
function put()
{
mydoc="document.forms[0]";
option=mydoc.dropdown.options[document.forms[0].dropdown.selectedIndex].text
txt=document.forms[0].number.value
txt=txt + option
document.forms[0].number.value=txt
}
</script>
</head>
<body>
<form>
Select numbers:<br>
<select name="dropdown">
<option>1
<option>2
<option>3
<option>4
<option>5
<option>6
<option>7
<option>8
<option>9
<option>0
</select>
<input type="button" onclick="put()" value="-->"> <input type="text" name="number">
</form>
</body>
</html>
//--------------------------------------------------------
Length Validation
<html>
<head>
<script type="text/javascript">
function validate()
{
x=document.myForm
input=x.myInput.value
if (input.length>5)
{
alert("Do not insert more than 5 characters")
return false
}
else
{
return true
}
}
</script>
</head>
<body>
<form name="myForm">
In this input box you are not allowed to insert more than 5 characters:
<input type="text" name="myInput">
<input type="submit" value="Send input" onclick="validate(this.form)">
</form>
</body>
</html>