JavaScript Form event handling method detailed _javascript Tips

Examples of this article for you to share the JavaScript processing form events commonly used methods for your reference, the specific contents are as follows

1, access to the form objects commonly used methods:

①: Based on the id attribute of the <form> element;

var Myform=document.getelementbyid ("Myformid"); Myformid is the ID of a <form> element;

②: According to the <form> element's name attribute;

var myform=document.forms["Myformname"]; Myformname is the name of a <form> element;

③: Use table Single-name to access forms directly:

var myform=document.myformname; Myformname is the name of a <form> element;

2, the form of common events:

①onsubmit Event: This event is triggered when the "submit" button is clicked and may prevent form submission. Example: verification of forms;

②onchange Event: This event is triggered when the user changes the content and the text box loses focus;

Example: Form submission

Front Interface:

The code for the foreground interface:

<form name= "MyForm" action= Javascript:alert (' Registered success! "Method=" POST "onsubmit=" return Yanzheng (); " > <table width= "500px" > <tbody> <tr> <td> user name: </
        td> <td> <input name= "username" id= "username" type= "text"/> </td> &LT;TD align= "Left" > <p style= "color: #FF0000" >* username length between 6-10 </p> </td> </t r> <tr> <td> Password: </td> <td> <input id= "pa ssWOrd "onchange=" Passwordleave () "type=" password "/> </td> <td align=" left "> ;p style= "color: #FF0000" >* <input id= "Button1" type= "button" value= "weak" style= "Background-color: #FF0000"  /> <input id= "Button2" type= "button" value= "style=" Background-color: #FF0000 "/> <input Id= "Button3" type= "button" value= "strong" style= "Background-color: #FF0000"/> <label id= "lavel" ></label> </p> </td
          > </tr> <tr> <td> Age: </td> <td> <input id= "Age" type= "text"/> </td> <td align= "left" > <p style= "color: #F F0000 ">*</p> </td> </tr> <tr> <td> Sex: ;/td> <td> <input name= "Sex" type= "Radio" value= "Male" checked= "checked"/> Male <i Nput name= "Sex" type= "Radio" value= "female"/> Female </td> <td align= "left" > <p style= "Co
        Lor: #FF0000 ">*</p> </td> </tr> <tr> <td> content: </td> <td> <input type= "checkbox" name= "Content" value= "News"/> News <inp UT type= "checkbox" Name="Content" value= "entertainment"/> Entertainment <input type= "checkbox" name= "Content" value= "education"/> Education </td>
      &LT;TD align= "Left" > <p style= "color: #FF0000" >*</p> </td> </tr> <tr> <td> Education: </td> <td> <select name= "Edu_le Vel "style=" width:74px "> <option value=" 1 "> Primary </option> <option value=" 2 "> Middle School & Lt;/option> <option value= "3" > University </option> <option value= "4" > University &LT;/OPTION&G
          T
        </select> </td> <td align= "left" > <p style= "color: #FF0000" >*</p> </td> </tr> <tr> <td> hobby: </td> <t D> <select name= "like" size= "6" "multiple=" multiple "style=" WIDTH:72PX; Height:108px "> &Lt;option value= "1" > Basketball </option> <option value= "2" > Soccer </option> <option valu E= "3" > Volleyball </option> <option value= "4" > Running </option> <option value= "5" > Mountaineering ;/option> <option value= "6" > Bodybuilding </option> </select> </td> & LT;TD align= "Left" > <p style= "color: #FF0000" >*</p> </td> </tr> & lt;tr> <td> <input id= "Button4" type= "button" onclick= "Checkinfo ()" value= "View Information"
        /></td> <td> <input type= "Submit" Name= "Tijiao" value= "registered"/> </td>
    <td> <input type= "reset" name= "reset" value= "reset"/> </td> </tr>
 </tbody> </table> </form>

JS script:

<script type= "Text/javascript" > Function Yanzheng () {var B; var a = document.getElementById ("username");  Gets the username value var p = document.getElementById ("password");  Get password value var age = Myform.age.value; Get age value if (A.value.length < 5 | | a.value.length >) {alert ("The username you entered is malformed!")
           ");
         return false; else if (P.value.length < 5) {alert ("password length is less than 5!")
           ");
         return false;
         else if (!checkage (age)) {return false;
         else {return true;
         } function Checkage (a) {//Detection age Var ch, aged;
           for (var i = 0; i < a.length i++) {ch = A.charat (i); if (Ch < "0" | | | ch > "9") {Alert ("Please enter a number in the Age option!")
             ");
           return false;
         } age = parseint (a); if (Age < | |?? >) {alert ("YearAge is not true!
           ");
         return false;

       return true; function Checkinfo () {//Display all information var username = Myform.username.value;//Get username var passw Ord = Myform.password.value;    Get password var age = Myform.age.value;   Get age var sex = myform.sex;    Get sex var osex = ""; Set a variable to get the sex option var content = Myform.content; Get content var ocontent = "";    Set a variable to get content option var eduleave = Myform.edu_level; Get academic credentials var oedu = "";      Set a variable to get the education option var intersent = myform.like; Get form hobby var olike = "";
             Set a variable to get a hobby for (var i = 0; i < sex.length i++) {//Sex if (sex[i].checked) {
           Osex = Sex[i].value;
             for (var i = 0; i < content.length i++) {//Content if (content[i].checked) {
           Ocontent + + Content[i].value + ""; } for (var i = 0; i <Eduleave.length; i++) {//Education if (Eduleave.selectedindex >= 0) {oedu = Eduleave.options[eduleave.selectedindex]
           . text; for (var i = 0; i < intersent.length i++) {//Hobby if (intersent.options[i].selecte
           D) {olike + + Intersent.options[i].text + ""; } alert ("Your username is: + username +" \ nthe password is: "+ password +" \ n "+ age +" \ n "+" + "sex is:" + osex + "\ n content is:" + OC

       Ontent + "\ n Education is:" + oedu + "\ n interest Hobby for:" + olike);
         function Passwordleave () {var passwordleavel = Myform.password.value;
           if (Passwordleavel.length = = "") {document.getElementById ("Button1"). Style.display = "None";
           document.getElementById ("Button2"). Style.display = "None";
         document.getElementById ("Button3"). Style.display = "None"; } else {if (passwordleavel.length <= "5") {document.getElementById ("Button1"). StYle.display = "";
             document.getElementById ("Button2"). Style.display = "None";
           document.getElementById ("Button3"). Style.display = "None"; else if (passwordleavel.length <= "ten") {document.getElementById ("Button1"). Style.display =
             "";
             document.getElementById ("Button2"). Style.display = "";
           document.getElementById ("Button3"). Style.display = "None";
             else {document.getElementById ("Button1"). Style.display = "";
             document.getElementById ("Button2"). Style.display = "";
           document.getElementById ("Button3"). Style.display = "";
         }} function Startbody () {document.getElementById ("Button1"). Style.display = "None";
         document.getElementById ("Button2"). Style.display = "None";
       document.getElementById ("Button3"). Style.display = "None";
 

 } </script>

This case is just some conventional practice, no technology involved, just for the next convenient use.

The above is the entire content of this article, I hope to learn JavaScript program to help you.