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
<source lang="javascript">
<HTML> <HEAD> <TITLE>Example of Accessing Form Elements</TITLE>
<SCRIPT LANGUAGE="JavaScript">
</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)">
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></source>
Check Form element type
<source lang="javascript">
<html> <head> <title>Online Survey</title> <script type="text/javascript" language="javascript">
</script> </head> <body> <form action="http://www.wbex.ru" method="POST" name="MyForm">
| Online Survey |
||
|---|---|---|
| Your Name: | <input type="text" name="YourName"/> | |
| Your Gender: |
<input type="radio" name="Gender" value="Male"/>Male |
|
| Which of our consultancy services are you interested in? |
<input type="checkbox" name="XML"/> XML |
|
| Which free gift would you prefer for filling out this survey? |
<select name="FreeGift"> <option value="Choice1">Choice 1</option> <option value="Choice2">Choice 2</option> <option value="Choice3">Choice 3</option> </select> | |
| Enter your comments in the text box |
<textarea name="Comments" rows="5" cols="50"></textarea> | |
<input type="submit" value="Send Form" onclick="CheckCheckboxes()"/> |
||
</form> </body> </html></source>
Loop through all elements in a form
<source lang="javascript">
<html> <head> <title>Online Survey</title> <script type="text/javascript" language="javascript">
</script> </head> <body> <form action="http://www.wbex.ru" method="POST" name="MyForm">
| Online Survey |
||
|---|---|---|
| Your Name: | <input type="text" name="YourName"/> | |
| Your Gender: |
<input type="radio" name="Gender" value="Male"/>Male |
|
| Which of our consultancy services are you interested in? |
<input type="checkbox" name="XML"/> XML |
|
| Which free gift would you prefer for filling out this survey? |
<select name="FreeGift"> <option value="Choice1">Choice 1</option> <option value="Choice2">Choice 2</option> <option value="Choice3">Choice 3</option> </select> | |
| Enter your comments in the text box |
<textarea name="Comments" rows="5" cols="50"></textarea> | |
<input type="submit" value="Send Form" onclick="CheckCheckboxes()"/> |
||
</form> </body> </html></source>
Reference form element by using the dot notation
<source lang="javascript">
<html> <head> <title>Displaying the value entered in a text field</title> <script type="text/javascript" language="javascript">
</script> </head> <body> <form name="MyForm" action="http://www.wbex.ru/" method="Post" onsubmit="DisplayValue()">
<input type="text" name="MyTextField"/>Enter your name
<input type="submit" value="Click to Submit"/> </form> </body> </html></source>
Writing information to forms.
<source lang="javascript">
<HTML>
<HEAD>
<TITLE>Example of Writing Form Elements</TITLE>
<SCRIPT LANGUAGE="JavaScript">
</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></source>
