JavaScript: Submit einer Form abfangen
Tutorial von Stefan Trost | Letztes Update am 24.11.2023 | Erstellt am 21.09.2016
In diesem Tutorial möchte ich euch zeigen, wie ihr einen Klick auf den Submit-Button einer HTML-Form abfangen könnt. Ein möglicher Anwendungsbereich wäre zum Beispiel, vor dem Absenden dynamisch die eingegebenen Werte zu überprüfen um dem Nutzer bei Bedarf eine Meldung auszugeben.
Ich möchte euch dafür zwei Lösungen vorstellen: Die erste Lösung nutzt pures JavaScript, die zweite Lösung arbeitet mit jQuery.
Das HTML-Formular
Für die Demonstration benutzen wir zwei simple Formulare. Das erste soll die reine JavaScript-Lösung verdeutlichen, das zweite die jQuery-Lösung.
<h1>JavaScript</h1> <form id="form_js" method="post" action=""> <input id="inp_js" type="text" value=""> <input type="submit" value="Speichern"> </form> <h1>jQuery</h1> <form id="form_jquery" method="post" action=""> <input id="inp_jquery" type="text" value=""> <input type="submit" value="Speichern"> </form>
Beide Formulare bestehen aus einem Submit-Button und aus einem Text-Eingabefeld. Um die Formulare später mit unserem Skript ansprechen zu können, haben wir den Formularen die eindeutigen IDs "form_js" und "form_jquery" gegeben. Ebenso haben auch die Input-Felder eine eindeutige ID erhalten.
Skript mit reinem JavaScript
Zunächst möchten wir uns die reine JavaScript-Lösung ansehen. Nach dem vollständigen Laden unserer Seite (window.onload) benutzen wir document.getElementById() um eine eigene OnSubmit-Funktion für unser Formular mit der ID "form_js" zu definieren.
window.onload=function() { document.getElementById('form_js').onsubmit=function() { if (document.getElementById('inp_js').value == '') { alert('Bitte füllen Sie das Feld aus.'); return false; } else { return true; } } }
Diese Funktion prüft den Wert des Eingabefeldes darauf hin, ob es leer ist. Falls ja, wird eine MessageBox mit einer Warnmeldung angezeigt und "false" zurückgegeben. Dies sorgt dafür, dass das Feld nicht abgeschickt werden kann. Falls das Feld jedoch Text enthält, geben wir stattdessen "true" zurück und das Formular wird abgesendet.
Skript mit jQuery
Der nächste Code führt zu dem selben Ergebnis, dieses Mal benutzen wir allerdings jQuery. Wieder soll unsere Funktion erst gesetzt werden, nachdem die HTML-Seite vollständig geladen wurde. Das erreichen wir in der Welt von jQuery mit $(document).ready().
$(document).ready(function() { $('#form_jquery').submit(function(e){ if ($('#inp_jquery').val() == '') { e.preventDefault(); alert('Bitte füllen Sie das Feld aus.'); } }); });
Anschließend hängen wir uns mit jQuery in das Submit unseres Formulars (mit der ID form_jquery) ein. Hierin prüfen wir wieder, ob unser Eingabefeld einen Wert enthält. Falls nicht geben wird wieder unsere Warnmeldung aus und rufen .preventDefault() auf. Damit verhindern wir das Absenden des Formulars.
Hinweis
Das Prüfen eines Formulars mit JavaScript kann keine Prüfung auf der Server-Seite ersetzen. JavaScript kann man gut für das Erzeugen von Warnhinweisen einsetzen, die Prüfung der Werte sollte jedoch immer im PHP-Skript auf dem Server geschehen. Man sollte immer daran denken, dass JavaScript auch ausgeschaltet sein kann und einfach manipuliert werden kann.
Über den Autor
Software von Stefan Trost finden Sie auf sttmedia.de. Benötigen Sie eine individuelle Software nach Ihren eigenen Wünschen? Schreiben Sie uns: sttmedia.de/kontakt
Profil anzeigen
Ähnliche Themen
jQuery: Submit-Button deaktivieren, wenn keine Checkbox ausgewählt ist
Tutorial | 5 Kommentare
HTML5 Canvas als Bild an Server senden und speichern
Tutorial | 0 Kommentare
jQuery: Komplettes Formular abschicken und Inhalt mit Ajax empfangen
Tutorial | 12 Kommentare
jQuery: HTML5 Canvas mit Ajax an Server senden
Tutorial | 0 Kommentare
Bild vor dem Upload im Browser verkleinern
Tutorial | 5 Kommentare
XAMPP: SSL/HTTPS für lokale Projekte einrichten
Tutorial | 8 Kommentare
CSS-Stylesheets in HTML einbinden
Tutorial | 0 Kommentare
Wichtiger Hinweis
Bitte beachten Sie: Die Beiträge auf askingbox.de sind Beiträge von Nutzern und sollen keine professionelle Beratung ersetzen. Sie werden nicht von Unabhängigen geprüft und spiegeln nicht zwingend die Meinung von askingbox.de wieder. Mehr erfahren.
Jetzt mitmachen
Stellen Sie Ihre eigene Frage oder schreiben Sie Ihren eigenen Artikel auf askingbox.de. So gehts.