HTML-Formularwert in JavaScript abrufen
-
Verwendung von
document.formszum Abrufen von HTML-Formularwerten in JavaScript -
Verwendung von
idfür den Zugriff auf HTML-Formularwerte in JavaScript
In JavaScript können wir das id-Attribut eines bestimmten Eingabeelements verwenden, um die Werte abzurufen, oder das name-Attribut auslösen, um auf die Werte zuzugreifen.
Beide Konventionen werden fortfahren, um die Rohdaten vom Benutzer abzurufen. Technisch gesehen besteht das Ziel darin, alle Eingaben eines Benutzers zu erfassen und sicherzustellen, dass der Prozess funktioniert.
Hier arbeiten wir mit dem HTML DOM alias document.forms, um alle Elemente aus dem HTML-Formular abzurufen. Eine kurze Einführung in die verfügbaren Methoden zur Interaktion mit den HTML-Elementen und -Attributen finden Sie hier.
Außerdem verwenden wir in unserem Beispiel die beiläufige Art, die id eines Elements zu identifizieren, um die Informationen daraus abzuleiten.
Verwendung von document.forms zum Abrufen von HTML-Formularwerten in JavaScript
Die Methode document.forms verwendet das name-Attribut, um das Formular und sein Element zu lokalisieren. Taktisch werden alle Werte aus dem Formular über diesen Weg der Initiierung durchgereicht.
Wir werden ein select-Element haben, gefolgt von einem multiplen option-Element. Und wir werden eine Präferenz von dort auswählen, und der Wert wird getrennt.
Später, wenn das document.forms initiiert wird, wird es den getrennten Wert erfassen. Lassen Sie uns den Codeblock auf korrekte Visualisierung überprüfen.
Code-Auszug:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Test</title>
</head>
<body>
<form name="form">
<select name="fruit" id="fruits">
<option value="0">Select Fruit</option>
<option value="mango">Mango</option>
<option value="apple">Apple</option>
<option value="orange">Orange</option>
</select>
<button type = "submit">Hit</button>
</form>
<p id="print"></p>
</body>
</html>
var form = document.forms['form'];
form.onsubmit = function(e) {
e.preventDefault();
var select = document.form.fruit.value;
console.log(select);
document.getElementById('print').innerHTML = select.toUpperCase();
}
Ausgabe:
Wie Sie sehen können, gibt das form-Objekt, das die document.forms-Methode verwendet, um mit den HTML form-Werten zu interagieren, alle Elemente zurück.
Die onsubmit-Methode dient der weiteren Aktion der Arbeit mit diesem ausgewählten Wert. In der Instanz nimmt das select-Objekt den gewünschten Wert mit dem entsprechenden name-Attribut des form- und select-Elements an.
Später haben wir den Wert im Großbuchstabenformat auf die Seite gedruckt.
Verwendung von id für den Zugriff auf HTML-Formularwerte in JavaScript
Für dieses Beispiel verwenden wir die documnet.getElementById und den querySelector, um die Formulareingaben zu steuern.
Die Möglichkeit, dieses Format zu verwenden, ist weit verbreitet und funktioniert ähnlich wie die Methode document.forms. Die folgenden Codezeilen demonstrieren also die Vorschau.
Code-Auszug:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Test</title>
</head>
<body>
<form name="form" id="forms">
Enter name:
<input type="text" id="name">
<input type="button" value=" Click Up">
</form>
<p id="print"></p>
</body>
</html>
var form = document.getElementById('forms');
form.onclick = function(e) {
e.preventDefault();
var name = document.getElementById('name').value;
console.log(name);
document.getElementById('print').innerHTML = name.toUpperCase();
}
Ausgabe:
Das Formular, auf das das Objekt form in JavaScript zugreift, und der Wert der Eingabe wurde ebenfalls von der .value-Methode abgeleitet.
Im vorherigen Beispiel haben wir das button-Element verwendet, um die Eingabe zu senden, und hier haben wir die Eingabetyp-Schaltfläche verwendet, um die Übermittlung durchzuführen.
Der Unterschied besteht hier nur in onsubmit und onclick, beide funktionieren ähnlich.
