JavaScript form control instance explain _javascript tips

This article examples for you to share JS form control multiple instances for your reference, the specific content as follows

instance one: traversing all controls of a form

<script type= "Text/javascript" >//Traverse form for all control function getValues () {var f = document.forms[0];   Gets the form dom var elements = f.elements;            Gets all the control arrays var str = ';      concatenation string//loop traversal for (var i=0; i<elements.length; i++) {var e = elements[i];       The current control str = E.value;          The value of the concatenation control is str = ' \ n ';           Stitching separator} alert (str); Show results with balloon </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" Val Ue= "2"/>2 <br/> drop-down list: <select name= "Myselect" > <option value= "" >== Please select ==< /option> <option value= "1" >1</option> <option value= "2" >2</option> </s elect> <br/> <input type= "button" value= "gets the value of all controls" onclick= "GetValues ()"/> </Form>
 

instance two: accessing a specific control through a control name

<script type= "Text/javascript" >
  //access to a specific control
  function Getformdom () {
    var f = document.forms[0] by a control name;     Gets the form Dom
    var myText = f.mytext;     Gets
    the name and value alert of the control DOM//Hint control
    (mytext.name + ":" + Mytext.value) by
  first names;
</script>


<form>     
      text box:
      <input type= "text" name= "MyText"/>
      <br/>
      <input type= "button" value= "Fetch control" onclick= "Getformdom ()"/>
</form>

instance three: gets the number of text boxes inside a form

<script type= "Text/javascript" >
  //Get the number of text boxes inside a form
  getinputcount () {
    var f = document.forms[0] ;     Gets the form Dom
    var elements = f.elements;   Gets all of the control array
    var count = 0;         Total statistics
    //Loop traversal for
    (var i=0; i<elements.length; i++) {
      //current control
      var e = elements[i];      
      is the text box if
      (e.tagname = = ' INPUT ' && e.type = = ' text ') {  
        count++;        Total number from
      add
    }
    ///Show results with prompt box
    alert (The text box has: + Count + "a"); 
  }
</script>

Example four: modifying the submission method for a form

The method property stipulates the HTTP methods (get or POST) that are used when the form is submitted, and when you use GET, the form data is visible in the page address bar, and the POST is more secure because the data submitted in the page address bar is not visible.

<script type= "Text/javascript" >
      //Modify the form's Submit method
      function Modifymethod () {
        var f = document.forms[0];     Gets the form Dom
        var method = F.mymethod.value;//
        F.method = methods;       Modify the selected submission method
        //Show the result alert with
        the prompt ("the form's current submission method:" + methods);
      }
    </script>


<form method= "POST" >
      Please select Submit 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 Submit Method" Onclick= "Modifymethod ()"/>
    </form>

instance Five: dynamically specifying action properties for a form

The Action property defines the actions that are performed when the form is submitted.
The common practice of submitting forms to the server is to use the Submit button.
Typically, a form is submitted to a Web page on a server.
If the Action property is omitted, the action is set to the current page.

<script type= "Text/javascript" >
      //Dynamically Specify Action Property function for form
      modifyaction () {
        var f = document.forms[0];   Gets the form Dom
        var newurl = f.newurl.value;  The Choice method
        f.action = Newurl;     Modify the action address of the submitting form
        //show the result alert with the prompt
        ("Current action of the form:" + f.action);
      }
    </script>


<form method= "POST" >      
      Please select Submit method:
      <input type= "text" name= "
      newurl"/> <br/>
      <input type= "button" value= "Modify submit Action" onclick= "Modifyaction ()"/>
    </form>

Example Six: dynamically selecting a focused control

<script type= "Text/javascript" >
      //The first radio box is the focus
      function Focusit () {
        var f = document.forms[0];   Gets the form Dom
        var myradio = F.myradio;    Get the Radio Box
        Myradio[0].focus ();     The first radio box gets the 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/> dropdown
      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= "First radio box focus" onclick = "focusit ()"/>
    </form>

Instance VII: initializes the values of all controls in the form to the original state

<script type= "Text/javascript" >
      //Initializes the values of all controls in the form to the original state
      function init () {
        var f = document.forms[0];   Gets the form Dom
        F.reset ();         Use the Reset () function
      }
</script>

Example Eight: add a description for all form controls in bulk

<script type= "Text/javascript" >
  //Bulk Add one description for all form controls
  function Batchcomment () {
    var f = document.forms [0];     Gets the form Dom
    var children = f.childnodes;    Gets all child elements of the form
    var newArr = [];          Defines the new element array
    var j = 0;           Defines subscript//loop traversal for the new element array for
    (var i=0; i<children.length; i++) {
      var e = children[i];      Current child element
      newarr[j++] = e;      Add to new array
      //To determine if the control if
      (e.tagname = = ' INPUT ' | | | e.tagname = = ' SELECT ') {
        //Add a text description of the node
        var text = document.createTextNode ("This must be filled out");
        Newarr[j++] = text;   Join node for new array
      }
    //Empty existing form content
    f.innerhtml = ';        
    Batch plus description for
    (var i=0; i<newarr.length; i++) {
      //Add old element and Description node to form
      F.appendchild (Newarr[i]);    
    }
</script>

Example nine: use a hidden control to add parameters to a form

<script type= "Text/javascript" >//Display function functions for form parameters Showparams () {//Set the value of the hidden variable, which can also be passed through the label Val
        UE Specifies document.forms[0].myhidden.value = ' I am hidden ';
        Define character concatenation variable var str = ' form will submit parameters including: ';
        Stitching year parameter str + + year: ' + document.forms[0].myyear.value;
        Splicing name Parameters str = ' \ n Name: ' + document.forms[0].myname.value;
        Stitching hidden Parameters str + = ' \ n Hidden variables: ' + document.forms[0].myhidden.value;     alert (str);
      Display character value} </script> <form> <input type= "hidden" name= "Myhidden"/> Year: <select name= "Myyear" > <option value= "a" >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= "mention Turn "onclick=" showparams (); />
    </form>

 

Instance ten: all check boxes are checked

<script type= "Text/javascript" >   
      //tick all function functions
      Checkall (c) {
        //Get all checkboxes
        var arr = Document.getelementsbyname (' myname ');
        if (c) {//   whether
          to select all//traverse all check boxes for
          (Var i=0;i<arr.length;i++) {
            arr[i].checked = true;//checked
          }
        }else{   //Otherwise, all uncheck
          //Traverse all check boxes for
          (Var i=0;i<arr.length;i++) {
            arr[i].checked = false;// Uncheck
          }}
</script>  


<form>     
      your interest:<br>
      <input type= " CheckBox "Name=" Myall "onclick=" Checkall (this.checked) "/> Select all <br>
      <input type=" checkbox "Name=" MyName "/> Select
      <input type= checkbox" name= "MyName"/> Select <input "
      checkbox" type= "Name="/ > select All
</form>

Example 11: set the eye-catching style for the focus control of the form

<script type= "Text/javascript" >   
      function init () {
        var f = document.forms[0];   Gets the form Dom
        var elements = f.elements;   Gets all the control arrays
        var str = ';          Concatenation string
        //Loop traversal for
        (var i=0; i<elements.length; i++) {
          var e = elements[i];    Current control
          E.onfocus = function () {   //define focused style callback
            //modify border is red
            this.style.border = ' 1px solid red '; 
          }
          E.onblur = function () {   //Lost focus callback
            This.style.border = ';//restore original Border Style}}
          }
</ Script>

The above is the entire content of this article, I hope to help you learn, but also hope that we support the cloud habitat community.