This article shows you the examples of the js form control for your reference. The specific content is as follows
Example 1: Iterate through all controls of the form
<script type="text/javascript"> //Transf the form function getValues(){ var f = document.forms[0]; //Get form DOM var elements = f.elements; //Get all control array var str = ''; //Split string//Loop traversal for(var i=0; i<elements.length; i++){ var e = elements[i]; //Current control str += e.value; //Split control value str += '/n'; //Split separator} alert(str); //Show the result with a prompt box}</script><form> Text box: <input type="text" name="myText"/> <br/> Radio box: <input type="radio" name="myRadio" value="1"/>1 <input type="radio" name="myRadio" value="2"/>2 <br/> Drop-down list: <select name="mySelect"> <option value="">==Please select ==</option> <option value="1">1</option> <option value="2">2</option> </select> <br/> <input type="button" value="getValues()"/></form>Example 2: Accessing a specific control through the control name
<script type="text/javascript"> //Access specific control through the control name function getFormDom(){ var f = document.forms[0]; //Get form DOM var myText = f.myText; //Get control DOM by name //Prompt the control name and value alert(myText.name + " : " + myText.value); }</script><form> Text box: <input type="text" name="myText"/> <br/> <input type="button" value="getControl" onclick="getFormDom()"/></form>Example 3: Get the number of text boxes in the form
<script type="text/javascript"> //Get the number of text boxes in the form function getInputCount(){ var f = document.forms[0]; //Get the form DOM var elements = f.elements; //Get all control array var count = 0; //Stat the total number//Loop traversal for(var i=0; i<elements.length; i++){ //The current control var e = elements[i]; //Is it a text box if(e.tagName == 'INPUT' && e.type == 'text'){ count++; //The total number is added by itself} } //Use prompt box to display the result alert("Text box has a total of: " + count + "s"); }</script>Example 4: Submission method for modifying the form
The method attribute specifies the HTTP method (GET or POST) used when submitting a form. When using GET, the form data is visible in the page address bar, and POST is more secure because the data submitted in the page address bar is invisible.
<script type="text/javascript"> //Modify the form submission method function modifyMethod(){ var f = document.forms[0]; //Get the form DOM var method = f.myMethod.value; //Selected method f.method = method; //Modify the selected submission method//Use the prompt box to display the result alert("The current submission method of the form: " + method); } </script><form method="post"> Please select the submission method: <select name="myMethod"> <option value="">==Please select ==</option> <option value="get">get</option> <option value="post">post</option> </select> <br/> <input type="button" value="Modify the submission method" onclick="modifyMethod()"/> </form>Example 5: Dynamically specify the action attributes of the form
The action attribute defines the action performed when submitting a form.
It is common practice to submit forms to a server to use the submit button.
Typically, forms are submitted to web pages on the web server.
If the action attribute is omitted, the action will be set to the current page.
<script type="text/javascript"> //Dynamicly specify the action attribute of the form function modifyAction(){ var f = document.forms[0]; //Get form DOM var newURL = f.newURL.value; //Selected method f.action = newURL; //Modify the action address of the submitted form//Use the prompt box to display the result alert("The current action of the form: " + f.action); } </script><form method="post"> Please select the submit method: <input type="text" name="newURL"/> <br/> <input type="button" value="Modify submit Action" onclick="modifyAction()"/> </form>Example 6: Dynamic Selective Focus Control
<script type="text/javascript"> //The first radio box is the focus function focusIt(){ var f = document.forms[0]; //Get form DOM var myRadio = f.myRadio; //Get radio box myRadio[0].focus(); //The first radio box gets focus}</script><form> Text box: <input type="text" name="myText"/> <br/> Radio box: <input type="radio" name="myRadio" value="1"/> <input type="radio" name="myRadio" value="2"/> <br/> Drop-down list: <select name="mySelect"> <option value="">==Please select ==</option> <option value="1">1</option> <option value="2">2</option> </select> <br/> <input type="button" value="The first radio box is the focus" onclick="focusIt()"/> </form>Example 7: Initialize the values of all controls in the form to the initial state
<script type="text/javascript"> //Initialize the values of all controls in the form to the initial state function init(){ var f = document.forms[0]; //Get the form DOM f.reset(); //Use reset() function}</script>Example 8: Batch add an explanation to all form controls
<script type="text/javascript"> //Batch a description for all form controls function batchComment(){ var f = document.forms[0]; //Get form DOM var children = f.childNodes; //Get all child elements of the form var newArr = []; //Define new element array var j = 0; //Define subscript for new element array//Loop through child elements for(var i=0; i<children.length; i++){ var e = children[i]; //Current child element newArr[j++] = e; //Add to the new array//Determine whether it is a control if(e.tagName == 'INPUT' || e.tagName == 'SELECT'){ //Add a node with text description var text = document.createTextNode(" this item is required"); newArr[j++] = text; //Add nodes for the new array} } //Clear the existing form content f.innerHTML = ''; //Batch description for(var i=0; i<newArr.length; i++){ //Add old elements and description nodes into form f.appendChild(newArr[i]); } } }</script>Example 9: Use hidden controls to add parameters to the form
<script type="text/javascript"> //Function function showParams(){ //Set the value of the hidden variable. This value can also be specified through the value of the tag's value document.forms[0].myhidden.value = 'I am hidden'; //Define the character splicing variable var str = 'The parameters submitted by the form include: '; //Split year parameter str += '/n Year:' + document.forms[0].myyear.value; //Split name parameter str += '/n Name:' + document.forms[0].myname.value; //Split hidden parameter str += '/nHide variable:' + document.forms[0].myhidden.value; alert(str); //Display the value of the character} </script> <form> <input type="hidden" name="myhidden"/> Year: <select name="myyear"> <option value="2012">2012</option> <option value="2013">2013</option> <option value="2014">2014</option> </select> <br/><br/> Name: <input type="text" name="myname"/> <br/><br/> <input type="button" value="Submit" onclick="showParams();"/> </form>Example 10: Check all check boxes
<script type="text/javascript"> //Check all functions function checkAll(c){ //Get all check boxes var arr = document.getElementsByName('myname'); if(c){ //Select all check boxes for(var i=0;i<arr.length;i++){ arr[i].checked = true;//Select } }else{ //Otherwise, don't select all //Transfer all check boxes for(var i=0;i<arr.length;i++){ arr[i].checked = false;//Don't select} } } }</script> <form> Your interests: <br> <input type="checkbox" name="myall" onclick="checkAll(this.checked)"/>Select all<br> <input type="checkbox" name="myname" />Select all<input type="checkbox" name="myname" />Select all<input type="checkbox" name="myname" />Select all</form>Example 11: Set eye-catching styles for the focus controls of the form
<script type="text/javascript"> function init(){ var f = document.forms[0]; //Get form DOM var elements = f.elements; //Get all control arrays var str = ''; //Split strings//Loop traversal for(var i=0; i<elements.length; i++){ var e = elements[i]; //Current control e.onfocus = function(){ //Define the style callback for focus//Modify the border to red this.style.border = '1px solid red'; } e.onblur = function(){ //Calling the focus this.style.border = ''; //Restore the original border style} } } }</script>The above is all the content of this article. I hope it will be helpful to everyone's learning and I hope everyone will support Wulin.com more.