Formular aus Javascript absenden

[Bambi]

Hallo zusammen

Ich habe eigentlich eine recht einfache Frage, aber weil ich nicht weiss, ob ich das Ganze nicht eh viel zu kompliziert angehe, schreib ich lieber mal etwas genauer, worum es geht:

Ich habe zwei Formulare:

1. Formular mit einigen Textfeldern, Checkboxen, etc. Vor dem Abschicken werden die Eingaben mit einer Javascript-Funktion validiert.

Der Form-Tag sieht wie folgt aus:
<form name="formular1" id="formular1" method="post" action="index.php" onsubmit="return formValidate(this,var_1,'formular_submit');">

Wenn die Funktion formValidate nicht true zurückgibt, wird das Formular nicht abgeschickt (und so soll es auch sein).

2. Formular mit einem Feld vom Typ file, um Dokumente heraufzuladen. Damit der Upload ohne Reload der Seite klappt, mache ich das über einen iframe (wie z.B. unter http://sagmueller.net/fileupload.html).

Hier sieht der Form-Tag so aus:
<form name="formular2" id="formular2" enctype="multipart/form-data" method="post" target="file2_frame" action="check_fileupload.php" onsubmit="uploadStart('file2');">

Das klappt alles.

Nun muss ich aber diese beiden Formulare in einem Formular zusammenbringen (weil man Formulare ja nicht verschachteln kann und das Formular 2 inmitten des Formulars 1 angezeigt werden soll.

Damit das klappt, habe ich eine kleine Funktion geschrieben, welche die Attribute im Form-Tag anpasst:

function setFormAttributes(f,fld,typ)
{
  if (typ == 1) {
    f.action = wp_root + "index.php";
    f.target = "";
    formValidate(f,var_2,fld);
  }
  else if (typ == 2) {
    f.action = "check_fileupload.php";
    f.target = fld + "_frame";
    uploadStart(fld);
  }
}

Diese Funktion rufe ich in den beiden Submit-Buttons auf:

Button für ehemaliges Formular 1:
<input name="formular_submit" type="submit" class="button" value="Absenden" onclick="setFormAttributes(this.form,'formular_submit',1);" />

Button für ehemaliges Formular 2:
<input name="file2_submit" id="file2_submit" type="submit" class="button" value="hochladen" onclick="setFormAttributes(this.form,'file2',2);" />

Das Hochladen (Formular 2) klappt wunderbar. Das ehemalige Formular 1 wird aber immer abgeschickt, auch wenn die Validierung false liefert.

Ich hab auch schon so was ausprobiert:
if (formValidate(f,var_2,fld) == true) { f.submit(); }

aber auch dann wird das Formular nach der Validierung abgeschickt.

Kann mir jemand einen Tipp geben, wie ich verhindern kann, dass das Formular abgeschickt wird, wenn formValidate false liefert?

Und noch eine kleine Zusatzfrage: Wenn ich beim Typ 1 in der Funktion setFormAttributes f.target = ""; angebe, erhalte ich im Firefox Validator eine Warnung (target lacks value). Was könnte ich denn stattdessen für einen Wert angeben, damit diese Warnung nicht kommt?

Ganz lieben Dank für jegliche Hilfe!
Bambi

[ChrisB]

Hi,

function setFormAttributes(f,fld,typ)
{
  if (typ == 1) {
    f.action = wp_root + "index.php";
    f.target = "";
    formValidate(f,var_2,fld);
  }
  else ...

Button für ehemaliges Formular 1:
<input name="formular_submit" type="submit" class="button" value="Absenden" onclick="setFormAttributes(this.form,'formular_submit',1);" />

Das Hochladen (Formular 2) klappt wunderbar. Das ehemalige Formular 1 wird aber immer abgeschickt, auch wenn die Validierung false liefert.

Natuerlich, selbst wenn formValidate false zurueckgibt, reichst du diesen Rueckgabewert ja nicht an die aufrufende Stelle weiter, sondern laesst ihn einfach verschimmeln.

Sorge also dafuer, dass der Rueckgabewert von formValidate so an die aufrufende Stelle zurueckgegeben wird, wie du es urspruenglich auch gemacht hattest.

MfG ChrisB

[Bambi]

Hi ChrisB

Danke! Das war der Hinweis, den ich gebraucht habe (auch wenn ich selbst hätte drauf kommen können... *kopfschüttel*).

Also nochmals vielen Dank und liebe Grüsse
Bambi

[Bambi]

Hallo Ihr

Ich hab leider doch nochmal ne Frage, weil mein Formular im IE nicht funktioniert! *heul*

Das Formular sieht nun so aus:

  
<form name="formular" id="formular" enctype="multipart/form-data" method="post" action="index.php" target="_self">  
  <input type="hidden" name="MAX_FILE_SIZE" id="MAX_FILE_SIZE" value="" />  
  <input type="hidden" name="userid" value="<?php echo $userid; ?>" />  
  <input type="hidden" name="upload_fld" id="upload_fld" value="" />  
  
  <input type="file" class="text" name="file1" id="file1" />  
  <input name="file1_submit" id="file1_submit" type="submit" value="hochladen" onclick="return setFormAttributes(this.form,'file1',2,<?php echo $filesize_max; ?>);" />  
  <span class="upload_fertig" id="file1_upload_fertig">Der Upload war erfolgreich.</span>  
  <span class="upload_loading" id="file1_upload_loading"><img src="images/icon_loading.gif" alt="loading" width="32" height="32" style="vertical-align: middle" /> Die Datei wird hochgeladen...</span>  
  
weitere Formularfelder...  
  
  <input name="formular_submit" type="submit" class="button" value="Absenden" onclick="return setFormAttributes(this.form,'formular_submit',1);" />  
</form>  
<iframe name="file1_frame" id="file1_frame" class="hidden" src="about:blank"></iframe>  

Funktion setFormAttributes:

  
function setFormAttributes(f,fld,typ,maxfilesize)  
{  
  if (typ == 1) {  
    f.action = "index.php";  
    f.target = "_self";  
    f.MAX_FILE_SIZE.value = "";  
    f.upload_fld.value = "";  
    if (formValidate(f,var_2,fld) == true) { return true; }  
    else { return false; }  
  }  
  
  else if (typ == 2) {  
    f.action = "includes/check_fileupload.php";  
    f.target = fld + "_frame";  
    f.MAX_FILE_SIZE.value = maxfilesize;  
    f.upload_fld.value = fld;  
    uploadStart(fld);  
    return true;  
  }  
}  

Die Funktion uploadStart wird auch im IE gestartet, bleibt dann aber hängen. Das php-File wird anscheinend gar nicht aufgerufen.

Ich weiss leider nicht recht, wie ich im IE debuggen soll... Mit der IE Developer Toolbar komm ich nicht weiter.

Beim Klick auf den zweiten Button (Validierung) wird die Funktion formValidate zwar aufgerufen, das Formular wird aber auch dann abgeschickt, wenn es das nicht sollte (im Firefox funktioniert das ja einwandfrei.

Ich wär echt unheimlich froh, wenn mir nochmal jemand helfen könnte!

Vielen Dank und liebe Grüsse
Bambi

[Bambi]

Sorry, noch ne Korrektur...

Das mit der Validierung funktioniert doch! War noch ein kleiner Fehler im Skript. Aber der Upload klappt nicht.

Danke und LG, Bambi

[Bambi]

Hallo Ihr

Juhui, nun klappt es. Es lag daran, dass ich in den beiden Funktionen uploadStart() und formValidate() den Button disable. Dann schickt der IE das Formular nicht ab.

Sorry für die Umstände...

LG Bambi