radio button leiste mit textfeld

[ASchopenhauer]

hallo an alle !
habe folgendes Problem:
in einem formularfeld befindet sich eine radiobutton-leiste, insgesamt 3 stück, der letzte mit zusätzlichem textfeld.

schaut so aus:
<input type="radio" name="Modification" value="Free Acid" checked> Free Acid<br>
<input type="radio" name="Modification" value="Amide"> Amide<br>
<input type="radio" name="Modification" value="Other"> Other: <input type="text" name="OtherModification" size="15">

wenn ich jetzt in das textfeld des letzten radio-button (other) klicke, wird dieser nicht markiert !!
und dies ist mein problem.

Hat irgendjemand eine lösung ??

vielen Dank !!

AS

[Christian]

Hallo.

<input type="radio" name="Modification" value="Free Acid" checked> Free Acid<br>
<input type="radio" name="Modification" value="Amide"> Amide<br>
<input type="radio" name="Modification" value="Other"> Other: <input type="text" name="OtherModification" size="15">

wenn ich jetzt in das textfeld des letzten radio-button (other) klicke, wird dieser nicht markiert !!
und dies ist mein problem.

Natürlich nicht. Woher soll der Browser wissen, dass das input feld noch zum radiobutton gehört?
Die lösung ist einen onKeyup Bereich im Textfeld zu definieren, dass den Radiobutton auswählt.

z.B.
<input type="radio" id="radio1" name="Modification" value="Other"> Other: <input type="text" name="OtherModification" size="15" onKeyup="document.getElementsById('radio1').checked = true;">

Der Code ist nicht getestet, sollte aber funktionieren. Falls du ältere Browser berücksichtigen willst, die kein DOM können, musst du den radiobutton anders ansprechen. Dieser Code sollte aber mit den neueren Browsern funktionieren.

Grüsse,
  Christian

[Christian]

verzeihung: es muss heißen "getElementById" also
onKeyup="document.getElementsById('radio1').checked = true;"

[Daniel]

verzeihung: es muss heißen "getElementById" also

Dann auch im Code ändern: ;-)

onKeyup="document.getElementById('radio1').checked = true;"

[Cheatah]

Hi,

Der Code ist nicht getestet, sollte aber funktionieren.

tut er (auch nach Deiner Korrektur) nicht, er geht von falschen Voraussetzungen aus. Das ist einer der Gründe, wegen denen Du bitte hier keine fertigen Codes postest. Weitere Gründe siehe Archiv.

Falls du ältere Browser berücksichtigen willst,

Ich verstehe nicht, was Du mit dem Wort "falls" meinst.

Cheatah

[Christian]

Hallo Cheatah.

tut er (auch nach Deiner Korrektur) nicht, er geht von falschen Voraussetzungen aus. Das ist einer der Gründe, wegen denen Du bitte hier keine fertigen Codes postest. Weitere Gründe siehe Archiv.

Ich bitte um Entschuldigung dafür. Trotzdem weiß ich nicht, welche Vorraussetzungen du ansprichst (Browservorraussetzungen, Vorraussetzungen auf der Beispielseite, etc?).

Auch wenn ich keinen Code posten sollte, so will ich wenigstens versuchen den dadurch entstandenen "Schaden" zu beheben. Vielleicht stimmt dich ja die folgende Lösung versönlicher:

<input type="radio" id="radio1" name="Modification" value="Other"> Other: <input type="text" name="OtherModification" size="15" onKeyup="if (document.getElementById) { document.getElementById('radio1').checked = true; }">

Nutzer von Älteren Browser ohne DOM haben hier zwar einen Klick mehr zu machen, aber zumindest keinen Javascript-Fehler.

Grüsse,
  Christian

P.S.: Der code ist jetzt getestet.

[Alexander Foken]

Moin Moin !

Hallo Cheatah.

tut er (auch nach Deiner Korrektur) nicht, er geht von falschen Voraussetzungen aus. Das ist einer der Gründe, wegen denen Du bitte hier keine fertigen Codes postest. Weitere Gründe siehe Archiv.

Ich bitte um Entschuldigung dafür. Trotzdem weiß ich nicht, welche Vorraussetzungen du ansprichst (Browservorraussetzungen, Vorraussetzungen auf der Beispielseite, etc?).

Eben, Du kennst die Rahmenbedingungen nicht, unter denen Dein Codeschnipsel mal laufen wird. Deswegen kann Dein Code mehr schaden als nutzen, sowohl direkt (Abstürze, Datenverlust, ...) als auch indirekt (Lernen von unpassenden, veralteten oder gefährlichen Techniken). Und deswegen reitet Cheatah auch so darauf herum, das man besser keinen Code postet.

<input type="radio" id="radio1" name="Modification" value="Other"> Other: <input type="text" name="OtherModification" size="15" onKeyup="if (document.getElementById) { document.getElementById('radio1').checked = true; }">

OnChange würde in der Regel auch funktionieren, und ein Formularelement spricht man völlig unabhängig vom Browser und DOM über document.forms['formname'].elements['elementname'] an, siehe http://selfhtml.teamone.de/javascript/objekte/elements.htm. Hier also document.forms['formname'].elements['Modification'][2].checked=true. Weiterhin gibt es das "this"-Objekt, so daß man auf das aktuelle Formular auch über this.form herankommt, und dann weiter mit this.form.elements['Modification'][2].checked=true.

Alexander

[Christian]

Hallo Alexander.

Eben, Du kennst die Rahmenbedingungen nicht, unter denen Dein Codeschnipsel mal laufen wird. Deswegen kann Dein Code mehr schaden als nutzen, sowohl direkt (Abstürze, Datenverlust, ...) als auch indirekt (Lernen von unpassenden, veralteten oder gefährlichen Techniken). Und deswegen reitet Cheatah auch so darauf herum, das man besser keinen Code postet.

Danke für die Erklärungen.

OnChange würde in der Regel auch funktionieren, und ein Formularelement spricht man völlig unabhängig vom Browser und DOM über document.forms['formname'].elements['elementname'] an, siehe http://selfhtml.teamone.de/javascript/objekte/elements.htm. Hier also document.forms['formname'].elements['Modification'][2].checked=true. Weiterhin gibt es das "this"-Objekt, so daß man auf das aktuelle Formular auch über this.form herankommt, und dann weiter mit this.form.elements['Modification'][2].checked=true.

onChange funktioniert auch, hat aber das Problem, dass einige Browser es erst auslösen, wenn ein anderes Form Element nach der Aktion den Fokus erhält und dabei dummerweise den Submitbutton nicht beachten, so dass die Anweisungen u.U. nicht ausgeführt werden.
Die Lösung mit der id hatte ich bevorzugt, da so auch bei einer Änderung der Form (Einfügen eines weiteren radiobuttons, umbenennen etc) der Code noch funktioniert.
Was das Code posten angeht, so gelobe ich Besserung ;-)

Grüsse,
  Christian

[Alexander Foken]

Moin Moin !

onChange funktioniert auch, hat aber das Problem, dass einige Browser es erst auslösen, wenn ein anderes Form Element nach der Aktion den Fokus erhält und dabei dummerweise den Submitbutton nicht beachten, so dass die Anweisungen u.U. nicht ausgeführt werden.

... und andere Browser verstehen den DOM-Code einfach nicht. Deswegen sind auf jeden Fall noch weitere Prüfungen nötig, die keiner von uns auch nur erwäht hat. Wieder ein Punkt für Cheatahs Argument, keinen Code als "fertig" zu posten.

Die Lösung mit der id hatte ich bevorzugt, da so auch bei einer Änderung der Form (Einfügen eines weiteren radiobuttons, umbenennen etc) der Code noch funktioniert.

Es dürfte wahrscheinlich immer das letzte Element sein, dann funktioniert z.B. auch this.form.elements['Modification'][this.form.elements['Modification'].length-1].checked=true, wieder ohne problematischen DOM-Code.

Da auf der Serverseite ein Script das Formular auswertet (davon gehe ich jedenfalls mal aus), könnte das Formular auch gleich von einem Script erzeugt werden, samt dynamisch erzeugtem Javascript-Code für die Prüfungen. Damit sind die Namen völlig irrelevant, darum kümmert sich serverseitiger Code.

Alexander

[Cheatah]

Hi,

das textfeld des letzten radio-button (other)

diese Formulierung ist irreführend. Zwischen den beiden Elementen existiert keinerlei Verbindung.

Hat irgendjemand eine lösung ??

Mittels JavaScript kannst Du dem User, sofern dieser in seinem Client JavaScript aktiviert hat, den einen Klick ersparen.

Cheatah