http://wbex.ru/index.php?action=history&feed=atom&title=JavaScript_Tutorial%2FForm%2FElements
JavaScript Tutorial/Form/Elements - История изменений
2026-04-04T11:33:51Z
История изменений этой страницы в вики
MediaWiki 1.30.0
http://wbex.ru/index.php?title=JavaScript_Tutorial/Form/Elements&diff=9139&oldid=prev
Admin: 1 версия
2010-05-26T08:24:50Z
<p>1 версия</p>
<table class="diff diff-contentalign-left" data-mw="interface">
<tr style="vertical-align: top;" lang="ru">
<td colspan="1" style="background-color: white; color:black; text-align: center;">← Предыдущая</td>
<td colspan="1" style="background-color: white; color:black; text-align: center;">Версия 08:24, 26 мая 2010</td>
</tr><tr><td colspan="2" style="text-align: center;" lang="ru"><div class="mw-diff-empty">(нет различий)</div>
</td></tr></table>
Admin
http://wbex.ru/index.php?title=JavaScript_Tutorial/Form/Elements&diff=9138&oldid=prev
в 18:52, 25 мая 2010
2010-05-25T18:52:56Z
<p></p>
<p><b>Новая страница</b></p><div>== Accessing and Writing Information==<br />
<br />
<p>The form object contains an elements array.</p><br />
<p>The elements array are indexed in the order they appear, and you can access a specific element by its NAME instead of index number.</p><br />
<p>Using Different Methods of Accessing Form Elements</p><br />
<br />
<br />
<br />
<!-- start source code --><br />
<br />
<source lang="javascript"><br />
<HTML><br />
<HEAD><br />
<TITLE>Example of Accessing Form Elements</TITLE><br />
<SCRIPT LANGUAGE="JavaScript"><br />
<!--<br />
function showCar(){<br />
var car = document.pref.elements[0].value;<br />
alert("Your favorite car is: " + car);<br />
}<br />
function showColor(){<br />
var color = document.pref.color.value;<br />
alert("Your favorite color is: " + color);<br />
}<br />
// End hide--><br />
</SCRIPT><br />
</HEAD><br />
<BODY><br />
<FORM NAME="pref" METHOD=POST><br />
Enter the name of your favorite car:<br />
<INPUT TYPE="text" NAME="car" SIZE=25><br />
<INPUT TYPE="BUTTON" NAME="carButton" VALUE="Show Car" onClick="showCar(this.form)"><br />
<BR><br />
Enter your favorite color:<br />
<INPUT TYPE="text" NAME="color" SIZE=15><br />
<INPUT TYPE="BUTTON" NAME="colorButton" VALUE="Show Color" onClick="showColor(this.form)"><br />
</FORM><br />
</BODY><br />
</HTML></source><br />
<br />
<br />
<br />
== Check Form element type==<br />
<br />
<br />
<br />
<br />
<!-- start source code --><br />
<br />
<source lang="javascript"><br />
<html><br />
<head><br />
<title>Online Survey</title><br />
<script type="text/javascript" language="javascript"><br />
<!-- //<br />
function CheckCheckboxes(){<br />
var elLength = document.MyForm.elements.length;<br />
for (i=0; i<elLength; i++)<br />
{<br />
var type = MyForm.elements[i].type;<br />
if (type=="checkbox" && MyForm.elements[i].checked){<br />
alert("Form element in position " + i + " is of type checkbox and is checked.");<br />
}<br />
else if (type=="checkbox") {<br />
alert("Form element in position " + i + " is of type checkbox and is not checked.");<br />
}<br />
else {<br />
}<br />
}<br />
}<br />
// --><br />
</script><br />
</head><br />
<body><br />
<form action="http://www.wbex.ru" method="POST" name="MyForm"><br />
<table width="600"><br />
<tr><th colspan="3" align="center">Online Survey<br /><br /></th><br />
</tr><br />
<tr><br />
<td>Your Name:</td><br />
<td>&nbsp;</td><br />
<td><input type="text" name="YourName"/></td></tr><br />
<tr><br />
<td>Your Gender:</td><br />
<td>&nbsp;</td><br />
<td><br />
<input type="radio" name="Gender" value="Male"/>Male<br /><br />
<input type="radio" name="Gender" value="Female"/>Female<br /><br />
</td><br />
</tr><br />
<tr><td>Which of our consultancy <br />services are you interested in?</td><br />
<td align="right">&nbsp;<br />
</td><br />
<td><br />
<input type="checkbox" name="XML"/>&nbsp;XML<br /><br />
<input type="checkbox" name="XSLT"/>&nbsp;XSLT<br /><br />
<input type="checkbox" name="SVG"/>&nbsp;SVG<br /><br />
<input type="checkbox" name="XSL-FO"/>&nbsp;XSL-FO<br /><br />
<input type="checkbox" name="XForms"/>&nbsp;XForms<br /><br />
</td><br />
</tr><br />
<tr><br />
<td>Which free gift would you prefer for filling out this survey?</td><br />
<td>&nbsp;</td><br />
<td><br />
<select name="FreeGift"><br />
<option value="Choice1">Choice 1</option><br />
<option value="Choice2">Choice 2</option><br />
<option value="Choice3">Choice 3</option><br />
</select><br />
</tr><br />
<tr><br />
<td>Enter your comments in<br />the text box<br />
</td><br />
<td>&nbsp;</td><br />
<td><textarea name="Comments" rows="5" cols="50"></textarea></td><br />
</tr><br />
<tr><br />
<td>&nbsp;</td><br />
<td>&nbsp;</td><br />
<td><br /><input type="submit" value="Send Form" onclick="CheckCheckboxes()"/></td><br />
</tr><br />
</table><br />
</form><br />
</body><br />
</html></source><br />
<br />
<br />
<br />
== Loop through all elements in a form==<br />
<br />
<br />
<br />
<br />
<!-- start source code --><br />
<br />
<source lang="javascript"><br />
<html><br />
<head><br />
<title>Online Survey</title><br />
<script type="text/javascript" language="javascript"><br />
<!-- //<br />
function CheckCheckboxes(){<br />
var elLength = document.MyForm.elements.length;<br />
for (i=0; i<elLength; i++)<br />
{<br />
var type = MyForm.elements[i].type;<br />
if (type=="checkbox" && MyForm.elements[i].checked){<br />
alert("Form element in position " + i + " is of type checkbox and is checked.");<br />
}<br />
else if (type=="checkbox") {<br />
alert("Form element in position " + i + " is of type checkbox and is not checked.");<br />
}<br />
else {<br />
}<br />
}<br />
}<br />
// --><br />
</script><br />
</head><br />
<body><br />
<form action="http://www.wbex.ru" method="POST" name="MyForm"><br />
<table width="600"><br />
<tr><th colspan="3" align="center">Online Survey<br /><br /></th><br />
</tr><br />
<tr><br />
<td>Your Name:</td><br />
<td>&nbsp;</td><br />
<td><input type="text" name="YourName"/></td></tr><br />
<tr><br />
<td>Your Gender:</td><br />
<td>&nbsp;</td><br />
<td><br />
<input type="radio" name="Gender" value="Male"/>Male<br /><br />
<input type="radio" name="Gender" value="Female"/>Female<br /><br />
</td><br />
</tr><br />
<tr><td>Which of our consultancy <br />services are you interested in?</td><br />
<td align="right">&nbsp;<br />
</td><br />
<td><br />
<input type="checkbox" name="XML"/>&nbsp;XML<br /><br />
<input type="checkbox" name="XSLT"/>&nbsp;XSLT<br /><br />
<input type="checkbox" name="SVG"/>&nbsp;SVG<br /><br />
<input type="checkbox" name="XSL-FO"/>&nbsp;XSL-FO<br /><br />
<input type="checkbox" name="XForms"/>&nbsp;XForms<br /><br />
</td><br />
</tr><br />
<tr><br />
<td>Which free gift would you prefer for filling out this survey?</td><br />
<td>&nbsp;</td><br />
<td><br />
<select name="FreeGift"><br />
<option value="Choice1">Choice 1</option><br />
<option value="Choice2">Choice 2</option><br />
<option value="Choice3">Choice 3</option><br />
</select><br />
</tr><br />
<tr><br />
<td>Enter your comments in<br />the text box<br />
</td><br />
<td>&nbsp;</td><br />
<td><textarea name="Comments" rows="5" cols="50"></textarea></td><br />
</tr><br />
<tr><br />
<td>&nbsp;</td><br />
<td>&nbsp;</td><br />
<td><br /><input type="submit" value="Send Form" onclick="CheckCheckboxes()"/></td><br />
</tr><br />
</table><br />
</form><br />
</body><br />
</html></source><br />
<br />
<br />
<br />
== Reference form element by using the dot notation==<br />
<br />
<br />
<br />
<br />
<!-- start source code --><br />
<br />
<source lang="javascript"><br />
<html><br />
<head><br />
<title>Displaying the value entered in a text field</title><br />
<script type="text/javascript" language="javascript"><br />
<!-- //<br />
function DisplayValue(){<br />
if(document.MyForm.MyTextField.value!==""){<br />
alert("The value entered was \n" + document.MyForm.MyTextField.value);<br />
}<br />
else{<br />
alert("The text field was empty!\nPlease enter your name.");<br />
}<br />
}<br />
// --><br />
</script><br />
</head><br />
<body><br />
<form name="MyForm" action="http://www.wbex.ru/" method="Post" onsubmit="DisplayValue()"><br />
<input type="text" name="MyTextField"/><P>Enter your name</p><br />
<input type="submit" value="Click to Submit"/><br />
</form><br />
</body><br />
</html></source><br />
<br />
<br />
<br />
== Writing information to forms.==<br />
<br />
<br />
<br />
<br />
<!-- start source code --><br />
<br />
<source lang="javascript"><br />
<HTML><br />
<HEAD><br />
<TITLE>Example of Writing Form Elements</TITLE><br />
<SCRIPT LANGUAGE="JavaScript"><br />
<!--<br />
function checkText(){<br />
if( document.FormExample3.textbox.value == "AAA"){<br />
alert("You are correct!");<br />
} else {<br />
document.FormExample3.textbox.value = "AAA";<br />
alert("That is incorrect. The correct answer is now in the text box.");<br />
}<br />
}<br />
// End hide--><br />
</SCRIPT><br />
</HEAD><br />
<BODY><br />
<FORM NAME="FormExample3" METHOD=POST><br />
Input <INPUT TYPE="text" NAME="textbox" SIZE=25><br />
<INPUT TYPE="BUTTON" NAME="Bugs" VALUE="Submit" onClick="checkText(this.form)"><br />
</FORM><br />
</BODY><br />
</HTML></source></div>