Forum Moderators: open
I can remember seeing a dropdown list which could do the following:
There are a number of regular 'select options', and the last one is 'Other'. Nothing special until now. But when I chose that option (Other), a new textfield appeared on the right where you could type your 'Other' text. Just to be clear: it wasn't there in the first place, so it must be some javascript to display it as chosen the last select option.
Has somebody seen this before, or does somebody know how to make it?
It would really help me out and I think that many of us could use it.
Kind regards from the Netherlands,
Maurice Luimes.
You're right it's done with javascript.
what you need to do is have something like that:
in your html form:
...
<option value="option 1"> option 1 </option>
<option value="option 2"> option 2 </option>
<option value="other"> other </option>
...
then where you want the box to appear:
<input type="text" value="please enter more info" name="otherhidden" class="hiddenbox">
And then in your js file you need a function that will toggle the visibility of the otherhidden box when the drop down changes to the other value (with an onchange function assigned to the drop down)
Hope this helps
Leo
Thanx, you helped me quite a bit.
Unfortunately, I still have one small problem.
Now, whenever I change my dropdown list, the extra field appears right away. And it should only appear when the option 'Other' is selected. Of course, the problem is that the onchange script is placed in the select-tag. So when you change, the text-box appears right away. I tried to put the onchange-tag in the option-tag, but that didn't work.
How do I get it to work so that the extra text-field only appears when you select 'Other'. And even better, when you go back to select another item, the text-field disappears once again?
Thanx in advance,
Maurice.
Just to be sure, the script (Overig stands for Other):
<script type='text/javascript'>
function showother( id ) {
document.all.Overig.style.visibility = 'hidden';
document.all.Overig.value = '';
document.all[ id ].style.visibility = 'visible';
document.all[ id ].focus();
}
</script>
and the HTML:
<select name="Onderwerp" class="tabelinvultekst" onchange="showother( 'Overig' )">
<option value="">Kies hier
<option value="Gelaatsverzorging">Gelaatsverzorging
<option value="Maquillage">Maquillage
<option value="Massage">Massage
<option value="Lichaamsverzorging">Lichaamsverzorging
<option value="Ontharing">Ontharing
<option value="Manicure">Manicure
<option value="Pedicure">Pedicure
<option value="Overig">Overig...
</select>
<input type="text" name="Overig" class="tabelinvultekst" style="visibility:hidden">
i just found it out.
thank you for your help!
kind regards,
maurice.
