JavaScript DHTML/Form Control/Form
Содержание
Add event listener to elements in a form
<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" /><br>
</form>
</body>
</html>
Add event listener to form
<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" /><br>
</form>
</body>
</html>
Form length
<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>
Get input value from form control
<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();">
<p>Username: <input id="nametext" name="username" type="text" /></p>
<p><input type="submit" /></p>
</form>
</body>
</html>
On focus event
<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");">
<BR>
Name: <INPUT type="text" size="25" onBlur="window.alert("focus lost");">
<BR>
E-mail Address: <INPUT type="text" size="25">
<P>
<INPUT type="button" value="Click Here." onClick="window.alert("on click")";>
</FORM>
</BODY>
</HTML>
On focus lost event
<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");">
<BR>
Name: <INPUT type="text" size="25" onBlur="window.alert("focus lost");">
<BR>
E-mail Address: <INPUT type="text" size="25">
<P>
<INPUT type="button" value="Click Here." onClick="window.alert("on click")";>
</FORM>
</BODY>
</HTML>