Formular mit JS verschicken klappt nicht

[Markus]

Hallo,

Ich habe (auszugsweise) folgendes Formular:

<form action="<?=$_SERVER['PHP_SELF']?>"
      name="sms"
      method="post"
      onSubmit="return ueberpruefe();">

...
  ...

<a href="javascript:document.sms.submit();">
    <input name="Submit" ... type="image">
  </a>
</form>

Die Funktion ueberpruefe() sieht (auszugsweise) folgendermassen aus:

function ueberpruefe()
{
  if (document.sms.name.value == "")
  {
    alert('Bitte gebe deinen Namen ein!');
    document.sms.name.focus();
    return false;
  }
  else
    ...
    ...
    else
      return true;
}

Wenn ich die Pflichtfelder leer lasse, dann bekomme ich die beabsichtigte Fehlermeldung, allerdings wird das Formular nicht abgeschickt, wenn alle Eingaben korrekt sind...

Wo liegt der Fehler ?

Schonmal Danke im Voraus,
Markus

[XaraX]

Hallo,

<a href="javascript:document.sms.submit();">
    <input name="Submit" ... type="image">
  </a>

vielleicht magst Du dann doch lieber auf onSubmit zurückgreifen und Deinen Link ganz schnell Löschen ;)
http://de.selfhtml.org/javascript/sprache/eventhandler.htm#onsubmit

Gruß aus Berlin!
eddi

[Markus]

Hallo eddi,

Erstmal Danke für Deine Rückantwort.

Hab das SelfHTML-Beispiel mit meinem Code verglichen und muss leider gestehen, dass ich immer noch nicht genau weiss, was falsch ist.

Gut, ich habe einen grafischen Button anstelle des Standardbuttons,... liegt es daran ?

Markus

[XaraX]

Hallo eddi,

Erstmal Danke für Deine Rückantwort.

Hab das SelfHTML-Beispiel mit meinem Code verglichen und muss leider gestehen, dass ich immer noch nicht genau weiss, was falsch ist.

Gut, ich habe einen grafischen Button anstelle des Standardbuttons,... liegt es daran ?

Nein, daran lieg es nicht. onSubmit ist ein Event, das eintritt, wenn das Formular abgeschickt wird. Das Abschicken hat mit dem Link nichts zu tun, der im übrigen auch syntaktisch falsch ist.

Gruß aus Berlin!
eddi

[Markus]

Hülfe, eddi, ich bekomm's einfach nicht hin, obwohl's mit Sicherheit ganz einfach wäre... :-(

Ich hab jetzt zumindest den Button folgendermassen geändert:

<a href="#"
   onclick="document.sms.submit();">
   <input type="image" src="pic/nav/N_eintrag_speichern.png"
          width="93" height="16" alt="Absenden"
          name="Absenden" value="Absenden">
</a>

Wie das Formular oder die Funktion umzustellen ist, keinen blassen Schimmer mehr... :-(

Markus

[XaraX]

Hallo Markus,

wie ich sehe, ist meine heimliche Hoffnung, Du hättest aus dem angegebenen Verweis (http://de.selfhtml.org/javascript/sprache/eventhandler.htm#onsubmit einige wertvolle Erkenntnisse mitgenomment, leider nicht erfüllt worden.

Ein Formular wird standardmäßig über ein Inputfeld vom Typ image oder submit versendet. Dieser Vorgang ist durch das Event onSubmit abfangbar. Daher hatte ich Dir auch geschrieben, daß der Link, also das Element <a> einen syntaktischen Fehler darstellt. Das ist einfach eine Tatsche, die Du so hinnehmen solltest, ich denke aber auch, hinnehmen kannst.
Das macht gleichfalls das Element <a> in der Konstrukton überflüssig, da, wenn jemand das Bild anklick, das Formular versendet werden soll, aber der Evenhandler onSubmit greift.

<form action="" onSubmit="">
 <input type='image'>
</form>

Wenn in Deiner Funktion ueberpruefe() kein Fehler ist, sollte auch das Formular versendet werden. Wenn nicht, dann poste hier kurz den Prüfalgorithmus und dann kann man sicher schnell zu einer Lösung finden.

Gruß aus Berlin!
eddi

[Markus]

Hallo eddi,

Ich habe Deinen angegebenen Link sehr wohl aufgerufen und mit meinem Code verglichen, kann aber keine (gravierenden) Unterschiede finden, die verhindern könnten, dass mein Formular abgeschickt wird.

Gut, dann vergleiche wir mal Schritt für Schritt meinen Code mit dem Beispiel in SelfHTML:

---------------
Meine Funktion:
---------------

function ueberpruefe()
{
  if (document.sms.name.value == "")
  {
    alert('Bitte gebe deinen Namen ein!');
    document.sms.name.focus(); // Damit setzt sich der Cursor automatisch da ins Feld rein, wo der Fehler ist
    return false;
  }
  else
    if (document.sms.name.value == "Name")
    {
      ...
      return false;
    }
    else
      ...
        else
          return true;
}

--------
SelfHTML
--------

function CheckInput()
{
  for (i=0; i<document.forms[0].elements.length; ++i)
    if (document.forms[0].elements[i].value == "")
    {
      alert("Es wurden nicht alle Felder ausgefuellt!");
      document.forms[0].elements[i].focus();
      return false;
   }
   return true;
}

Mein Skript unterscheidet sich von dem SelfHTML-Beispiel darin, dass ich keine Schleife verwende. Ansonsten wird bei Fehlern false zurückgegeben, bei fehlerhaften Eingaben true.

-------------
Mein Formular
-------------

<form action="<?=$_SERVER['PHP_SELF']?>"
      name="sms"
      method="post"
      onsubmit="return ueberpruefe();">

<input name="name"
         value="<?php echo $_POST['name'] == '' ? '' : $_POST['name'];?>"
         type="text">

<a href="#"
     onclick="document.sms.submit();">
     <input type="image"
            src="pic/nav/N_eintrag_speichern.png"
            width="93"
            height="16"
            alt="Absenden"
            name="Absenden"
            value="Absenden">
  </a>
</form>

--------
SelfHTML
--------

<form action="onsubmit.htm" onSubmit="return CheckInput();">
  Feld 1: <input size="30"><br>
  Feld 2: <input size="30"><br>
  Feld 3: <input size="30"><br>
  <input type="submit">
</form>

Ich übergebe das Formular an sich selber, SelfHTML ruft die Datei onsubmit.htm auf. Beide Formulare haben im form-Tag den Event-Handler onsubmit mit Aufruf der Überprüfung der Eingaben über Javascript.

Wenn ich in meinem Formular die Felder leer lasse oder falsch ausfülle, dann bekomme ich - wie bereits beschrieben - entsprechende Fehlermeldungen, nur wird das Formular nicht abgeschickt.

Vielleicht sehe ich auch nur den Wald vor lauter Bäumen nicht mehr... :o)

Gruss, Markus

[XaraX]

Nabend :)

<form action="<?=$_SERVER['PHP_SELF']?>"

Ich habe diese Schreibweise schon ein paar mal gesehen auf einem Linuxsystem mit apache 2 sowohl PHP als Modul wie auch CGI wird dies schlichtweg nicht geparst!
An welchem System sitzt Du und wie ist PHP konfiguriert? (Das ist nur die pure Neugier ;)

name="sms"
      method="post"
      onsubmit="return ueberpruefe();">

<input name="name"
         value="<?php echo $_POST['name'] == '' ? '' : $_POST['name'];?>"

Dieser Vergleich ist reichlich überlüssig, entweder $_POST['name'] ist leer oder gefüllt es reicht daher <?php echo $_POST['name'];?>

type="text">

<a href="#"

Wie oft denn nun noch? <a> ist überflüssig!

onclick="document.sms.submit();">
     <input type="image"
            src="pic/nav/N_eintrag_speichern.png"
            width="93"
            height="16"
            alt="Absenden"
            name="Absenden"
            value="Absenden">
  </a>
</form>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Strict//EN"
       "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>test</title>
<style type='text/css'>
.div {float:left;width:200px}
</style>
<script type='text/javascript'>
function ueberpruefe()
   {
   c=new Array()
   c[1]='name'; c[2]='E-Mail'; c[3]='was weiß ich';
   b='';
   a=document.forms['sms']
   for(i=1;a.elements['in'+i];i++)
      {
      if(a.elements['in'+i].value=='' || a.elements['in'+i].value==c[i])
         {
  a.elements['in'+i].style.backgroundColor='#FF80A0'
  b=1;
  }
      }
   if(b==1)
      {
      alert('Felder ausfüllen!')
      return false
      }
   return true
   }
</script>
</head>
<body>
<form action='test.html' onSubmit='return ueberpruefe()' name='sms'>
 <div>
  <div class='div'>
   ein Feld:
  </div>
  <input name='in1' type='text' onChange='this.style.backgroundColor="#FFFFFF"'>
 </div>
 <div>
  <div class='div'>
  noch ein Feld
  </div>
  <input name='in2' type='text' onChange='this.style.backgroundColor="#FFFFFF"'>
 </div>
 <div>
  <div class='div'>
  und noch eins
  </div>
  <input name='in3' type='text' onChange='this.style.backgroundColor="#FFFFFF"'>
 </div>
 <div>
  <input type='image' src='0.png'>
 </div>
</form>

</body>
</html>

Gruß aus Berlin!
eddi