Formular erweitern

[Raucherkrebs]

Guten Tag Forum,

ich möchte, dass wenn jeman in ein Feld klickt darunter 2 radiobuttons erscheinen, in denen er dann etwas zu diesem Feld spezifizieren kann.

Wie geht das?

[wahsaga]

hi,

ich möchte, dass wenn jeman in ein Feld klickt darunter 2 radiobuttons erscheinen, in denen er dann etwas zu diesem Feld spezifizieren kann.

Wie geht das?

du kannst entweder zwei bereits von vornherein im dokument vorhandene buttons einblenden (CSS-eigenschaft display oder visibility dynamisch per style-objekt verändern), oder du kannst sie neu erzeugen, in dem du dich der DOM-methoden createElement, appendChild etc. bedienst.

gruß,
wahsaga

[Raucherkrebs]

Hallo,

momentan ist es so, und es klappt auch.
Allerdings wird für das versteckte Element Platz reserviert. Das ist nich so gut. So gibt es unter dem Eingabefeld eine Lücke:

JAVASCRIPT

function showID1() {
    if(document.getElementById) {
        document.getElementById("id1").style.visibility = "visible";
    }
}

HTML<tr><td>Berufsausbildung zum:</td></tr>
<tr><td><input type="text" name="workEducation" size="40" onfocus="showID1()" /></td></tr>
<tr><td>
<div id="id1" style="visibility: hidden;">
<input type="radio" name="workEducationCompleted"  value="ja" checked="checked" />mit Abschluß
<input type="radio" name="workEducationCompleted"  value="nein" />ohne Abschluß
</div>
</td></tr>

[wahsaga]

hi,

Allerdings wird für das versteckte Element Platz reserviert.

ja, so soll visibility ja auch wirken - works as designed.

aber ich empfahl dir ja alternativ noch eine weitere CSS-eigenschaft - und die macht vermutlich das, was du willst.

(btw: wenn ich dir die beiden als stichwort nenne, gehe ich eigentlich davon aus, dass du bzgl. deren unterschiede mal in self nachschlägst ...)

gruß,
wahsaga

[Arx]

Hallo,

ich möchte, dass wenn jeman in ein Feld klickt darunter 2 radiobuttons erscheinen, in denen er dann etwas zu diesem Feld spezifizieren kann.

Wie geht das?

Weise dem Feld im onClick-Eventhandler ein kleines JavaScript zu, dass die CSS-Eigenschaft display der Radiobuttons auf einen anderen Wert als  none setzt.

Wenn der Nutzer JavaScript deaktiviert hat, wird dies allerdings nicht funktionieren. Besser wäre es, die Radiobuttons immer anzuzeigen und die Eingaben des Nutzers serverseitig auf Plausibilität zu prüfen.

Gruß aus Bonn
Sven

[Raucherkrebs]

Wenn der Nutzer JavaScript deaktiviert hat, wird dies allerdings nicht funktionieren. Besser wäre es, die Radiobuttons immer anzuzeigen und die Eingaben des Nutzers serverseitig auf Plausibilität zu prüfen.

Das ist natürlich klar. Die Formulare werden grundsätzlich serverseitig überprüft. JAvascript ist nur ein Bonus.

[Louis]

Hallo zusammen

Weise dem Feld im onClick-Eventhandler ein kleines JavaScript zu, dass die CSS-Eigenschaft display der Radiobuttons auf einen anderen Wert als  none setzt.

(oder visibility:hidden/visible, falls kein Platz reserviert werden soll)

Wenn der Nutzer JavaScript deaktiviert hat, wird dies allerdings nicht funktionieren. Besser wäre es, die Radiobuttons immer anzuzeigen und die Eingaben des Nutzers serverseitig auf Plausibilität zu prüfen.

Ich würde da empfehlen, die Radiobuttons ganz normal ins html einfügen und auch ohne sie auszublenden. Und erst bei onLoad o.ä. mit Javascript display bzw. visibility auf none/hidden setzen. So bist Du sicher, dass sie wieder gezeigt werden, wenn sie mit onClick sichtbar gemacht werden.
Ohne JS werden sie einfach immer angezeigt. (Javascript soll ja einfach dazu da sein, die Verwendung des Formulars zu vereinfachen, aber nicht 'im Weg' stehen)

Gruss
Louis

[wahsaga]

hi,

Weise dem Feld im onClick-Eventhandler ein kleines JavaScript zu, dass die CSS-Eigenschaft display der Radiobuttons auf einen anderen Wert als  none setzt.
(oder visibility:hidden/visible, falls kein Platz reserviert werden soll)

nö, genau andersherum - display:none = ausblenden ohne, visibility:hidden = ausblenden mit platzhalter.

gruß,
wahsaga

[Louis]

hallo

nö, genau andersherum - display:none = ausblenden ohne, visibility:hidden = ausblenden mit platzhalter.

öh, ja tatsächlich. Ich musste mein Satz nochmals 5mal lesen, bis ich begriffen habe, ja natürlich selbstverständlich andersrum...

Gruss
Louis

[Raucherkrebs]

Danke! Hier das Ergebnis, allerdings kein erfolgreiches:

function hide(id) {
    if(document.getElementById) {
        document.getElementById(id).style.display = "none";
    }
}

function show(id) {
    if(document.getElementById) {
        document.getElementById(id).style.display = "block";
    }
}

<body onload="hide(wec);">

<tr><td><input type="text" name="workEducation" size="40" onfocus="show(wec)" /></td></tr>
<tr><td>
<div id="wec" style="display: block;">
<input type="radio" name="workEducationCompleted"  value="ja" checked="checked" />mit Abschluß
<input type="radio" name="workEducationCompleted"  value="nein" />ohne Abschluß
</div>
</td></tr>

Bei Laden der Seite wird das zu versteckende Element angezeigt.
Sieht jemand den Fehler?

[Louis]

Hallo

<body onload="hide(wec);">

<tr><td><input type="text" name="workEducation" size="40" onfocus="show(wec)" /></td></tr>
<tr><td>
<div id="wec" style="display: block;">

------------------- ^^^^^^^^^^^^^^^^^^^^ mal weglassen

<input type="radio" name="workEducationCompleted"  value="ja" checked="checked" />mit Abschluß
<input type="radio" name="workEducationCompleted"  value="nein" />ohne Abschluß
</div>
</td></tr>

Lass mal das display:block weg, denn das ist ja der Standard und deshalb nicht noetig. Es kann sein, dass hier wieder die Eigenschaft, welche beim onLoad gesetzt wurde, wieder ueberschrieben wird.

Gruss
Louis

[Ingo Turski]

Hi,

<body onload="hide(wec);">

Du übergibst hier einen undefinierten Wert, was Dir eigentlich sogar der IE gesagt haben müßte.

freundliche Grüße
Ingo