JavaScript DHTML/Form Control/Form

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

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>


</source>