JavaScript Tutorial/Form/Elements
Содержание
Accessing and Writing Information
The form object contains an elements array.
The elements array are indexed in the order they appear, and you can access a specific element by its NAME instead of index number.
Using Different Methods of Accessing Form Elements
<HTML>
<HEAD>
<TITLE>Example of Accessing Form Elements</TITLE>
<SCRIPT LANGUAGE="JavaScript">
<!--
function showCar(){
var car = document.pref.elements[0].value;
alert("Your favorite car is: " + car);
}
function showColor(){
var color = document.pref.color.value;
alert("Your favorite color is: " + color);
}
// End hide-->
</SCRIPT>
</HEAD>
<BODY>
<FORM NAME="pref" METHOD=POST>
Enter the name of your favorite car:
<INPUT TYPE="text" NAME="car" SIZE=25>
<INPUT TYPE="BUTTON" NAME="carButton" VALUE="Show Car" onClick="showCar(this.form)">
<BR>
Enter your favorite color:
<INPUT TYPE="text" NAME="color" SIZE=15>
<INPUT TYPE="BUTTON" NAME="colorButton" VALUE="Show Color" onClick="showColor(this.form)">
</FORM>
</BODY>
</HTML>
Check Form element type
<html>
<head>
<title>Online Survey</title>
<script type="text/javascript" language="javascript">
<!-- //
function CheckCheckboxes(){
var elLength = document.MyForm.elements.length;
for (i=0; i<elLength; i++)
{
var type = MyForm.elements[i].type;
if (type=="checkbox" && MyForm.elements[i].checked){
alert("Form element in position " + i + " is of type checkbox and is checked.");
}
else if (type=="checkbox") {
alert("Form element in position " + i + " is of type checkbox and is not checked.");
}
else {
}
}
}
// -->
</script>
</head>
<body>
<form action="http://www.wbex.ru" method="POST" name="MyForm">
<table width="600">
<tr><th colspan="3" align="center">Online Survey<br /><br /></th>
</tr>
<tr>
<td>Your Name:</td>
<td> </td>
<td><input type="text" name="YourName"/></td></tr>
<tr>
<td>Your Gender:</td>
<td> </td>
<td>
<input type="radio" name="Gender" value="Male"/>Male<br />
<input type="radio" name="Gender" value="Female"/>Female<br />
</td>
</tr>
<tr><td>Which of our consultancy <br />services are you interested in?</td>
<td align="right">
</td>
<td>
<input type="checkbox" name="XML"/> XML<br />
<input type="checkbox" name="XSLT"/> XSLT<br />
<input type="checkbox" name="SVG"/> SVG<br />
<input type="checkbox" name="XSL-FO"/> XSL-FO<br />
<input type="checkbox" name="XForms"/> XForms<br />
</td>
</tr>
<tr>
<td>Which free gift would you prefer for filling out this survey?</td>
<td> </td>
<td>
<select name="FreeGift">
<option value="Choice1">Choice 1</option>
<option value="Choice2">Choice 2</option>
<option value="Choice3">Choice 3</option>
</select>
</tr>
<tr>
<td>Enter your comments in<br />the text box
</td>
<td> </td>
<td><textarea name="Comments" rows="5" cols="50"></textarea></td>
</tr>
<tr>
<td> </td>
<td> </td>
<td><br /><input type="submit" value="Send Form" onclick="CheckCheckboxes()"/></td>
</tr>
</table>
</form>
</body>
</html>
Loop through all elements in a form
<html>
<head>
<title>Online Survey</title>
<script type="text/javascript" language="javascript">
<!-- //
function CheckCheckboxes(){
var elLength = document.MyForm.elements.length;
for (i=0; i<elLength; i++)
{
var type = MyForm.elements[i].type;
if (type=="checkbox" && MyForm.elements[i].checked){
alert("Form element in position " + i + " is of type checkbox and is checked.");
}
else if (type=="checkbox") {
alert("Form element in position " + i + " is of type checkbox and is not checked.");
}
else {
}
}
}
// -->
</script>
</head>
<body>
<form action="http://www.wbex.ru" method="POST" name="MyForm">
<table width="600">
<tr><th colspan="3" align="center">Online Survey<br /><br /></th>
</tr>
<tr>
<td>Your Name:</td>
<td> </td>
<td><input type="text" name="YourName"/></td></tr>
<tr>
<td>Your Gender:</td>
<td> </td>
<td>
<input type="radio" name="Gender" value="Male"/>Male<br />
<input type="radio" name="Gender" value="Female"/>Female<br />
</td>
</tr>
<tr><td>Which of our consultancy <br />services are you interested in?</td>
<td align="right">
</td>
<td>
<input type="checkbox" name="XML"/> XML<br />
<input type="checkbox" name="XSLT"/> XSLT<br />
<input type="checkbox" name="SVG"/> SVG<br />
<input type="checkbox" name="XSL-FO"/> XSL-FO<br />
<input type="checkbox" name="XForms"/> XForms<br />
</td>
</tr>
<tr>
<td>Which free gift would you prefer for filling out this survey?</td>
<td> </td>
<td>
<select name="FreeGift">
<option value="Choice1">Choice 1</option>
<option value="Choice2">Choice 2</option>
<option value="Choice3">Choice 3</option>
</select>
</tr>
<tr>
<td>Enter your comments in<br />the text box
</td>
<td> </td>
<td><textarea name="Comments" rows="5" cols="50"></textarea></td>
</tr>
<tr>
<td> </td>
<td> </td>
<td><br /><input type="submit" value="Send Form" onclick="CheckCheckboxes()"/></td>
</tr>
</table>
</form>
</body>
</html>
Reference form element by using the dot notation
<html>
<head>
<title>Displaying the value entered in a text field</title>
<script type="text/javascript" language="javascript">
<!-- //
function DisplayValue(){
if(document.MyForm.MyTextField.value!==""){
alert("The value entered was \n" + document.MyForm.MyTextField.value);
}
else{
alert("The text field was empty!\nPlease enter your name.");
}
}
// -->
</script>
</head>
<body>
<form name="MyForm" action="http://www.wbex.ru/" method="Post" onsubmit="DisplayValue()">
<input type="text" name="MyTextField"/><P>Enter your name</p>
<input type="submit" value="Click to Submit"/>
</form>
</body>
</html>
Writing information to forms.
<HTML>
<HEAD>
<TITLE>Example of Writing Form Elements</TITLE>
<SCRIPT LANGUAGE="JavaScript">
<!--
function checkText(){
if( document.FormExample3.textbox.value == "AAA"){
alert("You are correct!");
} else {
document.FormExample3.textbox.value = "AAA";
alert("That is incorrect. The correct answer is now in the text box.");
}
}
// End hide-->
</SCRIPT>
</HEAD>
<BODY>
<FORM NAME="FormExample3" METHOD=POST>
Input <INPUT TYPE="text" NAME="textbox" SIZE=25>
<INPUT TYPE="BUTTON" NAME="Bugs" VALUE="Submit" onClick="checkText(this.form)">
</FORM>
</BODY>
</HTML>