submit verhindern

[tropenberta]

hi leuts
hab mal wieder probs.
hab mir ein kleines formular abfrage script geschrieben das auch wunderbar funzt.
jetzt hab ich das problem wenn zb. name nicht eingegeben wurde der hinweis erscheint "Bitte Name eingeben" korrekt erscheint, aber danach das formular gleich die action und das php script ausführt, das soll er aber nicht und ich komm nicht drauf. pls help.

  
  
<div id="main_formular">  
<form name="formular1" id="contact" action="sender.php" method="post" target="_blank">  
<div id="kontaktfeld">  
<fieldset style="width:300px">  
<legend>Kontaktdaten</legend>  
 <table border="0">  
  <tr>  
   <th align="left">Vorname </th>  
   <th><input id="vname" name="vname" type="text" size="30" maxlength="30"> </th>  
  </tr>  
  <tr>  
   <th align="left">Nachname</th>  
   <th><input id="nname" name="nname" type="text" size="30" maxlength="30"> </th>  
  </tr>  
  <tr>  
   <th align="left">E-mail</th>  
   <th><input id="email" name="email" type="text" size="30" maxlength="30"> </th>  
  </tr>  
  <tr>  
   <th align="left">Adresse</th>  
   <th><input id="adresse" name="adresse" type="text" size="30" maxlength="30"> </th>  
  </tr>  
  <tr>  
   <th align="left">PLZ / Ort</th>  
   <th><input id="ort" name="ort" type="text" size="30" maxlength="30"> </th>  
  </tr>  
  <tr>  
   <th align="left">Telefon </th>  
   <th><input id="telefon" name="telefon" type="text" size="30" maxlength="30"> </th>  
  </tr>  
 </table>  
</fieldset>  
</div>  
<br><br>  
<div id="bestellfeld">  
<fieldset style="width:400px">  
<legend>Hier können Sie Ihre Bestellung eingeben</legend>  
 <textarea name="nachricht" rows="5" id="nachricht"cols="55"></textarea>  
</fieldset>  
</div>  
<br><br>  
<div id="sendenfeld">  
<fieldset style="width:250px">  
<legend>Ihre Aktion</legend>  
<input type="reset" id="clear" name="clear" value="Eingabe löschen">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<input type="submit" onclick="senden()" id="absenden" name="absenden" value="Abschicken">  
</fieldset>  
</div>  
</form>  
</div>  
  

[tropenberta]

ps:

also ich denke das ich irgendwie in jscript sagen muss :

wenn formularabfrage (meine funktion "checker") ist gleich ein feld ist nicht ausgefüllt
  { formular soll nicht action="senden.php" ausführen }

if ( checker() == false )
 { ??? do not submit mei formular ??? }

[dedlfix]

Tach!

jetzt hab ich das problem wenn zb. name nicht eingegeben wurde der hinweis erscheint "Bitte Name eingeben" korrekt erscheint, aber danach das formular gleich die action und das php script ausführt, das soll er aber nicht und ich komm nicht drauf.

Diese Prüfung muss sowieso auf dem Server erfolgen, unabhängig davon, ob du schon auf dem Client vorprüfen kannst oder nicht (zum Beispiel Javascript deaktiviert oder Request von Bot ohne Javascript). Wenn du diese also implementiert hast, dann kannst du im Browser das Absenden des Formulars verhindern, indem der Eventhandler im onsubmit mit return false; beendet wird.

dedlfix.

[tropenberta]

abend dedlfix
wiedermal vielen dank für deine schnelle antwort.
aber irgendwie kapier ich es nicht.
wenn ich onsubmit ist false mach dann kann ich des formular nimmer senden.
jetzt hab ich mir gedacht machst ne funktion mit ner if abfrage

if ( meinekontrollfunktion == false )
 { return false; }

[dedlfix]

Tach!

wenn ich onsubmit ist false mach dann kann ich des formular nimmer senden.
jetzt hab ich mir gedacht machst ne funktion mit ner if abfrage

if ( meinekontrollfunktion == false )
{ return false; }

Ja, wenn alles bestens ist, dann return true (und das Formuler wird gesendet), ansonsten return false.

dedlfix.

[tropenberta]

hi leuts

war ein fehlalarm - mit submit auf button ändern ging wohl doch nicht. war gestern einfach schon zu erschöpft ums zu checken.
ich hab mir aber jetzt ne andere lösung einfallen lassen und zwar wenn mann auf den absendebutton klickt wird eine javascript funktion ausgeführt die alle felder nach inhalt und gültigkeit abfragt, das geschieht einfach mit if abfragen. als else hab ich dann ein kleines fensterchen gemacht wo alle angaben des bnutzers nochmal aufgelistet werden zur kontrolle. ist der benutzer mit seinen angeaben zufrieden kann er auf senden drücken und der formularinhalt wird als email an mich gesendet, bzw dem kunden. das ganze schaut dann so aus :

``~~~javascript

function senden()
 {
  if (document.formular1.vname.value == "")
   { alert("Bitte Ihren Vornamen eingeben!");
     document.formular1.vname.focus();
     return false; }
  if (document.formular1.nname.value == "")
   { alert("Bitte Ihren Nachnamen eingeben!");
     document.formular1.nname.focus();
     return false; }
  if (document.formular1.email.value.indexOf("@") == -1 || document.formular1.email.value.indexOf(".") == -1)
   { alert("Keine E-Mail-Adresse!");
     document.formular1.email.focus();
     return false; }
  if (document.formular1.adresse.value == "")
   { alert("Bitte Ihre Adresse eingeben!");
     document.formular1.adresse.focus();
     return false; }
  if (document.formular1.ort.value == "")
   { alert("Bitte Ihren Wohnort eingeben!");
     document.formular1.ort.focus();
     return false; }
  if (document.formular1.telefon.value == "")
   { alert("Bitte Ihre Telefonnummer eingeben!");
     document.formular1.telefon.focus();
     return false; }
  if (document.formular1.nachricht.value == "")
   { alert("Bitte Ihre Bestellung eingeben!");
     document.formular1.nachricht.focus();
     return false; }
  else
 {
var newWindow = window.open('about:blank','confirmWin','height=500,width=500');
var vorname = document.formular1.vname.value;
var nachname = document.formular1.nname.value;
var street = document.formular1.adresse.value;
var wohnort = document.formular1.ort.value;
var xmail = document.formular1.email.value;
var telefon = document.formular1.telefon.value;
newWindow.document.write('<html><head><title>&Uuml;berpr&uuml;fen Sie Ihre Angaben</title>');
newWindow.document.write('</head><body>');
newWindow.document.write('Hallo ' + vorname + ' ' + nachname + '<br/><br/><b> Hier zur Kontrolle Ihre Angaben : </b><br/><br/>Strasse : ' + street + ' ' + '<br/><br/>Wohnort : ' + wohnort + '<br/><br/>Email : ' + xmail + '<br/><br/>Telefon : ' + telefon +'<br/><br/><input type="button" name="abbrechen" id="abbrechen" value="Abbrechen" onclick="window.close();"> &nbsp;&nbsp;&nbsp;&nbsp; <input type="button" onclick="opener.formular1.submit();" name="absenden" id="absenden" value="Absenden">');
newWindow.document.write('</body></html>');
newWindow.document.close(); }
}

[Matthias Apsel]

Om nah hoo pez nyeetz, tropenberta!

Deine Vielzahl von if-Konstruktionen ist aus zweierlei Gründen suboptimal.

Erstens programmiertechnisch: Du durchsuchst mehrfach das Dokument, schreibst viele Sachen mehrfach, verwende eine Schleife ("bitte " + missing_element + " eingeben!")

Zweitens aus Anwendersicht:
2a alerts sind doof und nerven
2b wenn einer mehrere Fehler macht, dann wird er auf den ersten hingewiesen, erneutes absenden, erneutes Alert, ... Verwende _maximal ein_ alert.
2c Viel schöner ist, wenn auf alle Fehler gleichzeitig hingewiesen wird etwa

Vorname: _________________  | Dieses Feld ist ein Pflichtfeld

den Text nur im Fehlerfall einblenden

Zwei

Matthias

[tropenberta]

hi matthias

vielen vielen dank für deine ganzen infos.

zu 1. : ich soll also am besten eine if abfrage machen die alles abfragt. is kein prob.
ich benutze eine schleife ???? - war mir gar net bewußt, dachte eigentlich bisher und mit meinen bisherigen kenntnissen das schleifen mit while oder for beginnen, mehr kenn ich noch net. also ich versteh nicht genau wo ich ne schleife hab.

zu 2a. : alert fenster nerven geb ich dir recht - da hast du eigentlich schon in meine nächste überlegung vor gefühlt. ich will eh das unter dem jeweiligen feld direkt ein kleiner hinweis erscheint der den user darauf hinweist - kp wie - aber find ich schon noch raus.

zu 2b. : mein nächstes vorhaben wird das berücksichtigen.

zu 2c. : wie 2b.

wie gesagt vielen dank für die tollen anregungen matthias.

gruß
tropenberta

[Matthias Apsel]

Om nah hoo pez nyeetz, tropenberta!

ich benutze eine schleife ???? - war mir gar net bewußt, dachte eigentlich bisher und mit meinen bisherigen kenntnissen das schleifen mit while oder for beginnen, mehr kenn ich noch net. also ich versteh nicht genau wo ich ne schleife hab.

nein, du benutzt keine aber du könntest eine verwenden

skizze:

pflichtelemente = new array (document.formular1.vname, ...);  
  
for (element in pflichtelemente) {  
  element.className = ''; /* frühere Fehler zurücksetzen */  
  if element.value == '' element.className = 'fehler';  
}  
  
/* ggf. weitere Prüfungen */

<label></label>  
  <input><span>Dieses Feld muss ausgefüllt werden</span>

input + span        {display: none;}  
input.fehler + span {display: inline; background: red;}

Matthias

[Kai345]

[latex]Mae  govannen![/latex]

pflichtelemente = new array (document.formular1.vname, ...);

for (element in pflichtelemente) {

  
SO NICHT VERWENDEN! Für Iteration über Array nimmt man niemals for..in, sondern entweder eine for bzw. while-Schleife oder direkt forEach()  
  
Grund: Wenn bspw. Arrays prototypisch mit Eigenschaften erweitert werden (sollte man nicht, passiert aber ggf. bereits, wenn man Fremdcode einbindet) werden diese Eigenschaften dann auch in der Schleife berücksichtigt. Ältere Browser haben bspw. auch über die length-Eigenschaft iteriert  
  
~~~javascript
var pflichtelemente = [document.formular1.vname, ...];  
pflichtelemente.forEach(function(element) {  
  element.className = ''; /* frühere Fehler zurücksetzen */  
  if element.value == '' element.className = 'fehler';  
});

(forEach wird nativ von <= IE8 und anderen steinalten Browsern nicht unterstützt, kann mit folgender Funktion nachgerüstet werden)

/**  
 * Copyright (c) Mozilla Foundation http://www.mozilla.org/  
 * This code is available under the terms of the MIT License  
 */  
if (!Array.prototype.forEach) {  
    Array.prototype.forEach = function(fun /*, thisp*/) {  
        var len = this.length >>> 0;  
        if (typeof fun != "function") {  
            throw new TypeError();  
        }  
  
        var thisp = arguments[1];  
        for (var i = 0; i < len; i++) {  
            if (i in this) {  
                fun.call(thisp, this[i], i, this);  
            }  
        }  
    };  
}

♫ FIIIIISCH!! ♪

Ric... äh Kai

[Matthias Apsel]

Om nah hoo pez nyeetz, Kai345!

Für Iteration über Array nimmt man niemals for..in,

Danke, werde ich zukünftig berücksichtigen ...

Grund: Wenn bspw. Arrays prototypisch mit Eigenschaften erweitert werden (sollte man nicht, passiert aber ggf. bereits, wenn man Fremdcode einbindet) werden diese Eigenschaften dann auch in der Schleife berücksichtigt.

... auch wenn ich im Moment keine Vorstellung habe, wie das gemeint sein könnte ...

♫ FIIIIISCH!! ♪

Ric... äh Kai

... und diesen Film wahrscheinlich nicht gesehen habe.

Matthias

[Kai345]

[latex]Mae  govannen![/latex]

Grund: Wenn bspw. Arrays prototypisch mit Eigenschaften erweitert werden (sollte man nicht, passiert aber ggf. bereits, wenn man Fremdcode einbindet) werden diese Eigenschaften dann auch in der Schleife berücksichtigt.

... auch wenn ich im Moment keine Vorstellung habe, wie das gemeint sein könnte ...

Wenn man beispielsweise <nützlicheJavascriptErweiterung> einbindet und der Autor hat darin
Array.prototype.mybaz = <wert>; verwendet, ist diese Eigenschaft für _alle_ Arrays gesetzt und würde dementsprechend in for..in-Schleifen verwendet.

Array.prototype.foo = 3;  
var m = ["a", "b", "c", "d"];  
for (var prop in m) {  
   document.write("*" + prop + "* ");  
}  
// Ausgabe: *0* *1* *2* *3* *foo*

♫ FIIIIISCH!! ♪

Ric... äh Kai

[Gunnar Bittersmann]

@@Matthias Apsel:

nuqneH

pflichtelemente = new array (document.formular1.vname, ...);

Das kann man mit jQuery einfacher haben: Statt die Elemente explizit aufzuzählen, genügt
pflichtelemente = $('[required]');

Korrekte Auszeichnung der Pflichtelemente mit @required-Attribut im Markup vorausgesetzt.

Die Schleife hat man dann einfach mit .each().

Qapla'

[dedlfix]

Tach!

wenn mann auf den absendebutton klickt wird eine javascript funktion ausgeführt die alle felder nach inhalt und gültigkeit abfragt,

Und wenn man nicht darauf klickt sondern mit Enter absendet wird die Prüfung nicht ausgeführt. onsubmit vom Formular ist der bessere Ort, um eine Prüfung anzustßen.

das geschieht einfach mit if abfragen. [und alerts]

Die Alerts sind bedienerunfreundlich, wie Matthias schon schrub. Eine bessere Lösung wäre, die Meldungstexte gleich ins Formular einzubauen, über, unter, neben, woauchimmer dem Element, aber display:none zu setzen. Im Fehlerfall werden dann die Meldungen zu den fehlerhaften Element eingeblendet. Damit kann der Anwender alle Fehler auf einmal korrigieren und nicht frustrierend jeden einzeln.

dedlfix.

[tropenberta]

problem gelöst

hab einfach den input tag zum absenden von type="submit" auf type="button" gemacht und funzt

schlaft gut

[Gunnar Bittersmann]

@@tropenberta:

nuqneH

problem gelöst

Nicht wirklich.

hab einfach den input tag zum absenden von type="submit" auf type="button" gemacht und funzt

Wirklich nicht.

Das Funktionieren des Formulars sollte nicht von JavaScript abhängig sein.

Das Forumular sollte auch bei deaktiviertem JavaScript benutzbar sein. Dann eben in minderwertigen Browsern ohne clientseitige Eingabevalidierung. Um eine serverseitige Validierung kommst du – wie bereits gesagt – ohnehin nicht drumrum.

Der Absendebutton sollte also ein Submit-Button sein! Mit JavaScript kannst du dessen Funktion unterbinden – auch das wurde bereits gesagt. Du solltest aber nicht einem Nicht-Submit-Button per JavaScript die Formular-absenden-Funktion verpassen.

Qapla'

[tropenberta]

hi gunnar

das man ein formular nicht von javascript abhängig machen soll is mir jetzt schon des öfteren unter gekommen. ihr müsst eins sehen, ich bin noch total blutiger anfänger. ich bin schon mal happy wenn ich etwas code technisch hin bekomme von dem ich vorher keinen plan hatte.
für die zwecke für das das formular verwendet wird ist ne javascript abhängigkeit ok. und mit jedem kleinen projekt das ich mir vornehme entstehen neue kleine probleme durch die ich wachsen kann. eine formularabfrage die mit php funzt ist gewiss sinnvoller, aber leider hab ich mich noch nicht wirklich in php eingelesen - kommt aber noch.

[Matthias Apsel]

Om nah hoo pez nyeetz, tropenberta!

für die zwecke für das das formular verwendet wird ist ne javascript abhängigkeit ok. und mit jedem kleinen projekt das ich mir vornehme entstehen neue kleine probleme durch die ich wachsen kann. eine formularabfrage die mit php funzt ist gewiss sinnvoller, aber leider hab ich mich noch nicht wirklich in php eingelesen - kommt aber noch.

Mit JavaScriptabhängigkeit ist gemeint, dass das Formular auch ohne JavaScript versendet werden kann.

Wenn du über das Formular versendete Daten weiterverbeiten möchtest, kommst du um eine Prüfung mit einer serverseitigen Technik nicht umhin. Insofern kann es nicht heißen "PHP oder JavaScript" und schon garnicht "entweder PHP oder JavaScript", sondern dein JavaScript ist lediglich ein Entgegenkommen für deinen Kunden, dass er nicht sinnloserweise Daten über das Netz schaufelt. Die Bösewichte dieser Welt wollen diesen Service garnicht und werden alles tun um diesen Mechanismus auszuhebeln. Auch deshalb musst du verifizieren, was beim Empfänger der Daten ankommt. Und da wäre Datenmüll die harmloseste aller Möglichkeiten.

Matthias

[Gunnar Bittersmann]

@@tropenberta:

nuqneH

hi leuts
hab mal wieder probs.

Lass mich raten: Dich versteht niemand? Könnte an deinem Slang liegen.

hab mir ein kleines formular abfrage script geschrieben

Ein was?

das auch wunderbar funzt.

Was auch ohne dein Script wunderbar funzen würde – gäbe es nicht noch solch minderwertige Browser wie Safari.

<th align="left">Vorname </th>
   <th><input id="vname" name="vname" type="text" size="30" maxlength="30"> </th>

„Vorname“ sollte unbedingt ein http://de.selfhtml.org/html/formulare/strukturieren.htm#label@title=label sein. Folgende Felder entsprechend.

Darstellung solltest du nicht mit HTML-Attributen (@align, @size) tätigen, sondern per CSS.

<th align="left">Nachname</th>

Die Bezeichnund „Nachname“ ist problematisch.

<th><input id="email" name="email" type="text" size="30" maxlength="30"> </th>

Hier wäre @type="email" angebracht – trotzt immer noch mangelhafter Implementierung in einigen Browsern.

<th><input id="telefon" name="telefon" type="text" size="30" maxlength="30"> </th>

Hier auf jeden Fall @type="tel".

<input type="reset" id="clear" name="clear" value="Eingabe löschen">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<input type="submit" onclick="senden()" id="absenden" name="absenden" value="Abschicken">

Abstände solltest du nicht mit einer Fülle von Leerzeichen erzeugen, sondern per CSS.

Qapla'