Thema in Kurzform
In diesem Tutorial zeigen wir dir, wie du Benutzereingaben aus HTML-Formularen mit JavaScript ausliest und verarbeiten kannst.
// Code in Kurzform
<script>
function myFunction(){
var input = document.getElementById("eingabeNutzer").value;
document.write(input);
}
</script>Das HTML-Formular
Sehen wir uns zunächst den HTML-Code ohne JavaScript, aber mit vollständigem kleinen Formular an:
<html>
<head>
<!-- JavaScript Code... -->
</head>
<body>
<h1>Testformular</h1>
<form>
<p>
<input id="eingabeNutzer"> Gib etwas ein
</p>
<p>
<input onclick="myFunction()" type="button" value="senden">
</p>
</form>
</body>
</html>Für das Senden der Daten an JavaScript ist es erstens wichtig, dass das Texteingabefeld ein eindeutiges id-Attribut hat. Zweitens muss der Button mit einem onclick-Attribut beschrieben werden. Das bedeutet, dass bei einem Klick auf den Button eine bestimmte JavaScript-Funktion aufgerufen wird. In unserem Beispiel ist das die Funktion myFunction(). Diese existiert noch nicht, sodass wir sie erst noch schreiben müssen.
Und so sieht das HTML-Formular aus:
Die JavaScript-Funktion
Bauen wir jetzt die JavaScript Funktion myFunction(), die bei einem Klick auf den Button den Wert aus dem Text-Eingabefeld aufnimmt und am Bildschirm aufnimmt:
function myFunction(){
var input = document.getElementById("eingabeNutzer").value;
document.write(input);
}Zuerst greift JavaScript mit document.getElementById("eingabeNutzer") auf das HTML-Text-Eingabefeld zu. Da uns aber nicht das Feld an sich, sondern der Wert interessiert, den der Nutzer darin eingebenden hat, holen wir diesen mit value entsprechend ab. Gespeichert wird der Wert schließlich in der Variablen input, den wir dann auch easy mit document.write() am Bildschirm ausgeben können.
Kompletter Code
Wir hoffen, dir hat das Tutorial weitrergeholfen. Den ganzen Code kannst du hier nochmal sehen:
<html>
<head>
<script>
function myFunction(){
var input = document.getElementById("eingabeNutzer").value;
document.write(input);
}
</script>
</head>
<body>
<h1>Testformular</h1>
<form>
<p>
<input id="eingabeNutzer"> Gib etwas ein
</p>
<p>
<input onclick="myFunction()" type="button" value="senden">
</p>
</form>
</body>
</html>
