Editierbares Auswahlmenue?

ff · 12.03.2007, 21:43

Weiss jemand, wie man ein Auswahlmenue macht, wo man den gewaehlten Wert editieren kann, bevor man das Formular absendet?

Also als Denkansatz ungefaehr so:

PHP-Code:


			
<select size='1' name='betrag'>

 <option><input name='betrag' value='100'></option>

 <option><input name='betrag' value='200'></option>

 <option><input name='betrag' value='300'></option>

</select>

Das funktioniert natuerlich SO NICHT! Deshalb ja meine Frage . . .

Ich haette gerne das Menue fuer gebraeuchliche Werte zur Grobauswahl. Wenn ich einmal "256" absenden moechte, dann waehle ich z.B. 200 und editiere es wie in einem Input-Feld auf 256.

lg
ff

zAPPEL · 13.03.2007, 07:13

Das wäre dann eine Combo Box, die gibt es aber nicht als HTML Form Element (wäre mir zumindest nicht bekannt)

http://www.cs.tut.fi/~jkorpela/forms/combo.html

lg zAPPEL

void · 13.03.2007, 08:46

ohne JS geht es nicht...

EDIT: doch, aber nur mit dem browserinternen autovervollständigen *gg*

zAPPEL · 13.03.2007, 08:55

Man könnte natürlich bei einem Klick auf das Input Field ein Div darunter zeigen, bei dem man Werte auswählen kann, die mit einem onclick ins Input Field geschrieben werden.

Geht natürlich nur mit Javascript.

void · 13.03.2007, 08:59

genau, das wäre eine lösung, die optisch und funktionell einer combobox entspricht...

ff · 13.03.2007, 09:53

Na dann danke ich einmal recht herzlich fuer eure Tipps!

Praktisch ist die Sache allemal und wenn ich die eine oder andere Variante in einer php-Funktion untergebracht habe, kommt sie sicher oft zum Einsatz, und dient mit nur einem einzigen Formular zum Auswaehlen UND zum Neuanlegen von Werten in einer db.

Entdeckt habe ich die Sache im Kalender von Outlook. Da kann man nur bestimmte Uhrzeiten z.B. 14:30 auswaehlen, aber dann sofort auf 14:10 editieren. Also dachte ich, das waere doch auch in einem Web-Formular praktisch . . .

lg
ff

void · 13.03.2007, 10:57

hallo!

mir war gerade ein wenig "fad":

Code:

<html><head><title></title></head>
<body>
<form action="" method="get">
<input id="combo1" type="text" style="width:150px" /><span onclick="document.getElementById('combo1_options').style.display='block'" style="cursor:pointer">V</span>
<div id="combo1_options" style="display:none;width:150px;padding:5px;border:1px solid black;overflow:auto">
	<span onclick="document.getElementById('combo1').value='auswahl 1';document.getElementById('combo1_options').style.display='none'" style="cursor:pointer">auswahl 1</span>

	<span onclick="document.getElementById('combo1').value='auswahl 2';document.getElementById('combo1_options').style.display='none'" style="cursor:pointer">auswahl 2</span>

	<span onclick="document.getElementById('combo1').value='auswahl 3';document.getElementById('combo1_options').style.display='none'" style="cursor:pointer">auswahl 3</span>

	<span onclick="document.getElementById('combo1').value='auswahl 4';document.getElementById('combo1_options').style.display='none'" style="cursor:pointer">auswahl 4</span>
</div>
</form>


text danach...</p>
</body>
</html>

ist nur eine einfache, unsauber codierte aber funktionierende lösung... mit ein paar verbesserungen sieht es sicher gleich noch viel besser aus! ;) :D

ff · 13.03.2007, 23:42

Also nachdem ich jetzt wusste, dass ich eine "Combo-Box" will, und damit nicht eine (Bass)gitarrenbox mit integriertem Verstaerker gemeint ist, habe ich ein wenig gegoogelt und einige getestet.

Nachdem aber da manche Combo-Box-Scripts laenger als mein Hauptscript sind, stelle ich mit Freuden fest, dass es hier im Forum helle Koepfe gibt, die selbst beim Fadisieren bessere Ergebnisse liefern!

Bravo und danke void!

lg
ff

PS: Falls du dich wieder einmal fadisierst . . . vielleicht faellt dir noch die Modifikation ein, sodass die Select-Box in einer hoeheren Ebene aufgeht und die restlichen Formularelemente nicht verschiebt . . .

zAPPEL · 14.03.2007, 08:14

So irgendwie müsste das funktionieren.. also die Input Box relativ positionieren und das Div in dem die Auswahlmöglichkeiten stehen absolut dazu positionieren.

hm.. kanns jetzt nicht probieren, aber so ca. müsste es gehen:

Code:

<div style="position:relative">
	<input value="" />
	<div style="position:absolute;top:??px;left:??px;">
	      combo box
	</div>
</div>

ff · 14.03.2007, 15:21

Ebenfalls DANKE!

Ja klar, jetzt wo du's sagst . . .

Ich dachte zunaechst an eine Javascript-Loesung . . . und da habe ich leider einige Bildungsluecken aufzuweisen . . .

Also ich fasse einmal eine gut funktionierende Version zusammen:

Code:

<form action='' method='get'>

<div style='position:relative;'>
 <input id='combo1' type='text' style='width:150px' /><span onclick=\"document.getElementById('combo1_options').style.display='block'\" style='cursor:pointer'>V</span>
 <div id='combo1_options' style='display:none; width:150px; padding:5px; border:1px solid black; overflow:auto; position:absolute; top:20px; left:0px; background:#669966;'>
  <span onclick=\"document.getElementById('combo1').value='auswahl 1';document.getElementById('combo1_options').style.display='none'\" style=\"cursor:pointer\">auswahl 1</span>

  <span onclick=\"document.getElementById('combo1').value='auswahl 2';document.getElementById('combo1_options').style.display='none'\" style=\"cursor:pointer\">auswahl 2</span>

  <span onclick=\"document.getElementById('combo1').value='auswahl 3';document.getElementById('combo1_options').style.display='none'\" style=\"cursor:pointer\">auswahl 3</span>

  <span onclick=\"document.getElementById('combo1').value='auswahl 4';document.getElementById('combo1_options').style.display='none'\" style=\"cursor:pointer\">auswahl 4</span>

 </div>
</div>

</form>

lg
ff

12.03.2007, 21:43	#1
ff Veteran Registriert seit: 13.11.1999 Beiträge: 466	Editierbares Auswahlmenue? Weiss jemand, wie man ein Auswahlmenue macht, wo man den gewaehlten Wert editieren kann, bevor man das Formular absendet? Also als Denkansatz ungefaehr so: PHP-Code: `<select size='1' name='betrag'> <option><input name='betrag' value='100'></option> <option><input name='betrag' value='200'></option> <option><input name='betrag' value='300'></option> </select>` Das funktioniert natuerlich SO NICHT! Deshalb ja meine Frage . . . Ich haette gerne das Menue fuer gebraeuchliche Werte zur Grobauswahl. Wenn ich einmal "256" absenden moechte, dann waehle ich z.B. 200 und editiere es wie in einem Input-Feld auf 256. lg ff

13.03.2007, 07:13	#2
zAPPEL Inventar Registriert seit: 07.11.2001 Ort: Perchtoldsdorf Alter: 45 Beiträge: 2.085 Mein Computer	Das wäre dann eine Combo Box, die gibt es aber nicht als HTML Form Element (wäre mir zumindest nicht bekannt) http://www.cs.tut.fi/~jkorpela/forms/combo.html lg zAPPEL ____________________________________ „Das menschliche Gehirn ist eine großartige Sache. Es funktioniert vom Moment der Geburt an – bis zu dem Zeitpunkt, wo du aufstehst, um eine Rede zu halten.“ Mark Twain "Windle shook his head sadly. Four exclamation marks, the sure sign of an insane mind" Reaper Man, Terry Pratchett

13.03.2007, 08:46	#3
void Hero Registriert seit: 26.07.2001 Ort: Wien Beiträge: 811	ohne JS geht es nicht... EDIT: doch, aber nur mit dem browserinternen autovervollständigen gg ____________________________________ nobody is perfect

13.03.2007, 08:55	#4
zAPPEL Inventar Registriert seit: 07.11.2001 Ort: Perchtoldsdorf Alter: 45 Beiträge: 2.085 Mein Computer	Man könnte natürlich bei einem Klick auf das Input Field ein Div darunter zeigen, bei dem man Werte auswählen kann, die mit einem onclick ins Input Field geschrieben werden. Geht natürlich nur mit Javascript. ____________________________________ „Das menschliche Gehirn ist eine großartige Sache. Es funktioniert vom Moment der Geburt an – bis zu dem Zeitpunkt, wo du aufstehst, um eine Rede zu halten.“ Mark Twain "Windle shook his head sadly. Four exclamation marks, the sure sign of an insane mind" Reaper Man, Terry Pratchett

13.03.2007, 08:59	#5
void Hero Registriert seit: 26.07.2001 Ort: Wien Beiträge: 811	genau, das wäre eine lösung, die optisch und funktionell einer combobox entspricht... ____________________________________ nobody is perfect

13.03.2007, 09:53	#6
ff Veteran Registriert seit: 13.11.1999 Beiträge: 466	Na dann danke ich einmal recht herzlich fuer eure Tipps! Praktisch ist die Sache allemal und wenn ich die eine oder andere Variante in einer php-Funktion untergebracht habe, kommt sie sicher oft zum Einsatz, und dient mit nur einem einzigen Formular zum Auswaehlen UND zum Neuanlegen von Werten in einer db. Entdeckt habe ich die Sache im Kalender von Outlook. Da kann man nur bestimmte Uhrzeiten z.B. 14:30 auswaehlen, aber dann sofort auf 14:10 editieren. Also dachte ich, das waere doch auch in einem Web-Formular praktisch . . . lg ff

13.03.2007, 23:42	#8
ff Veteran Registriert seit: 13.11.1999 Beiträge: 466	Also nachdem ich jetzt wusste, dass ich eine "Combo-Box" will, und damit nicht eine (Bass)gitarrenbox mit integriertem Verstaerker gemeint ist, habe ich ein wenig gegoogelt und einige getestet. Nachdem aber da manche Combo-Box-Scripts laenger als mein Hauptscript sind, stelle ich mit Freuden fest, dass es hier im Forum helle Koepfe gibt, die selbst beim Fadisieren bessere Ergebnisse liefern! Bravo und danke void! lg ff PS: Falls du dich wieder einmal fadisierst . . . vielleicht faellt dir noch die Modifikation ein, sodass die Select-Box in einer hoeheren Ebene aufgeht und die restlichen Formularelemente nicht verschiebt . . .

14.03.2007, 08:14	#9
zAPPEL Inventar Registriert seit: 07.11.2001 Ort: Perchtoldsdorf Alter: 45 Beiträge: 2.085 Mein Computer	So irgendwie müsste das funktionieren.. also die Input Box relativ positionieren und das Div in dem die Auswahlmöglichkeiten stehen absolut dazu positionieren. hm.. kanns jetzt nicht probieren, aber so ca. müsste es gehen: Code: <div style="position:relative"> <input value="" /> <div style="position:absolute;top:??px;left:??px;"> combo box </div> </div> ____________________________________ „Das menschliche Gehirn ist eine großartige Sache. Es funktioniert vom Moment der Geburt an – bis zu dem Zeitpunkt, wo du aufstehst, um eine Rede zu halten.“ Mark Twain "Windle shook his head sadly. Four exclamation marks, the sure sign of an insane mind" Reaper Man, Terry Pratchett

Aktive Benutzer in diesem Thema: 1 (Registrierte Benutzer: 0, Gäste: 1)