This article shares the common methods of javascript for processing form events for your reference. The specific content is as follows
1. Common methods to access form objects:
①: According to the id attribute of the <form> element;
var myform=document.getElementById("myformid"); //myformid is the ID of a <form> element;
②: According to the name attribute of the <form> element;
var myform=document.forms["myformname"]; //myformname is the name of a <form> element;
③: Use the form name directly to access the form:
var myform=document.myformname; //myformname is the name of a <form> element;
2. Common events for forms:
① onsubmit event: This event will be triggered when clicking the "Submit" button and may prevent form submission. Example: Verification of forms;
②onchange event: This event is triggered when the user changes content and the text box loses focus;
Example: Form Submission
Front desk interface:
Foreground interface code:
<form name="myform" action="javascript:alert('Registered successfully!');" method="post" onsubmit="return yanzheng();"> <table> <tbody> <tr> <td> Username: </td> <td> <input name="username" id="username" type="text" /> </td> <td align="left"> <p style="color: #FF0000">*Username length is between 6-10</p> </td> </tr> <tr> <td> Password: </td> <td> <input id="password" 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="medium" 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> <input id="age" type="text" /> </td> <td> <p style="color: #FF0000">*</p> </td> </tr> <tr> <td> Gender: </td> <td> <input name="sex" type="radio" value="male" checked="checked" /> Male<input name="sex" type="radio" value="female"/> Female</td> <td> align="left"> <p style="color: #FF0000">*</p> </td> </tr> <tr> <td> Content: </td> <td> <input type="checkbox" name="content" value="News" />News<input type="checkbox" name="content" value="Entertainment" />Entertainment<input type="checkbox" name="content" value="Education" />Entertainment</td> <td align="left"> <p style="color: #FF0000">*</p> </td> </tr> <tr> <td> Education: </td> <td> <select name="edu_level"> <option value="1">Elementary School</option> <option value="2">Senior School</option> <option value="3">University</option> <option value="4">University</option> </select> </td> <td align="left"> <p style="color: #FF0000">*</p> </td> </tr> <tr> <td> Hobbies: </td> <td> <select name="like" size="6" multiple="multiple" > <option value="1">Basketball</option> <option value="2">Football</option> <option value="3">Volleyball</option> <option value="4">Running</option> <option value="5">Hilling</option> <option value="6">Fitness</option> </select> </td> <td align="left"> <p style="color: #FF0000">*</p> </td> </tr> <tr> <td> <input id="Button4" type="button" onclick="checkinfo()" value="View information" /></td> <td> <input type="submit" name="tijiao" value="Register" /> </td> <td> <input type="submit" name="tijiao" value="Register" /> </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"); //Get 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 > 10) { alert("The username you entered is incorrect format!"); 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) { //Check age var ch, age; for (var i = 0; i < a.length; i++) { ch = a.charAt(i); if (ch < "0" || ch > "9") { alert("Please enter the number in the age option!"); return false; } } age = parseInt(a); if (age < 10 || age > 100) { alert("Age is not true!"); return false; } return true; } function checkinfo() { //Show all information var username = myform.username.value; //Get username var password = myform.password.value; //Get password var age = myform.age.value; //Get age var sex = myform.sex; //Get gender var osex = ""; //Set an option to get gender var content = myform.content; //Get content var ocontent = ""; //Set an option to get content var eduleave = myform.edu_level; //Get education var oedu = ""; //Set an option to get education var intersent = myform.like; //Get form hobby var like = ""; //Set a variable to get hobby option for (var i = 0; i < sex.length; i++) { //Gender 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++) { //Educational if (eduleave.selectedIndex >= 0) { oedu = eduleave.options[eduleave.selectedIndex].text; } } for (var i = 0; i < intersent.length; i++) { //Hobbies if (intersent.options[i].selected) { olike += intersent.options[i].text + " "; } } alert("Your username is: " + username + "/n Password is: " + password + "/n Age is: " + age + "/n Gender is: " + ocontent + "/n Education is: " + oedu + "/n Hobbies are: " + 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 <= "10") { 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 a few common practices and does not involve any technology, but is just for the convenience of using next time.
The above is all about this article, I hope it will be helpful for everyone to learn JavaScript programming.