JavaScript: Submit einer Form abfangen

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.