[JS] Wenn Checkbox/ Radiobutton aktiviert = Mehr Optionen

[Maisaffe]

Hi WebDev!

Heute wirds mal exotischer, durch JS!

Ich habe hier

<input type="radio" name="dvd_lent" value="lent" />
Und wenn dort ein Häckhen drin ist in der radiobox, soll hinter die Radiobox dieser HTML Code auftauchen und eine Inputbox anzeigen:

<input name="dvd_lent_friend" size="32" maxlength="64" value="" />

Wie kann ich das lösen?

Dennis

[dead_orc]

Problem: Es gibt keine wirklich valide und ordentliche Methode, das zu bewerstelligen AFAIK. Für solche Probleme gibt es ja die s.g. "Event-Handler (http://de.selfhtml.org/javascript/sprache/eventhandler.htm)". Mit onclick (http://de.selfhtml.org/javascript/sprache/eventhandler.htm#onclick) könnte man valide überprüfen, ob die Checkbox angeklick wird - nicht jedoch, ob sie wieder durch eine andere ersetzt wird. Mit onchange (http://de.selfhtml.org/javascript/sprache/eventhandler.htm#onclick) kann man überprüfen, ob sich der "Wert" des Formularfeldes geändert hat. Jedoch wirkt sich das beim IE erst aus, wenn man die Checkbox wieder "verlässt" (wo anders im Dokument hinklickt). Dann gibt es noch das laut HTML 4.01/XHTML 1.0/1.1 oder whatever nicht existierende Attribut, dessen Name mir nicht einfällt (ebenfalls undokumentiert in SelfHTML). Naja, ich zeig dir einfach mal die Lösung mit onchange (was ja im Fx zumindest auch funktioniert):

<input type="radio" name="dvd_lent" value="lent" onchange="javascript:if(this.checked) { document.getElementById('dvd_lent_friend').style.visible = 'inline'; } else { document.getElementById('dvd_lent_friend').style.visible = 'hidden'; }" />
<input name="dvd_lent_friend" size="32" maxlength="64" value="" id="dvd_lent_friend" />
Du solltest auch wenn du evtl. nur Basiswissen im Bereich JS hast in der Lage sein, den Code noch stark zu vereinfachen, aber dazu habe ich jetzt keine Lust.

[Maisaffe]

Problem: Es gibt keine wirklich valide und ordentliche Methode, das zu bewerstelligen AFAIK. Für solche Probleme gibt es ja die s.g. "Event-Handler (http://de.selfhtml.org/javascript/sprache/eventhandler.htm)". Mit onclick (http://de.selfhtml.org/javascript/sprache/eventhandler.htm#onclick) könnte man valide überprüfen, ob die Checkbox angeklick wird - nicht jedoch, ob sie wieder durch eine andere ersetzt wird. Mit onchange (http://de.selfhtml.org/javascript/sprache/eventhandler.htm#onclick) kann man überprüfen, ob sich der "Wert" des Formularfeldes geändert hat. Jedoch wirkt sich das beim IE erst aus, wenn man die Checkbox wieder "verlässt" (wo anders im Dokument hinklickt). Dann gibt es noch das laut HTML 4.01/XHTML 1.0/1.1 oder whatever nicht existierende Attribut, dessen Name mir nicht einfällt (ebenfalls undokumentiert in SelfHTML). Naja, ich zeig dir einfach mal die Lösung mit onchange (was ja im Fx zumindest auch funktioniert):

<input type="radio" name="dvd_lent" value="lent" onchange="javascript:if(this.checked) { document.getElementById('dvd_lent_friend').style.visible = 'inline'; } else { document.getElementById('dvd_lent_friend').style.visible = 'hidden'; }" />
<input name="dvd_lent_friend" size="32" maxlength="64" value="" id="dvd_lent_friend" />
Du solltest auch wenn du evtl. nur Basiswissen im Bereich JS hast in der Lage sein, den Code noch stark zu vereinfachen, aber dazu habe ich jetzt keine Lust.
Bei mir klappt das weder im IE noch im FF. O.o

Dennis

Edit:
Geht sowas:

JS als PHP


<input name="dvd_lent_friend" maxlength="64" size="32" value="" id="dvd_lent_friend"
<?php if($checkbox == 1) {} else {echo 'hidden';} ?>
/>

Also es soll einfach hidden vor \> geschrieben werden, dann wird ja die Box auch unsichtbar/ verschwindet.

Edit: Code von Orc geht immernoch nicht. :(

[Lukas]

Geht sowas:

JS als PHP


<input name="dvd_lent_friend" maxlength="64" size="32" value="" id="dvd_lent_friend"
<?php if($checkbox == 1) {} else {echo 'hidden';} ?>
/>

Also es soll einfach hidden vor \> geschrieben werden, dann wird ja die Box auch unsichtbar/ verschwindet.Natürlich geht das. Allerdings wird das dann natürlich nur bei der Seitenerstellung überprüft und nicht dynamisch geändert. Und die Variable $checkbox hat natürlich nichts mit den Checkboxen in deinem HTML-Code zu tun. Im Klartext: Nein, du kannst deine Seiten ncith dynamisch mit PHP verändern.

Orcs Code sollte allerdings funktionieren. Hast du die (wahrscheinlich vom Forum erzeugten) Leerzeichen aus dem String 'dvd_lent_friend ' entfernt?

[Maisaffe]

Und die Variable $checkbox hat natürlich nichts mit den Checkboxen in deinem HTML-Code zu tun. Im Klartext: Nein, du kannst deine Seiten ncith dynamisch mit PHP verändern.
Ehm das ist mir auch klar mit PHP.
Ich wollte nur zeigen was ich gerne hätte. Und da es sich als Code (in PHP) besser beschreiben lässt, hab ich das so geschrieben. Das Endgülitge sollte logischerweise PHP sein. >.<

@Leerzeichen: Und ich dachte die gehören bei JS dahin. d'oh!

Dennis