Formular-Feld (array) ansprechen in Funktion
Michelle
- javascript
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
var feldarray = myarray[i][0];
var feld = f.elements[feldarray];
Hast du dir mal probehalber ausgeben lassen was überhaupt in feldarray steht?
Struppi.
Hallo Struppi
In feldarray steht checkbox1[] bzw. radiobutton1[].
Vielen Dank für Deine Hilfe!
LG Michelle
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
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
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
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
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.
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