nicht angemeldet
Radiobuttons mit JS dynamisch einfügen?
Hi!
Folgendes Problem:
Ich habe ein Formular entworfen, indem unter anderem eine bestimmte Anzahl abgefragt wird. Nachdem man in diesem Feld eine Zahl eingegeben hat muß man noch einen Button drücken, der dann eine JS-Funktion auslöst.
So und nun das (für mich) schwieige dabei: Diese Funktion soll dann entsprechend der eingegebenen Anzahl eine Tabelle einfügen, in der u.a. auch Radiobuttons vorkommen sollen. Das dynamische erstellen der Tabelle mit Zeilen und Zellen klappt wunderbar, auch Texteingabefelder werden eingefügt. (mit:
getElem("id","tab",null).childNodes[0].childNodes[1].childNodes[1].appendChild(document.createElement("input"));) Da aber Radiobuttons auch input Tags benötigen und nur der Typ (type-Attribut) auf "radio" lauten muß, kann ich diese nicht einfügen, da beim erstellen (über den o.g. createElement) der type automatisch auf "text" gesetzt wird und ich dieses Attribut nicht im Nachhinein auf "radio" setzen kann, da nicht in JS vorgesehen.
Kann mir also jemand erklären, wie ich dynamisch eine bestimmte Anzahl an Radiobuttons im Nachhinein!! erzeugen und diese an einer bestimmte Stelle einfügen kann??
Danke vielmals, leider fehlen mir hierfür die Ideen, ein Suchen im Forum hat nix gebracht...
AB
-
Hallo,
Kann mir also jemand erklären, wie ich dynamisch eine bestimmte Anzahl an Radiobuttons im Nachhinein!! erzeugen und diese an einer bestimmte Stelle einfügen kann??
Mit den gaengigen DOM-Methoden klappt das unter IE und Mozilla problemlos. Dieses Beispiel erzeugt nach dem Laden des Dokuments drei Radio-Buttons im bereits angelegten Formular mit der id="formular":
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Test by TM 11/02</title>
<script language="JavaScript" type="text/javascript">
<!--function CreateRadio(anzahl)
{
for(i=0;i<anzahl;i++)
{
feld=document.createElement("input");
feld.setAttribute("type","radio");
feld.setAttribute("name","auswahl"+anzahl);
document.getElementById("formular").appendChild(feld);
}alert(document.forms[0].elements.length);
}//-->
</script>
</head>
<body onload="CreateRadio(3)">
<form id="formular" action="">
</form>
</body>
</html>MfG, Thomas
-
Hallo,
Kann mir also jemand erklären, wie ich dynamisch eine bestimmte Anzahl an Radiobuttons im Nachhinein!! erzeugen und diese an einer bestimmte Stelle einfügen kann??
Mit den gaengigen DOM-Methoden klappt das unter IE und Mozilla problemlos. Dieses Beispiel erzeugt nach dem Laden des Dokuments drei Radio-Buttons im bereits angelegten Formular mit der id="formular":
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Test by TM 11/02</title>
<script language="JavaScript" type="text/javascript">
<!--function CreateRadio(anzahl)
{
for(i=0;i<anzahl;i++)
{
feld=document.createElement("input");
feld.setAttribute("type","radio");
feld.setAttribute("name","auswahl"+anzahl);
document.getElementById("formular").appendChild(feld);
}alert(document.forms[0].elements.length);
}//-->
</script>
</head>
<body onload="CreateRadio(3)">
<form id="formular" action="">
</form>
</body>
</html>MfG, Thomas
Supi, habs zwar noch nicht getestet, aber das hab ich nicht bedacht. Bin eigentlich genauso vorgegangen wie Du, nur das ich das input Feld erst erzeugt und dann versucht habe das "type" Attribut zu ändern. Man muß also erst das Element erzeugen, dann die Attribute setzten und dann das ganze ins Dokument (Formular) einfügen...
Thx nochmal
Mit internettem Gruß
AB -
[Nachtrag:]
feld.setAttribute("name","auswahl"+anzahl);
Bei Sets von Radio-Buttons waere natuerlich ein einheitlicher Name angebrachter:
feld.setAttribute("name","auswahl");
Die obige Zeile kaeme eher fuer dyn. Checkboxen in Frage.
MfG, Thomas
-
Hi nochmals!
Ich muß dann doch noch, mal nachhaken, habs gerade getestet. Es funktioniert erstmal mit dem einfügen (insofern Danke nochmals), allerdings kann man die Radios nicht anwählen (es erscheint kein Punkt in der Mitte). Getestet mit IE 6 (WinXP), es scheint aber so als würde man es schon auswählen können, man sieht immer das der jeweils gedrückte Radiobutton etwas nach unten gedrückt wird, nur das eben der Punkt danach nicht erscheint. Scheint mir also ne Macke vom IE zu sein. Im Mozilla 1.0.1 geht es. (Im Opera geht es nicht, glaub wegen fehlender DOM Unterstützung)
AB
-
Hallo,
Ich muß dann doch noch, mal nachhaken, habs gerade getestet. Es funktioniert erstmal mit dem einfügen (insofern Danke nochmals), allerdings kann man die Radios nicht anwählen (es erscheint kein Punkt in der Mitte). Getestet mit IE 6 (WinXP), es scheint aber so als würde man es schon auswählen können, man sieht immer das der jeweils gedrückte Radiobutton etwas nach unten gedrückt wird, nur das eben der Punkt danach nicht erscheint.
Der IE mag das Attribut name nicht erzeugen, was sich zeigen laesst:
function CreateRadio(anzahl)
{
for(i=0;i<anzahl;i++)
{
feld=document.createElement("input");
feld.setAttribute("type","radio");
feld.setAttribute("name","auswahl");
document.getElementById("formular").appendChild(feld);
}alert(document.forms[0].elements.length);
alert(document.getElementsByTagName("body")[0].innerHTML);
}Versuche mal, den bereits erzeugten input-Feldern hinterher via setAttribute() den Namen zuzuweisen.
MfG, Thomas
-
Also folgendes ist herausgekommen:
Mit
alert(document.getElementById("formular").childNodes[1].name);
lässt sich das vermeintlich nicht vorhandene Attribut anzeigen (hier vom 2. Radiobutton). Komisch! Im InnerHTML stehts nich. noch komischer!
Dann hab ich das probiert, was du mir geraten hast, leider genau das gleiche, das Attribut lässt sich auslesen, im InnerHTML stehts trotzdem nich.
Ein weiterer Versuch: Ich habe das Attribut versucht zu löschen und neu zu setzen , klappt auch nicht.
Direkt auf das Attribut zugreifen mit:
document.getElementById("formular").childNodes[1].name = "auswahl";
bringt wieder nix.Also eigentlich fällt mir nix mehr ein. Leider...
AB
-
Hallo,
Direkt auf das Attribut zugreifen mit:
document.getElementById("formular").childNodes[1].name = "auswahl";
bringt wieder nix.Also eigentlich fällt mir nix mehr ein. Leider...
Vielleicht hilft dieser schon fast absurde Wuergaround mit dem "manuellen Hinzufuegen" von name="auswahl":
function CreateRadio(anzahl)
{
for(i=0;i<anzahl;i++)
{
feld=document.createElement("input");
feld.setAttribute("type","radio");
feld.setAttribute("name","auswahl");
document.getElementById("formular").appendChild(feld);
}if(document.documentElement.outerHTML)
{
temp1=document.getElementById("formular");
for(i=0;i<temp1.childNodes.length;i++)
{
if(temp1.childNodes[i].type=="radio" && temp1.childNodes[i].name=="auswahl")
{
temp2=document.getElementById("formular").childNodes[i].outerHTML;
document.getElementById("formular").childNodes[i].outerHTML=temp2.substring(0,temp2.length-1)+' name="auswahl">';
}
}
}MfG, Thomas
-
Sorry, da fehlte am Ende noch eine schließende Klammer:
function CreateRadio(anzahl)
{...
}
^^^
MfG, Thomas
-
Puuhhh!
Habs mir jetzt noch nicht genau angesehen, aber dafür Deinen Wuerg!!(war das mit Absicht :) )around getestet. UND ES KLAPPT!!!!!!
:) :) :)
Thx
AB
-
-
-
-
-
-