Michelle: Formular-Feld (array) ansprechen in Funktion

Hallo zusammen

Ich versuche gerade, dieses Skript (http://aktuell.de.selfhtml.org/artikel/javascript/formkontrolle/">) anzupassen und scheitere leider kläglich...

In meinem Formular hat es neben Textfeldern auch Checkboxen, Radiobuttons und Select Multiple Felder. Die Namen dieser Felder müssen ja mit einem [] enden, damit ich sie später via PHP auswerten kann.

Mein Skriptlein funktioniert für alle Felder ausser eben diese Array-Felder und ich komm nicht drauf, wie ich das ansprechen soll.

Hier kommt mal der Anfang der angepassten Funktion:

function validate(f,myarray) {
  for (var i=0; i < myarray.length; i++) {
    var feld = f.elements[myarray[i][0]];

if (myarray[i][1].indexOf('e') > -1) {
      // Pflichtfeld
      if (feld.type=="text" || feld.type=="password" || feld.type=="textarea" || feld.type=="file") {
        // Text-Feld, Passwort-Feld, Textarea oder Datei Upload
        if(!checkLeerText(feld)) {
          alert ("Das Feld " + feld.name + " ist leer!");
        }
        else {
          alert ("Das Feld " + feld.name + " ist ausgefüllt.");
        }
      }
      else if (feld.type=="select-multiple" || feld.type=="select-one") {
        // Select-Liste (single oder multiple)
        if(!checkLeerSelect(feld)) {
          alert ("Das Feld " + feld.name + " ist leer!");
        }
        else {
          alert ("Das Feld " + feld.name + " ist ausgefüllt.");
        }
      }
      else if (feld.type=="checkbox" || feld.type=="radio") {
        // Checkbox oder Radio-Button
        if(!checkLeerRadioCheckbox(f, feld.name)) {
          alert ("Das Feld " + feld.name + " ist leer!");
        }
        else {
          alert ("Das Feld " + feld.name + " ist ausgefüllt.");
        }
      }
      else {
        alert ("Fehler...");
      }
    }
  }
}

Die ganzen Alerts sind einfach eine Hilfe für mich...

Der "myarray" sieht so aus:

var var_1 = new Array()
  var_1[0] = new Array('textfeld1','e','Bitte füllen Sie das Pflichtfeld aus.','');
  var_1[1] = new Array('textarea1','e','Bitte füllen Sie das Pflichtfeld aus.','');
  var_1[2] = new Array('checkbox1[]','e','Bitte wählen Sie mindestens eine Box aus.','');
  var_1[3] = new Array('radiobutton1[]','e','Bitte wählen Sie eine Option aus.','');
  var_1[4] = new Array('select1a','e','Bitte wählen Sie einen Eintrag aus der Liste.','');
  var_1[5] = new Array('select1b','e','Bitte wählen Sie einen Eintrag aus der Liste.','');
  var_1[6] = new Array('select1c[]','e','Bitte wählen Sie mindestens einen Eintrag aus der Liste.','');

Wenn ich die Funktion so aufrufe, lande ich bei checkbox1 und radiobutton1 beim Alert "Fehler...". Beim Feld select1c (das ist ein Select multiple Feld) klappt es aber interessanterweise!

Wenn ich nach der Zeile var feld = ... den folgenden Code einfüge:

if (!feld.type)
    {
      var feldarray = myarray[i][0];
      var feld = f.elements[feldarray];
    }

Passiert genau das selbe wie oben. Aber es klappt auch nicht, wenn ich direkt var feld = f.elements['checkbox1[]'] eingebe, und wenn ich diese Nachricht (href="http://forum.de.selfhtml.org/archiv/2006/8/t134399/">) richtig verstanden habe, müsste es so doch gehen?

Ich blick da echt nicht mehr durch und wäre sehr froh, wenn mir jemand einen Tipp geben könnte.

Vielen Dank und liebe Grüsse, Michelle

  1. var feldarray = myarray[i][0];
          var feld = f.elements[feldarray];

    Hast du dir mal probehalber ausgeben lassen was überhaupt in feldarray steht?

    Struppi.

    1. Hallo Struppi

      In feldarray steht checkbox1[] bzw. radiobutton1[].

      Vielen Dank für Deine Hilfe!

      LG Michelle

  2. Hallo,

    Wenn ich die Funktion so aufrufe, lande ich bei checkbox1 und radiobutton1 beim Alert "Fehler...". Beim Feld select1c (das ist ein Select multiple Feld) klappt es aber interessanterweise!

    Somit ist klar, dass der Zweig

    else if (feld.type=="checkbox" || feld.type=="radio") {[...]

    nicht greift.

    gib doch vor den ganzen if-Statements erst einmal den Feldtyp mit

      
    alert('|' + feld.type + '|'); 
    

    aus.

    Was wird angezeigt? Hast du den Feldtyp im HTML auch wirklich genau so gesetzt (<input type="radio"> bzw. <input type="checkbox">)?

    Gruß, Don P

    1. Hallo Don P

      Vielen Dank für Deine Antwort.

      gib doch vor den ganzen if-Statements erst einmal den Feldtyp mit

      alert('|' + feld.type + '|');

      
      > aus.  
        
      Hast Recht, da kommt undefined.  
        
      
      > Hast du den Feldtyp im HTML auch wirklich genau so gesetzt (<input type="radio"> bzw. <input type="checkbox">)?  
        
        
      Mein HTML sieht so aus:  
        
      <input type="checkbox" name="checkbox1[]" value="1" />  
      <label for="checkbox1\_1">Checkbox 1-1</label>  
      <input type="checkbox" name="checkbox1[]" value="2" />  
      <label for="checkbox1\_2">Checkbox 1-2</label>  
      <input type="checkbox" name="checkbox1[]" value="3" />  
      <label for="checkbox1\_3">Checkbox 1-3</label>  
        
      bzw.  
        
      <input type="radio" name="radiobutton1[]" value="1" />  
      <label for="radiobutton1\_1">Option 1-1</label>  
      <input type="radio" name="radiobutton1[]" value="2" />  
      <label for="radiobutton1\_2">Option 1-2</label>  
      <input type="radio" name="radiobutton1[]" value="3" />  
      <label for="radiobutton1\_3">Option 1-3</label>  
        
        
      Vielen Dank für's anschauen!  
        
      LG Michelle  
      
      
      1. Hallo,

        Mein HTML sieht so aus:

        <input type="checkbox" name="checkbox1[]" value="1" />
        <label for="checkbox1_1">Checkbox 1-1</label>
        <input type="checkbox" name="checkbox1[]" value="2" />
        <label for="checkbox1_2">Checkbox 1-2</label>
        <input type="checkbox" name="checkbox1[]" value="3" />
        <label for="checkbox1_3">Checkbox 1-3</label>

        bzw.

        <input type="radio" name="radiobutton1[]" value="1" />
        <label for="radiobutton1_1">Option 1-1</label>
        <input type="radio" name="radiobutton1[]" value="2" />
        <label for="radiobutton1_2">Option 1-2</label>
        <input type="radio" name="radiobutton1[]" value="3" />
        <label for="radiobutton1_3">Option 1-3</label>

        Tja, dann scheint mir der Fall klar: Da jeweils mehrere <input>s mit demselben Namen definiert sind (was an sich i.O. ist, wenn man sie als Gruppe haben will), kann anschließend nicht mehr ermittelt werden, welches Feld gemeint ist, und so kommt nur noch undefined raus. Du müsstest wohl für jede Checkbox einen eigenen Namen vergeben.

        Mit den Radio-Buttons wird es dann aber schwierig. Die müssen ja unbedingt denselben Namen haben. Vielleicht ist der ganze Ansatz mit den Namen der Formularelemente ungeschickt und man sollte liebe mit eindeutigen IDs arbeiten, um sie zu identifizieren.

        Gruß, Don P

        1. Hallo Don P

          Tja, dann scheint mir der Fall klar: Da jeweils mehrere <input>s mit demselben Namen definiert sind (was an sich i.O. ist, wenn man sie als Gruppe haben will), kann anschließend nicht mehr ermittelt werden, welches Feld gemeint ist, und so kommt nur noch undefined raus.

          Ja, das würde dann auch erklären, weshalb es beim Select-Feld funktioniert...

          Vielleicht ist der ganze Ansatz mit den Namen der Formularelemente ungeschickt und man sollte liebe mit eindeutigen IDs arbeiten, um sie zu identifizieren.

          Ich verstehe nicht genau, wie Du das meinst. Wie soll ich den Feldern denn eine eindeutige ID zuweisen?

          Danke für Deine Hilfe!

          LG, Michelle

      2. Mein HTML sieht so aus:

        <input type="checkbox" name="checkbox1[]" value="1" />
        <label for="checkbox1_1">Checkbox 1-1</label>
        <input type="checkbox" name="checkbox1[]" value="2" />
        <label for="checkbox1_2">Checkbox 1-2</label>
        <input type="checkbox" name="checkbox1[]" value="3" />
        <label for="checkbox1_3">Checkbox 1-3</label>

        form.elements['checkbox1[]'] ist eine Array genauer eine Collection, d.h. du musst die Elemente ansprechen wie ein Array.

        Struppi.

        1. Hallo Struppi

          Das war's, vielen Dank!

          Hat zwar etwas gedauert, bis ich das umsetzen konnte, aber jetzt sieht's ganz einfach aus:

          Statt else if (feld.type=="checkbox" || feld.type=="radio") { ... }

          schreibe ich neu

          else {
                // Checkbox oder Radio-Button
                if (feld.length > 1) {
                  // es existieren mehrere Radiobuttons bzw. Checkboxen -> Testen
                  for (var x=0; x < feld.length; x++) {
                    if (feld[x].checked) {
                      optionvoll = true;
                    }
                  }
                }
              }

          oder statt nur else könnte man auch else if (feld[0].type=="checkbox" ... schreiben.

          Schon wieder was gelernt. :-) Nochmals danke Struppi.

          LG Michelle