Mithilfe von jQuery ist es sehr einfach, den Wert eines Formularfelds einer Website auszulesen. Angenommen auf einer HTML-Seite ist folgendes Formular zu finden:
<form id="bookingForm" action="/home" method="post">
<label for="firstName">Vorname</label>
<input type="text" name="firstName">
<label for="bookingNumber">Buchungs-Nr.</label>
<input type="text" name="bookingNumber">
</form>
Nun soll per JavaScript bzw. jQuery der Wert des Felds “bookingNumber” ausgelesen werden. Dies mag zum Beispiel der Fall sein, wenn die Buchungsnummer per AJAX-Call im Hintergrund irgendwo hingeschickt werden soll.
Um das Feld “bookingNumber” auszulesen kann man folgenden jQuery-Aufruf verwenden:
let bookingNumber = $("input[name=bookingNumber]").val();
Die oben genannte Lösung, hat jedoch einen Nachteil: Wenn es mehrere Formulare auf der Seite gibt, die den Namen “bookingNumber” für ein Input-Feld verwenden, funktioniert unser obiger Aufruf nicht. Besser ist es, ein eindeutiges Element auszuwählen. Das macht man am Besten mithilfe einer ID.
Unser Formular hat die ID “bookingForm”. Das Input-Feld hat keine ID, sondern nur einen Namen. Dementsprechend müssen wir die Formular-ID und den Namen des Input-Felds in unserem jQuery-Selector verwenden:
let bookingNumber = $("#bookingForm input[name=bookingNumber]").val();
Nun greifen wir eindeutig auf das Feld “bookingNumber” im richtigen Formular zu und bekommen keine Probleme, falls das Feld “bookingNumber” mehrfach auf unserer Seite vorkommt.
Für einen vollständigen Test hier noch ein Beispiel. Dieses Beispiel zeigt ein Formular mit zwei Eingabefeldern: Vorname und Buchungsnummer. Beim Klick auf den Button, wird das Feld “bookingNumber” ausgelesen und sein Inhalt wird in einem Dialogfeld ausgegeben. Mit “event.preventDefault();” wird verhindert, dass das Formular tatsächlich abgesendet wird. So kann man beliebig oft hintereinander testen.
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-3.6.0.slim.min.js"></script>
</head>
<body>
<form id="bookingForm" action="#" method="post" onsubmit="onSubmit()">
<label for="firstName">Vorname</label>
<input type="text" name="firstName">
<label for="bookingNumber">Buchungs-Nr.</label>
<input type="text" name="bookingNumber">
<button type="submit">Buchungsnummer anzeigen</button>
</form>
</body>
<script>
function onSubmit(event) {
let bookingNumber = $("#bookingForm input[name=bookingNumber]").val();
alert(bookingNumber);
event.preventDefault();
}
</script>
</html>
Weiterführende Links
https://stackoverflow.com/questions/11654449/jquery-get-form-field-value
https://api.jquery.com/val
https://www.w3schools.com/jquery/html_val.asp
Photo by Greg Rakozy on Unsplash