JavaScript DHTML/Form Control/Form
Содержание
Add event listener to elements in a form
<source lang="html4strict">
<html> <head> <title></title> <script type="text/javascript"> function writeX(evnt) {
document.write("Capturing" + evnt.target + " " + evnt.currentTarget); return true;
} function setup(evnt) {
document.addEventListener("click",writeX,true); document.forms[0].addEventListener("click",writeX,true); document.forms[0].elements[0].addEventListener("click",writeX,true);
} setup(); </script> <body> <form>
<input type="submit" value="Submit" />
</form> </body> </html>
</source>
Add event listener to form
<source lang="html4strict">
<html> <head> <title></title> <script type="text/javascript"> function writeX(evnt) {
document.write("Capturing" + evnt.target + " " + evnt.currentTarget); return true;
} function setup(evnt) {
document.addEventListener("click",writeX,true); document.forms[0].addEventListener("click",writeX,true); document.forms[0].elements[0].addEventListener("click",writeX,true);
} setup(); </script> <body> <form>
<input type="submit" value="Submit" />
</form> </body> </html>
</source>
Form length
<source lang="html4strict">
<html> <body> <form name="form1" method="post" action="">
<input type="text" name="textfield">
</form> <form name="form2" method="post" action="">
<input type="button" value="Only a sample button" onclick="return false">
</form> <form name="form3" method="post" action="">
<input type="checkbox" name="checkbox" value="checkbox">
</form> <button onclick="function1()">Click here</button> <script language="JavaScript"> function function1() {
var m = document.forms.length; alert("There are "+m+" forms in this document")
} </script> </body> </html>
</source>
Get input value from form control
<source lang="html4strict">
<html> <head>
<title>Just Your Basic Form</title> <script type = "text/javascript"> function alertName() { var name = document.forms[0].nametext.value; if (name == "a") { document.write("a value"); } else if (name == "b") { document.write("b value."); } else { document.write("else: " + name); } return true; } </script>
</head> <body> <form id="myform" action="#" onsubmit="return alertName();">
Username: <input id="nametext" name="username" type="text" />
<input type="submit" />
</form> </body> </html>
</source>
On focus event
<source lang="html4strict">
<HTML> <BODY> <A HREF="http://www.wbex.ru" onMouseOver="window.alert("over!");">wbex!</A>
<FORM>
Phone Number: <INPUT type="text" size="25" onFocus="window.alert("on focus");">
Name: <INPUT type="text" size="25" onBlur="window.alert("focus lost");">
E-mail Address: <INPUT type="text" size="25">
<P>
<INPUT type="button" value="Click Here." onClick="window.alert("on click")";>
</FORM>
</BODY>
</HTML>
</source>
On focus lost event
<source lang="html4strict">
<HTML>
<BODY>
<A HREF="http://www.wbex.ru" onMouseOver="window.alert("over!");">wbex!</A>
<P>
<FORM>
Phone Number: <INPUT type="text" size="25" onFocus="window.alert("on focus");">
Name: <INPUT type="text" size="25" onBlur="window.alert("focus lost");">
E-mail Address: <INPUT type="text" size="25">
<P>
<INPUT type="button" value="Click Here." onClick="window.alert("on click")";>
</FORM>
</BODY>
</HTML>