Über mich

Startseite arrow Tipps & Tricks arrow form.submit is not a function

form.submit is not a function
Mittwoch, 16. April 2008
Geschrieben von Armin Vieweg
Um Kontaktformulare zu validieren nutzt man häufig JavaScript und dann einen solchen Fehler zu erhalten ist sehr nervig. Die Lösung ist aber denkbar einfach.

Zwei Wege ein Formular abzuschicken
Um ein Formular abzuschicken gibt es zwei Möglichkeiten. Man erstellt ein Element
<input type="submit"> oder einen normalen Button, der ein JavaScript ausführt. Das sieht dann so aus:

<form action="mail.cgi" method="post" name="Formular">
  <input type="button" name="drueckmich" onclick="checkeFormular();">
</form>


Der Vorteil an der 2. Variante ist, man kann über das JavaScript überprüfen ob ein Formular korrekt ausgefüllt wurde. Wenn man alle Abfragen über die Felder gemacht hat und das Formular absenden möchte muss man im JavaScript folgenden Befehl verwenden:

form.submit;


Wobei "form" für den Name des Formulars steht, den wir oben verwendet haben.



Fehler: form.submit is not a function
Wer beim Klick auf "Senden" diese Meldung erhält hat einen kleinen aber schwerwiegenden Fehler gemacht. Die Frage die man sich stellt: "Warum ist .submit keine Funktion mehr?".

Die Antwort ist leicht: Man hat innerhalb des Formulares ein Element "submit" genannt. In der Regel den Versenden-Button selbst. Dann steht also im Submit-Button folgendes:

<input type="button" name="submit" onclick="checkeFormular();">


Ab diesem Moment erkennt JavaScript, dass es ein Element mit dem Namen "submit" gibt. Das heißt die Aussage, dass form.submit keine Funktion ist, ist korrekt. Denn es handelt sich um ein Element, genauer gesagt: den Versenden-Knopf.

Einfach den Button anders benennen und schon wird dieser Fehler nicht mehr auftauchen.


Niemals Namen von Funktionen verwenden
Man sollte stets vermeiden die Elemente nach gängigen Funktionen zu benennen, so wie in diesem Beispiel. Man kann Glück haben, dass es nicht auffällt weil der Befehl nie zum Einsatz kommt, jedoch ist die Fehlersuche wenn es dann mal passiert schier unendlich, denn an so etwas simples denkt man erst zuletzt.





  Kommentare (2)
 1 Geschrieben von: Mike, am 27.06.2010 um 14:59
Mit den onsubmit-Attribut wäre es einfacher: form action=\'mail.cgi\' method=\'post name=\'Formular\' onsubmit=\'return checkeFormular();\' Außerdem kann man den Submit-Button verwenden.
 2 Geschrieben von: Armin Vieweg, am 27.06.2010 um 18:25
Hallo Mike, 
es mag zwar einfacher sein, aber ich bin irgendwie kein Freund von "Inline-JavaScript". Dann lieber das Abfangen des Absendens des Formulars über ein externes JavaScript. Mit jQuery ja auch kein Problem mehr, z.B. $('form').submit(function(){ ... });
Letzte Aktualisierung ( Mittwoch, 16. April 2008 )
 
< Zurück   Weiter >



Tipps & Tricks Kategorien

Beliebteste Tipps