Heute hatte ich das Problem, dass ich vor dem Submitten einer Form via Javascrip / jQuery überprüfen wollte, ob auch alle Felder gesetzt waren. Wenn dies der Fall war, so sollte anschließend mit .submit() die Form abgeschickt werden. Allerdings habe ich immer wieder die Meldung “Unable to `submit()` an html form after intercepting the submit with javascript” erhalten. Die Lösung war dabei so einfach…

Hier ein kleines Code-Beispiel:

<form action="data.php" method="post" id="dataform">
	<input type="text" class="firstname" name="firstname" />
	<input type="submit" onclick="return false" class="submitBtn" />
</form>

<script>
$(document).ready(function() {
	
	// auf click-event reagieren
	$('.submitBtn').click(function() {
		
		// pruefen, ob firstname keinen Inhalt hat
		if($('.firstname').val() == "") {
			$('.firstname').addClass("border_red");
		} else {
			$('#dataform').submit();
		}
	});
});

</script>

Das führt dazu, dass beim Klick auf “submit” nichts passiert bzw. erst via jQuery-Event überprüft wird, ob ein Inhalt im Input gesetzt ist oder nicht und danach submitted wird – Eigentlich.
Denn so bekam ich immer folgende Ausgabe in der Firebug-Konsole:

Unable to `submit()` an html form after intercepting the submit with javascript

Und damit brach das Javascript ab, es folgte kein Submit. Was war falsch? Der Gedankenansatz! Wir wollen ja nicht beim Klick auf “submit” prüfen, sondern die eigentliche Idee verfolgt vor dem Submit zu reagieren. Und das ist schon die Lösung:

Anstatt beim $(‘.submit’.)click() die Logik zu halten, sollte man auf $(‘#dataform’).submit() reagieren. Der Code sieht entsprechend aus:

 

<form action="data.php" method="post" id="dataform">
	<input type="text" class="firstname" name="firstname" />
	<input type="submit" onclick="return false" class="submitBtn" />
</form>

<script>
$(document).ready(function() {

	// auf click-event reagieren
	$('#dataform').submit(function() {

		// pruefen, ob firstname keinen Inhalt hat
		if($('.firstname').val() == "") {
			$('.firstname').addClass("border_red");

			// interrupt submitBtn
			return false;
		}

		// ansonsten wird submitted
	});
});

That’s it 🙂

Cedric

Liebe in jeder Zeile Code, egal ob Java, PHP, Groovy oder HTML. Größter Spaß: Facebook-Development und CSS3-Spielereien.