Dropdown - display two fields 'on change'
Posted: Thu Feb 24, 2011 8:29 am
Hi
I have a dropdown list form, and need it to make one TEXT field appear based on one select, in one part of the page, or a different TEXT field appear for another selection on another part of the page.
This is what I have done so far. This is based on an original script I found, and I have tried to alter it.
It now doesn't do anything. I did get it to work for the original "paid-on-day user" selection, but realised that I needed a different field to appear if they select the other one - to avoid incorrect fields being completed mainly!
I'm sure this is dead easy for those Javascript whizzes - but not for me.
I have a dropdown list form, and need it to make one TEXT field appear based on one select, in one part of the page, or a different TEXT field appear for another selection on another part of the page.
Code: Select all
<script>
function updateSelect(obj){
div = document.getElementById("salt");
if(obj.options[obj.selectedIndex].value == "Non User")
{
if(div.style.display == "none")
div.style.display = "inline";
}
else
{
div.style.display = "none";
document.getElementById("salt").value = "";
}
div = document.getElementById("bonus");
if(obj.options[obj.selectedIndex].value == "Bonus")
{
if(div.style.display == "none")
div.style.display = "inline";
}
else
{
div.style.display = "none";
document.getElementById("bonus").value = "";
}
}
</script>Code: Select all
<select name='name' style='font-family: arial, verdana; size: 11px' onchange=\"updateSelect(this)\">
<option value='Non User'>Paid-On-Day User</option>
<option value='Bonus'>Bonus</option></select>
<span id='salt' style='display:none;' >
<input type='text' name='namenonuser' style='width: 75px'></span>
<span id='bonus' style='display:none;' >
<input type='text' name='bonus' style='width: 30px'></span>I'm sure this is dead easy for those Javascript whizzes - but not for me.