JavaScript DHTML/Form Control/Form

Материал из Web эксперт
Перейти к: навигация, поиск

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>
Источник — «http://wbex.ru/index.php?title=JavaScript_DHTML/Form_Control/Form&oldid=2515»