810 Stimmen

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.

AntwortenPositivNegativ

Über den Autor

AvatarSoftware 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

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.