✔ onSubmit in Formular wird nicht ausgeführt

T

Tuneup

Grünschnabel
Hallo Leute :)

Warscheinlich ein ganz banaler Fehler, aber ich komm nicht drauf...
Folgender Code wird so wie er da steht mit include in meine index.php geladen.
Klicke ich auf "Absenden" führt er aber nur die action aus aber nicht die Funktion die ich über onsubmit aufrufen wollte.

Habs mir jetzt mehrmals angeschaut kann aber keien Fehler entdecken :/

Code: 
<script type="text/javascript">
<!--
function validateForm()
{
	alert("test");
	var vorname = document.forms["contact"]["vorname"].value;
	var nachname = document.forms["contact"]["nachname"].value;
	var email = document.forms["contact"]["email"].value;
	var telefon = document.forms["contact"]["telefon"].value;
	var nachricht = document.forms["contact"]["nachricht"].value;
	
	if (vorname == "" || nachname == "" || email == "" || nachricht == "")
	{
		alert("Nicht alle Pflichtfelder wurden ausgefüllt.");
		return false;
	{
}
//-->
</script>
<h1>Contact</h1>
<div class="headline"></div>
<form name="contact" action="htmlinc/contact.html" onsubmit="return validateForm()" method="post">
	<table width="500px" border="0" class="services" cellspacing="10px">
		<tr>
			<td>Vorname*</td>
			<td><input type="text" width="50" name="vorname"></td>
			<td>Nachname*</td>
			<td><input type="text" width="50" name="nachname"></td>
		</tr>
		<tr>
			<td>Email*</td>
			<td><input type="text" width="50" name="email"></td>
			<td>Telefon</td>
			<td><input type="text" width="50" name="nachname"></td>
		</tr>
		<tr>
			<td>Nachricht*</td>
			<td colspan="3"><textarea cols="40" rows="7" name="nachricht"></textarea></td>
		</tr>
		<tr>
			<td>&nbsp;</td>
			<td colspan="3"><input type="submit" name="send"></td>
		<tr>
	</table>	
</form>
 
Fehlerkonsole?

Hast du für den FireFox die Developer-Toolbar? dort könntest gleich sehen wenn am JS was nicht stimmt.
Noch dazu Firebug und die Fehlerausgabe ist perfekt :-)
 
Folgende Sachen stimmen nicht:
  • Es gibt kein Eingabefeld mit dem Namen "telefon"
  • Die vorletzte Klammer ist eine öffnende, müsste aber eine schließende sein
  • Du solltest als alternativen Rückgabewert nach der IF-Bedingung "true" zurückgeben
Code: 
function validateForm ()
{
  var vorname = document.forms["contact"]["vorname"].value;
  var nachname = document.forms["contact"]["nachname"].value;
  var email = document.forms["contact"]["email"].value;
  var telefon = document.forms["contact"]["telefon"].value;
  var nachricht = document.forms["contact"]["nachricht"].value;
  
  if (vorname == "" || nachname == "" || email == "" || nachricht == "")
  {
    alert("Nicht alle Pflichtfelder wurden ausgefüllt.");
    return false;
  }
  
  return true;
}?
HTML: 
<h1>Contact</h1>
<div class="headline"></div>
<form name="contact" action="htmlinc/contact.html" onsubmit="return validateForm();" method="post">
  <table width="500px" border="0" class="services" cellspacing="10px">
    <tr>
      <td>Vorname*</td>
      <td><input type="text" width="50" name="vorname"></td>
      <td>Nachname*</td>
      <td><input type="text" width="50" name="nachname"></td>
    </tr>
    <tr>
      <td>Email*</td>
      <td><input type="text" width="50" name="email"></td>
      <td>Telefon</td>
      <td><input type="text" width="50" name="telefon"></td>
    </tr>
    <tr>
      <td>Nachricht*</td>
      <td colspan="3"><textarea cols="40" rows="7" name="nachricht"></textarea></td>
    </tr>
    <tr>
      <td></td>
      <td colspan="3"><input type="submit" name="send"></td>
    <tr>
   </table>    
</form>?
Außerdem solltest du keine Tabellen zum Strukturieren deiner Webseite verwenden – dafür gibt es DIV-Boxen.

Nachtrag: Eine bessere Struktur sieht beispielsweise so aus:
Code: 
function validateForm ()
{
  var firstname = document.forms["contact"]["contact[firstname]"].value;
  var lastname  = document.forms["contact"]["contact[lastname]"].value;
  var email     = document.forms["contact"]["contact[e-mail]"].value;
  var telephone = document.forms["contact"]["contact[telephone]"].value;
  var message   = document.forms["contact"]["contact[message]"].value;
  
  if (vorname == "" || nachname == "" || email == "" || nachricht == "")
  {
    alert("Nicht alle Pflichtfelder wurden ausgefüllt.");
    return false;
  }
  
  return true;
}?
HTML: 
<h1>Contact</h1>
<form name="contact" action="htmlinc/contact.html" method="post" onsubmit="return validateForm();">
  <fieldset>
    <legend>Name</legend>
    <label>Vorname* <input type="text" name="contact[firstname]" required="required" /></label>
    <label>Nachname* <input type="text" name="contact[lastname]" required="required" /></label>
  </fieldset>
  <fieldset>
    <legend>Kontaktdaten</legend>
    <label>E-Mail-Adresse* <input type="text" name="contact[e-mail]" required="required" pattern="[A-Za-z0-9._-]+@[A-Za-z0-9._-]+" title="example@example.org" /></label>
    <label>Telephon <input type="text" name="contact[telephone]" /></label>
  </fieldset>
  <fieldset>
    <legend>Nachricht</legend>
    <label>Nachricht* <textarea cols="40" rows="7" name="contact[message]" required="required"></textarea></label>
  </fieldset>
  <fieldset>
    <legend>Absenden</legend>
    <button type="submit">Absenden</button>
  </fieldset>
</form>??????
 
Zuletzt bearbeitet:
Seit Firefox 10 gibt es doch bereits ein "OnBoard-Mittel" was dem Firebug sehr ähnlich kommt?
http://www.wintotal.de/tipparchiv/?id=1950

Oder bietet Firebug noch mehr Vorteile?

Die DeveloperToolbar kannte ich noch nicht, werd ich mir aber mal anschauen :)

---

Das mit den Klammern ist ja fast schon peinlich :x
Also jetzt geht er in die Funktion und zeigt die Nachricht "test" an, aber danach passiert nicht das was gewollt ist. Werd mir erstmal diese Toolbar runterladen und mal schauen :)

Dieses Kontaktformular ist jetzt der erste Teil der Webseite wo ich eine Tabelle einsetze, ich denke dafür kann man Tabellen doch wohl benutzen? Wozu gibts sie sonst?
Das ich mit Tabellen nicht die ganze Seite aufbaue ist klar, aber zur Anordung von Texten und Eingabefeldern find ich ist das doch in Ordnung? :)

Edit:
Das mit dem Telefon schein ich beim kopieren und einfügen vergessen zu haben:/ Auf jedenfall hat das jetzt auch das letzte Problem noch gelöst. Vielen Dank an alle :)
 
Zuletzt bearbeitet:
Der Firebug kann wesentlich mehr als der integrierte Inspektor, z.B. Javascript Debugging, Zeitmessungen, erweiterte Konsole. Die Toolbar bietet dagegen Hilfestellungen bei der Ansicht, z.B. Anzeige für verschiedene Auflösungen. (Das soll der nächste Firefox ebenfalls selber können).
Wenn dein Problem gelöst ist, dann markiere es doch bitte als erledigt.
 
Tabellen verwendet man, wenn man Tabellen darstellen will. Dafür sind die da. Ansonsten solltest du generell deine Webseite erstmal so strukturieren, wie sie logisch aufgebaut ist, ohne dabei auf das Layout zu achten. Und danach kannst du die Webseite mit möglicherweise noch nötigen DIV-Boxen gestalten.
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück