Avatar billede subscorpio Nybegynder
24. marts 2009 - 20:07 Der er 10 kommentarer og
1 løsning

Select/dropdown med submit og vis/skjul input

Kære Eksperter,

Så er jeg træt af at svede over min elendige viden indenfor Java.
Jeg søger følgende løsning - håber I kan hjælpe ;-)

Opgave:
Vælger man >>test 1, test 2, test 3 eller test 4<<, i nedenstående "dropdown/select", skal den submitte med det samme.

Klikker man på >>andet<<, skal den vise et input/text felt, gerne med focus.
En løsning der er ID baseret vil være at fortrække.
Systemet skal også virke (det var det der seriøst hev mine tænder ud) - hvis brugeren har valgt andet og fortrydder og derfor klikker på den øverste "Vælg", så skal Andet-inputtet forsvinde, og formen skal selvfølgelig ikke submitte. Hvis focus i feltet kommer i konflikt med dette, må jeg undvære focus.

<select name="selectnavn">
<option> Vælg </option>
<option value="1">test 1</option>
<option value="2">test 2</option>
<option value="3">test 3</option>
<option value="andet">andet</option>
<option value="4">test 4</option>
</select>

--- kun synlig hvis >>andet<< er valgt ---
<input type="text" name="andet" value="indtast her"><br>
<input type="submit" value="Gem">
---
Avatar billede olebole Juniormester
25. marts 2009 - 00:52 #1
<ole>

<script type="text/javascript">
function hndlSelect(oSel) {
    if (oSel.value=="andet") document.getElementById('andet').style.display = "inline";
    else oSel.form.submit();
}
</script>

<select name="selectnavn" onchange="hndlSelect(this)">
<option> Vælg </option>
<option value="1">test 1</option>
<option value="2">test 2</option>
<option value="3">test 3</option>
<option value="andet">andet</option>
<option value="4">test 4</option>
</select>

<input id="andet" style="display:none" type="text" name="andet" value="indtast her"><br>
<input type="submit" value="Gem">

/mvh
</bole>
Avatar billede olebole Juniormester
25. marts 2009 - 00:56 #2
Njaahhh ... sådan:

<script type="text/javascript">
function hndlSelect(oSel) {
    if (oSel.selectedIndex==0) return;
    if (oSel.value=="andet") document.getElementById("andet").style.display = "inline";
    else oSel.form.submit();
}
</script>
Avatar billede subscorpio Nybegynder
25. marts 2009 - 19:42 #3
Det ser utrolig smukt ud ;-)

Nu ved jeg at du har styr på sagerne, så jeg godkender med det samme - og så vil jeg straks igang med at lege med det ;-)
Avatar billede subscorpio Nybegynder
25. marts 2009 - 19:43 #4
Men hov det er jo ikke et svar?
Avatar billede olebole Juniormester
25. marts 2009 - 19:51 #5
Nu skal man heller ikke være for hurtig med at acceptere  ;o)

Faktisk skal det ekstra felt vel også gemmes, hvis man vælger ' Vælg ' - og i så fald skal koden se sådan ud:

<script type="text/javascript">
function hndlSelect(oSel) {
    if (oSel.selectedIndex==0) document.getElementById("andet").style.display = "none";
    else if (oSel.value=="andet") document.getElementById("andet").style.display = "inline";
    else oSel.form.submit();
}
</script>
Avatar billede subscorpio Nybegynder
25. marts 2009 - 20:26 #6
Nice, og det er testet - Smukt :-D
Jeg bukker og takker!
Avatar billede subscorpio Nybegynder
25. marts 2009 - 21:02 #7
Kunne man "nemt" bygge den ud således at man bestemmer "Andet" når man kalder funktionen frem.
<select name="selectnavn" onchange="hndlSelect(this, 'andet')">
?

Grunden til at jeg spørger er at siden hvor jeg skal bruge scriptet, der er flere formularer og de skal alle bruge det samme java, derfor vil det være smart hvis man kunne lave selvstændige id'er til "andet".
Er jeg til at forstå?
Avatar billede olebole Juniormester
25. marts 2009 - 21:37 #8
Tak for points  =)
Ja, så kommer det til at se sådan ud:

<script type="text/javascript">
function hndlSelect(oSel, sKey) {
    if (oSel.selectedIndex==0) document.getElementById("andet").style.display = "none";
    else if (oSel.value==sKey) document.getElementById("andet").style.display = "inline";
    else oSel.form.submit();
}
</script>
Avatar billede subscorpio Nybegynder
25. marts 2009 - 21:55 #9
Jeg vil gerne give flere points ;-) så bare smid endnu et svar.

Det var nu "Andet" id'et nede i skjul, jeg skulle have mulighed for at give et selvstændig id.

<select name="selectnavn" onchange="hndlSelect(this, 'DENNEHER')">


<input id="DENNEHER" style="display:none" type="text" name="andet" value="indtast her"><br>
<input type="submit" value="Gem">
Avatar billede subscorpio Nybegynder
25. marts 2009 - 22:51 #10
Sådan her?

<script type="text/javascript">
function hndlSelect(oSel, sKey) {
    if (oSel.selectedIndex==0) document.getElementById(sKey).style.display = "none";
    else if (oSel.value=="andet") document.getElementById(sKey).style.display = "inline";
    else oSel.form.submit();
}
</script>

<select name="selectnavn" onchange="hndlSelect(this, 'test2')">
<option> Vælg </option>
<option value="1">test 1</option>
<option value="2">test 2</option>
<option value="3">test 3</option>
<option value="andet">andet</option>
<option value="4">test 4</option>
</select>

<div style="display:none" id="test2">
<input type="text" name="andet" value="indtast her"><br>
<input type="submit" value="Gem"></div>
Avatar billede olebole Juniormester
25. marts 2009 - 23:05 #11
Det havde jeg misfortået. Ja, sådan kan du godt gøre  ;o)
Avatar billede Ny bruger Nybegynder

Din løsning...

Tilladte BB-code-tags: [b]fed[/b] [i]kursiv[/i] [u]understreget[/u] Web- og emailadresser omdannes automatisk til links. Der sættes "nofollow" på alle links.

Loading billede Opret Preview
Kategori
Vi tilbyder markedets bedste kurser inden for webudvikling

Log ind eller opret profil

Hov!

For at kunne deltage på Computerworld Eksperten skal du være logget ind.

Det er heldigvis nemt at oprette en bruger: Det tager to minutter og du kan vælge at bruge enten e-mail, Facebook eller Google som login.

Du kan også logge ind via nedenstående tjenester