Wie Sie HTML-Formulare ohne einen server

Würden Sie nicht auf die übergabe der Parameter. Sie hätte "onsubmit" - Aufruf einer javascript-Funktion, und dann innerhalb der Funktion verwendet javascript, um den Zugriff auf die eigentlichen Kontrollen, die der Benutzer ausgewählt hat. Können Sie mit der GetElementById-Funktion zum abrufen eines bestimmten Elements, und bestimmen Sie den Wert des Elements.

Wenn alles, was Sie tun wollte, war, ändern Sie die Hintergrundfarbe, könntest du javascript verwenden, ändern Sie die Hintergrundfarbe-Eigenschaft des body-tag oder alle Tags auf der Seite.

Würden Sie daran denken müssen, false zurück von Ihrer Funktion, wenn-sonst würde das Format eingereicht werden.

InformationsquelleAutor Cynthia

Den grundlegenden Veranstaltung, die Sie gehen, um zu suchen, ist die form submit Veranstaltung. Wenn Sie in Ordnung sind nur mit Hilfe von event-Handlern können Sie nur so etwas tun:

var myForm = document.getElementById('myForm');
myForm.onsubmit = function () {
    //...
};

Weil Sie nur mit Hilfe von JavaScript, die Sie nicht möchten, dass das Formular tatsächlich abschicken. (Seite Punkt: Da bist du mit JS sollte man nur auf das Formular und fügen Sie es auf die Seite mit JS, aber das ist ein ganz anderes Thema.) Sie können Abbrechen, die form ist Standard-Aktion etwa so:

myForm.onsubmit = function () {
    //...
    return false;
};

Bevor wir in den Zugriff auf Daten, stellen Sie sicher, dass Sie greifen die Elemente, die Sie gehen zu müssen. Es macht die Dinge ein wenig schneller, weil Sie nicht haben, wählen Sie das gesamte element aus dem DOM jedes mal, wenn das Formular abgeschickt wird. Zum Beispiel:

var myForm = document.getElementById('myForm'),
    myTextField = document.getElementById('myTextField'),
    mySelectBox = document.getElementById('mySelectBox'),
    //...

Je nachdem, welche Art von Formular-Elemente, die Sie haben, gibt es verschiedene Möglichkeiten, um auf Ihre Daten zugreifen. Textfelder, Textbereiche, Auswahlfelder, sind sehr einfach:

var textValue = myTextField.value,
    selectValue = mySelectBox.value;

Radio-buttons und check-Boxen sind ein wenig komplizierter, weil Sie haben zu gehen durch jeden einzelnen und sehen, welche man(N) wird/werden überprüft, und die man(N) nicht/sind nicht, wie so:

var isOneChecked = checkboxOne.checked,
    isTwoChecked = checkboxTwo.checked;

Gehen mit Ihrem Beispiel von blau/rosa hintergrund, würden Sie wahrscheinlich wollen etwas ähnliches wie das hier:

var myForm = document.getElementById('myForm'),
    maleBox = document.getElementById('maleBox');

myForm.onsubmit = function () {
    var isMale = maleBox.checked;
    if (isMale) {
        document.body.style.backgroundColor = 'manlyBlue';
    } else {
        document.body.style.backgroundColor = 'sexistPink';
    }
};

Hinweise

Wenn Sie tun entscheiden, zu gehen mit dem event-Handler, im Hinterkopf behalten, dass nur eine angewendet werden kann, um Ihre form zu einem Zeitpunkt. Wenn Sie möchten, fügen Sie eine andere Funktion, um die submit Veranstaltung, die Sie gehen müssen mit event Zuhörer, das ist eine ganz andere ball-Spiel und präsentiert seine eigenen Probleme mit sich.

Das Letzte Beispiel prüft nur den Wert von "ich bin ein Kerl" - element, denn (vermutlich), Sie sind über radio-buttons und Sie haben nur zwei Optionen. Wenn "ich bin ein Kerl" nicht aktiviert ist, dann sollte der andere sein. Aber wenn die form beginnt mit weder option aktiviert haben, dann könnte als ein bug.

Das Letzte Beispiel verwendet auch die inline-styles zu ändern der Körper die Hintergrundfarbe. Es schmerzte mich zu geben. Ein viel erträglicher Methode zum hinzufügen/entfernen von Klassen wie nötig, aber wieder, das ist eine Art, über den Rahmen dieser Frage.

InformationsquelleAutor sdleihssirhc

Wenn Ihr Wunsch ist zu Durchlaufen, Formular-Elemente mit Hilfe von Javascript können Sie dies ganz einfach mit dem DOM-da die form haben length Eigenschaft und jede input vertreten sein wird als index für dieses array-artiges Objekt:

Also für:

<form id="f" action="">
    Male<input type="radio" name="gender" value="male" />
    Female<input type="radio" name="gender" value="female" />
    <input type="submit" value="submit" />
</form>

Könnte man etwas wie das hier tun:

var f = document.getElementById('f');

f.onsubmit = function (e) {
    e = e || window.event;
    var et = e.target || e.srcElement,
        gender;

    if (e.preventDefault) { e.preventDefault(); } else { e.returnValue = false; }

    for (var i = 0, il = et.length; i < il; i++) {
        if (et[i].name = 'gender' && et[i].checked) {
            gender = et[i].value;
        }
    }

    if (gender == 'male') {
        document.body.style.backgroundColor = 'cyan';
    } else if (gender) {
        document.body.style.backgroundColor = 'pink';
    }
};

Siehe Beispiel →

InformationsquelleAutor mVChr