Dieser Artikel zeigt Ihnen die Beispiele der JS -Formgesteuerung für Ihre Referenz. Der spezifische Inhalt ist wie folgt
Beispiel 1: Durch alle Kontrollen der Form iterieren
<script type = "text/javaScript"> // Die Formularfunktion GetValues () {var f = document.forms [0] übertragen; // Formular DOM var Elements abrufen = F.elements; // Alle Steuerarray var str = '' erhalten; // Split String // Loop -Traversal für (var i = 0; i <Elements.length; i ++) {var e = Elemente [i]; // Stromkontrolle str += E. value; // Control -Wert aufgeteilt Str += '/n'; // Trenntrenner} alert (str); // das Ergebnis mit einem Eingabeaufforderungfeld} </script> <form> Textfeld: <Eingabe type = "text" name = "mytext"/> <br/> Radiofeld: <Eingabe type = "radio" name = "myradio" value = "1"/> 1 <Eingabe type = "radio" name = "myradio" value = "2". select == </option> <option value = "1"> 1 </option> <option value = "2"> 2 </option> </select> <br/> <Eingabe type = "schaltet" value = "getValues ()"/> </form>Beispiel 2: Zugriff auf eine bestimmte Steuerung über den Kontrollnamen
<script type = "text/javaScript"> // Zugriff über die Funktion "Steuername" GetFormdom () {var f = document.forms [0]; // Formular DOM var myText = f.mytext; // Kontrolldom mit Namen erhalten // Aufrufen Sie den Kontrollnamen und den Wert Alarm (myText.name + ":" + mytext.value); } </script> <form> Textfeld: <Eingabe type = "text" name = "myText"/> <br/> <Eingabe type = "button" value = "getControl" onclick = "getFormdom ()"/> </form>Beispiel 3: Holen Sie sich die Anzahl der Textfelder im Formular
<script type = "text/javaScript"> // Die Anzahl der Textfelder in der Form -Funktion erhalten, GetInputCount () {var f = document.forms [0]; // das Formular dom var Elements abrufen = f.elements; // Alle Kontrollarray var count = 0 erhalten; // stat die Gesamtzahl // Schleifenquelle für (var i = 0; i <elements.length; i ++) {// Die aktuelle Steuerung var e = Elemente [i]; // Ist es ein Textfeld if (e.tagname == 'input' && e.type == 'text') {count ++; // Die Gesamtzahl wird von selbst hinzugefügt. } </script>Beispiel 4: Einreichungsmethode zum Ändern des Formulars
Das Methodenattribut gibt die HTTP -Methode an (GET oder Post), die beim Senden eines Formulars verwendet wird. Bei der Verwendung von GET sind die Formulardaten in der Seitenadressleiste sichtbar und der Beitrag ist sicherer, da die in der Seitenadressleiste übermittelten Daten unsichtbar sind.
<script type = "text/javaScript"> // Die Funktion der Formularübertragungsmethode modifyMethod () {var f = document.forms [0]; // das Formular DOM var methode abrufen = f.mymethod.Value; // Ausgewählte Methode F.Method = Methode; // Ändern Sie die ausgewählte Einreichungsmethode // Verwenden Sie das Eingabeaufforderungsfeld, um die Ergebniswarnung anzuzeigen ("Die aktuelle Einreichungsmethode des Formulars:" + Methode); } </script> <formmethode = "post"> Bitte wählen Sie die Einreichungsmethode: <select name = "myMethod"> <option value = ""> == Bitte select == </option> <option value = "get"> get </option> <option value = "post"> post </option> </selektieren> <BR/> </option> <options -type ". </form>Beispiel 5: Geben Sie dynamisch die Aktionsattribute des Formulars an
Das Aktionsattribut definiert die von einem Formular gesendete Aktion.
Es ist üblich, Formulare an einen Server zu senden, um die Schaltfläche Senden zu verwenden.
In der Regel werden Formulare auf Webseiten auf dem Webserver übermittelt.
Wenn das Aktionsattribut weggelassen wird, wird die Aktion auf die aktuelle Seite festgelegt.
<script type = "text/javaScript"> // Dynamisch das Aktionsattribut der Formularfunktion modificAction () {var f = document.forms [0]; // Formular dom var newurl = f.newurl.value; // Ausgewählte Methode F.Action = newurl; // Die Aktionsadresse des eingereichten Formulars ändern // Verwenden Sie das Eingabeaufforderungsfeld, um die Ergebniswarnung anzuzeigen ("Die aktuelle Aktion des Formulars:" + F.Action); } </script> <formmethode = "post"> Bitte wählen Sie die Methode Senden: <Eingabe type = "text" name = "newurl"/> <br/> <Eingabe type = "schaltet" value = "modify action" onclick = "modifyAction ()"/> </form>Beispiel 6: Dynamische selektive Fokuskontrolle
<script type = "text/javaScript"> // Das erste Radiofeld ist die Focus -Funktion focusit () {var f = document.forms [0]; // Formular dom var myradio = f.myradio; // Radio -Box Myradio [0] .Focus (); // Das erste Radiofeld erhält Fokus} </script> <form> Textfeld: <Eingabe type = "text" name = "myText"/> <br/> Radiofeld: <Eingabe type = "radio" name = "myradio" value = "1"/> <Eingabe type = "radio" name = "myradio" value = "2"/> <br/> falldown-Liste: <". == </option> <option value = "1"> 1 </option> <option value = "2"> 2 </option> </select> <br/> <Eingabe type = "schaltet" value = "Das erste Radiofeld ist der Fokus" Onclick = "Focusit ()"/> </form>Beispiel 7: Initialisieren Sie die Werte aller Steuerelemente in der Form zum Ausgangszustand
<script type = "text/javaScript"> // initialisieren Sie die Werte aller Steuerelemente in der Form der Ausgangszustandsfunktion init () {var f = document.forms [0]; // das Formular dom f.reset () abrufen; // Reset () Funktion} </script> verwendenBeispiel 8: Batch fügen Sie allen Formularsteuerelementen eine Erklärung hinzu
<script type = "text/javaScript"> // Batch eine Beschreibung für alle Formularsteuerungsfunktionen batchComent () {var f = document.forms [0]; // Formular dom var children = f.childnodes; // Alle untergeordneten Elemente des Formulars erhalten var newarr = []; // neue Elementarray var j = 0 definieren; // Definieren Sie das Index für ein neues Elementarray // Schleifen Sie durch untergeordnete Elemente für (var i = 0; i <chirids.length; i ++) {var e = childhu [i]; // aktuelles untergeordnetes Element Newarr [j ++] = e; // dem Neuarray hinzufügen // Bestimmen Sie, ob es sich um eine Steuerung handelt, wenn (e.Tagname == 'Eingabe' || e.Tagname == 'select') {// einen Knoten mit Textbeschreibung hinzufügen var text = document.createTextNode ("dieses Element ist erforderlich"); newarr [j ++] = text; // Knoten für das neue Array hinzufügen}} // Löschen Sie den vorhandenen Formularinhalt f.innerhtml = ''; // Batch -Beschreibung für (var i = 0; i <newarr.length; i ++) {// Hinzufügen alter Elemente und Beschreibung Knoten in Form F.AppendChild (newarr [i]); }}} </script>Beispiel 9: Verwenden Sie versteckte Steuerelemente, um dem Formular Parameter hinzuzufügen
<script type = "text/javaScript"> // Funktionsfunktion ShowParams () {// Setzen Sie den Wert der versteckten Variablen. Dieser Wert kann auch durch den Wert des Wertes des Tags angegeben werden. Forms [0] .Myhidden.Value = 'Ich bin versteckt'; // Definieren Sie die Variablen des Zeichenspleißens var str = 'Die vom Formular eingereichten Parameter umfassen:'; // Parameter mit geteiltem Jahr str + = '/n Jahr:' + 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; Alarm (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/> <Eingabe type = "button" value = "subieren" onclick = "showParams ();"/> </form>Beispiel 10: Alle Kontrollkästchen überprüfen
<script type = "text/javaScript"> // Überprüfen Sie alle Funktionen für Funktionen (c) {// Alle Kontrollkästchen abrufen var arr = document.getElementsByname ('myName'); if (c) {// Wählen Sie alle Kontrollfelder für (var i = 0; i <arr.Length; i ++) {arr [i]. Checked = true; // auswählen}} else {// ansonsten wählen Sie nicht alle // alle Kontrollfelder übertragen. 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>Beispiel 11: Setzen Sie auffällige Stile für die Fokuskontrollen des Formulars
<script type = "text/javaScript"> Funktion init () {var f = document.forms [0]; // Formular DOM var Elements abrufen = F.elements; // Alle Kontrollarrays erhalten var str = ''; // Split Strings // Loop -Traversal für (var i = 0; i <Elements.length; i ++) {var e = Elemente [i]; // aktuelle Steuerung e.onfocus = function () {// den Stilrückruf für den Fokus definieren // den Rand an rot modifizieren. } e.onblur = function () {// den Fokus this.style.border = ''; // den ursprünglichen Grenzstil wiederherstellen}}}} </script>Das obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, es wird für das Lernen aller hilfreich sein und ich hoffe, jeder wird Wulin.com mehr unterstützen.