Select-Liste durch <input> erweitern

#1

Guten Abend!

Ich habe in einem HTML-Formular ein Dropdownmenü (<select>), mit dem ein
Besucher eine Frage in diesem Stil beantworten können soll:

Was ist dein Libelingsgericht?
- Pizza
- Schwarzsauer
- Tomatensuppe
- Etwas anderes

Wenn man in dieser Liste jetzt "Etwas anderes" wählt (und nur dann),
soll ein <input />-Feld unter der Liste erscheinen, in das man dann
seine eigene Antwort eintragen kann, um im Anschluss die Formular-Daten
abzuschicken.

Hat jemand ein kleines Script auf Lager (oder die nötigen Tipps für
einen JS-Neuling), mit dem sich so etwas umsetzen lässt?
Google konnte mir leider nicht helfen, weil mir keine präzisen
Suchbegriffe hierfür einfallen wollen.

Ich bedanke mich vorab für jede Hilfe!

- André

#2

"André Wilke" <andre-info (AT) arcor (DOT) de> wrote

Quote:

Guten Abend!

Ich habe in einem HTML-Formular ein Dropdownmenü (<select>), mit dem
ein Besucher eine Frage in diesem Stil beantworten können soll:

Was ist dein Libelingsgericht?
- Pizza
- Schwarzsauer
- Tomatensuppe
- Etwas anderes

Wenn man in dieser Liste jetzt "Etwas anderes" wählt (und nur dann),
soll ein <input />-Feld unter der Liste erscheinen, in das man dann
seine eigene Antwort eintragen kann, um im Anschluss die
Formular-Daten abzuschicken.

Hat jemand ein kleines Script auf Lager (oder die nötigen Tipps für
einen JS-Neuling), mit dem sich so etwas umsetzen lässt?
Google konnte mir leider nicht helfen, weil mir keine präzisen
Suchbegriffe hierfür einfallen wollen.

Ich bedanke mich vorab für jede Hilfe!

Keine Scheu - jeder fängt mal klein an.
Heutzutage [tm] möchte man für sowas nicht mehr die Seite neu laden und
geht folgendermaßen vor:

(Variante 1) (!! hoch-proprietär!! und nicht empfohlen, obwohl Firefox
es duldet (hätte er m. E. nicht müssen))
- Leeres DIV in deine HTML-Seite einfügen:
<DIV id="meindiv"></DIV>

- Jetzt fragst du ab, ob "Etwas anderes" selektiert wurde, und wenn ja:
document.getElementById("meindiv").innerHTML = "<input .... usw.>";

-------------

(Variante 2)
<DIV id="meindiv"><input type="....></DIV>

- _Bevor_ (!) du diese Auswahlliste anzeigst, schaltest du das DIV ab:
document.getElementById("meindiv").style.display = "none";
Das kann auch schon im BODY mit onLoad=abschalten() oder so geschehen.

- Falls "Etwas anderes" ausgewählt wurde:
document.getElementById("meindiv").style.display = "block"; // ODER
"inline"; sollte in deinem Fall nicht von Belang sein

-----------

(Variante 3) schreibe ich hier nicht aus, die ist etwas mehr Tipparbeit,
weil man mit var oInput = document.createElement("INPUT") das Element
dynamisch erzeugt, und alle benötigten Attribute mit Eigenschaften
('.'-Operator) setzen muss (z. B. oInput.type = "submit"; ). Sobald das
Objekt "fertig" ist, wird es dann mit
document.getElementById("meindiv").appendChild (oInput) ins DIV
eingekettet.

-Andreas

#3

Andreas Eibach wrote:

Quote:

"André Wilke" <andre-info (AT) arcor (DOT) de> wrote in message
news:47360671$0$13113$9b4e6d93 (AT) newsspool2 (DOT) arcor-online.net...

Bitte keine Einleitungsromane! ---> http://oe-faq.de/

Quote:

[...]
Ich habe in einem HTML-Formular ein Dropdownmenü (<select>), mit dem
ein Besucher eine Frage in diesem Stil beantworten können soll:

Was ist dein Libelingsgericht?
- Pizza
- Schwarzsauer
- Tomatensuppe
- Etwas anderes

Wenn man in dieser Liste jetzt "Etwas anderes" wählt (und nur dann),

Für eine solche Auswahl sind Radiobuttons besser geeignet.

Quote:

soll ein <input />-Feld unter der Liste erscheinen, in das man dann
^

Bitte lern den Unterschied zwischen HTML und XHTML. Tipp: Du willst hier
bestimmt kein XHTML benutzen, vertrau mir.

Quote:

seine eigene Antwort eintragen kann, um im Anschluss die
Formular-Daten abzuschicken.
[...]

[...]
(Variante 2)
DIV id="meindiv"><input type="....></DIV

- _Bevor_ (!) du diese Auswahlliste anzeigst, schaltest du das DIV ab:
document.getElementById("meindiv").style.display = "none";
Das kann auch schon im BODY mit onLoad=abschalten() oder so geschehen.

Es sollte *nur* dort geschehen. Ein div-Element ist jedoch unnötig. Konkret:

...
<meta http-equiv="Content-Script-Type" content="text/javascript">
<script type="text/javascript">
function abschalten()
{
document.forms[0].elements["other_text"].style.display = "none";
}
</script>
</head>

<body onload="abschalten()">
<form ...>
...
<label>nämlich: <input name="other_text" ...></label>
...
</form>
</body>

Quote:

- Falls "Etwas anderes" ausgewählt wurde:
document.getElementById("meindiv").style.display = "block"; // ODER
"inline"; sollte in deinem Fall nicht von Belang sein

Diese Variante ist als einzige empfehlenswert, da dann auch Benutzer ohne
Script-Support etwas von dem Formular haben (man Barrierefreiheit).

Meiner Erfahrung nach sind Benutzer jedoch regelmässig verwirrt, wenn
Inhalte plötzlich aus- oder eingeblendet werden; das input-Element sollte
daher nicht ausgeblendet, sondern lediglich deaktiviert werden; in diesem
Zustand wird es auch beim Absenden des Formulars nicht übertragen. Daher:

function abschalten()
{
document.forms[0].elements["other_text"].disabled = true;
}

PointedEars
--
Andererseits wäre auf einer Seite unter vu-Domain mit Zappelgifs,
Mustertapete, MS Sans Comic und Frames ein fehlender Counter ein
glatter Stilbruch.
(Olaf P÷hlmann in dciwam <asl6a6$rm0$04$1 (AT) news (DOT) t-online.com>)

#4

Thomas 'PointedEars' Lahn schrieb:

Quote:

Andreas Eibach wrote:
[...]
Ich habe in einem HTML-Formular ein Dropdownmenü (<select>), mit dem
ein Besucher eine Frage in diesem Stil beantworten können soll:

Was ist dein Libelingsgericht?
- Pizza
- Schwarzsauer
- Tomatensuppe
- Etwas anderes

Wenn man in dieser Liste jetzt "Etwas anderes" wählt (und nur dann),

Für eine solche Auswahl sind Radiobuttons besser geeignet.

Die Liste wird durchaus ein ganzes Stücl länger sein, ich wollte nur ein
konkretes, eingägiges Beispiel zeigen.

Quote:

soll ein <input />-Feld unter der Liste erscheinen, in das man dann

^
Bitte lern den Unterschied zwischen HTML und XHTML.

Längst geschehen. Ich hätte oben bereits XHTML schreiben sollen, hab's
aber vergessen.

Quote:

Tipp: Du willst hier bestimmt kein XHTML benutzen, vertrau mir.

Warum sollte ich kein XHTML benutzen?

Quote:

snip: Code und Hinweise

Vielen Dank Andreas, du hast mir sehr weitergeholfen!
Auch dir vielen Dank, Thomas, für deine Hinweise.

42,
André

#5

Gregor Kofler wrote:

Quote:

André Wilke meinte:
Warum sollte ich kein XHTML benutzen?

U.a.:

Weil es der beste und meistbenutzte Browser auf diesem Erdenrund nicht
unterstützt.

Der meistbenutzte -- OK. Aber u.a. aus obigem Grund wohl kaum der beste.
Oder hast Du die Sarkasmus-Tags vergessen?

PointedEars
--
Lass den Käse mit MS-Fromage besser sein, lerne HTML (kennen) und designe
mit einem gescheitem Editor (z.B Notepad (c

. (Michael 'Netzmeister Micha'
Specht in http://selfhtml.de/forum/zeigebeitra...563_78273.php3

#6

"Thomas 'PointedEars' Lahn" <PointedEars (AT) web (DOT) de> wrote:

Quote:

Für eine solche Auswahl sind Radiobuttons besser geeignet.

Jo.

Quote:

(Variante 2)
DIV id="meindiv"><input type="....></DIV

- _Bevor_ (!) du diese Auswahlliste anzeigst, schaltest du das DIV
ab:
document.getElementById("meindiv").style.display = "none";
Das kann auch schon im BODY mit onLoad=abschalten() oder so
geschehen.

Es sollte *nur* dort geschehen. Ein div-Element ist jedoch unnötig.
Konkret:

...
meta http-equiv="Content-Script-Type" content="text/javascript"
script type="text/javascript"
function abschalten()
{
document.forms[0].elements["other_text"].style.display =
"none";
}
/script
/head

Prinzipiell OK; nur bevorzuge ich <div> aus einem Grund: Unabhängigkeit
vom Elementindex!
Angenommen da kommt in der Zukunft noch ein <form>-Block obendrüber;
dann müsste ich händisch den 0-index in einen 1-index ändern.
Durch div samt id referenziere ich alles unique, und weiß genau was ich
anfasse.

-Andreas

#7

Andreas Eibach wrote:

Quote:

"Thomas 'PointedEars' Lahn" <PointedEars (AT) web (DOT) de> wrote:
- _Bevor_ (!) du diese Auswahlliste anzeigst, schaltest du das DIV
ab:
document.getElementById("meindiv").style.display = "none";
Das kann auch schon im BODY mit onLoad=abschalten() oder so
geschehen.
Es sollte *nur* dort geschehen. Ein div-Element ist jedoch unnötig.
Konkret:

...
meta http-equiv="Content-Script-Type" content="text/javascript"
script type="text/javascript"
function abschalten()
{
document.forms[0].elements["other_text"].style.display =
"none";
}
/script
/head

Prinzipiell OK; nur bevorzuge ich <div> aus einem Grund: Unabhängigkeit
vom Elementindex!
Angenommen da kommt in der Zukunft noch ein <form>-Block obendrüber;
dann müsste ich händisch den 0-index in einen 1-index ändern.

Nein, denn das Formular kann einen Namen haben, den Du ebenfalls als
Eigenschaftsnamen verwenden kannst. Es handelt sich heutzutage um ein
Objekt, welches das HTMLCollection-Interface von W3C DOM Level 2 HTML
implementiert. (Das war jedoch bei DOM Level 0 auch, also schon immer, so.)

PointedEars
--
Du fragst Leute, die normalerweise gern Information weitergeben, wie Du
Information verheimlichen kannst? Ist das nicht ein bisschen ... nunja ...
seltsam? (Ulrich 'Droeppez' Kritzner zu einem Quelltextsperrer in
http://selfhtml.de/forum/zeigebeitra...4&thread=39241)

#8

"Thomas 'PointedEars' Lahn" <PointedEars (AT) web (DOT) de> wrote:

Quote:

Nein, denn das Formular kann einen Namen haben, den Du ebenfalls als
Eigenschaftsnamen verwenden kannst. Es handelt sich heutzutage um ein
Objekt, welches das HTMLCollection-Interface von W3C DOM Level 2 HTML
implementiert. (Das war jedoch bei DOM Level 0 auch, also schon
immer, so.)

Dann sage mir doch bitte auch, wie man das anspricht, damit ich nicht
wieder diese unsägliche MS-Krücke document.all verwenden muss. Dass ich
es _dort_ direkt ansprechen kann, weiß ich. Nur für mich existiert
document.all faktisch nicht

-Andreas

#9

Andreas Eibach wrote:

Quote:

"Thomas 'PointedEars' Lahn" <PointedEars (AT) web (DOT) de> wrote:
Nein, denn das Formular kann einen Namen haben, den Du ebenfalls als
Eigenschaftsnamen verwenden kannst. Es handelt sich heutzutage um ein
Objekt, welches das HTMLCollection-Interface von W3C DOM Level 2 HTML
implementiert. (Das war jedoch bei DOM Level 0 auch, also schon
immer, so.)

Dann sage mir doch bitte auch, wie man das anspricht, damit ich nicht
wieder diese unsägliche MS-Krücke document.all verwenden muss. [...]

Gern.

<head>
...
<meta http-equiv="Content-Script-Type" content="text/javascript">
<script type="text/javascript">
function disableInput()
{
document.forms["foo"].elements["bar"].disabled = true;
}
</script>
...
</head>

<body onload="disableInput();">
...
<form action="..." ... name="foo">
...
<input ... name="bar">
...
</form>
...
</body>

Bei UAs, die mindestens W3C DOM Level 1 HTML implementieren, funktioniert
das mit Namen und IDs, sonst nur mit Namen.

http://www.w3.org/TR/DOM-Level-2-HTM...ml#ID-26809268
http://www.w3.org/TR/DOM-Level-2-HTM...ml#ID-75708506
http://www.w3.org/TR/DOM-Level-2-HTM...t-binding.html

HTH

PointedEars
--
Bedenke, daß Mozilla bereits 4 Jahre alt ist. Du kannst Dir also ausrechnen,
wie veraltet NN4 ist. Trotzdem ist er der erfolgreichste Browser aller
Zeiten. Kein Fossil ist je so alt geworden wie dieser Browser einen aussehen
läßt. ;-) -- Georg Maaß in dcljs <aouobi$q4qm6$1 (AT) ID-3551 (DOT) news.dfncis.de>