pooney
March 15, 2007, 10:05am
1
Hi,
Does anybody know how to make a drop down list in a form, with the option ‘other’ and when ‘other’ is selected an empty textbox appears next to the drop down list? This is done on eBay when you sell and item, the page doesnt refresh or anything, I’m guessing its javascript.
I’m using PHP in my current form:
echo '
<label>eBay Seller:</label><br />
<select name="ebayseller" id=ebayseller">
<option selected>' . $ebayseller . '</option>
<option>Seller 1</option>
<option>Seller 2</option>
<option>Seller 3</option>
<option>Other</option>
</select>
';
Its a handy trick. Can anybody help me out on this one?
Thanks.
Jeanco
March 15, 2007, 3:30pm
2
You can put the text box in a div with style=“display:none” and then use something like the code below to change the display property when “Other” is clicked.
<script language="JavaScript" type="text/javascript">
<!--
function getOther(sel,fld){
fld.style.display = (sel.selectedIndex==sel.options.length-1)?"inline":"none";
}
//-->
</script>
<form>
<select name="ebayseller" onchange="getOther(this,this.form.oth);">
<option>Seller 1</option>
<option>Seller 2</option>
<option>Seller 3</option>
<option>Other</option>
</select>
<input type="text" name="oth" style="display: none;">
</form>
Better to hide the other box at load, so non-js-enabled browsers cna still enter in data to the other box:
<script language="JavaScript" type="text/javascript">
<!--
function getOther(sel,fld){
fld.style.display = (sel.selectedIndex==sel.options.length-1)?"inline":"none";
}
window.onload = function() {
document.getElementById("oth").style.display = "none";
document.getElementById("othLabel").style.display = "none";
}
//-->
</script>
<form>
<select name="ebayseller" onchange="getOther(this,this.form.oth);">
<option>Seller 1</option>
<option>Seller 2</option>
<option>Seller 3</option>
<option>Other</option>
</select>
<label id="othLabel" for="oth">Other:</label><input type="text" name="oth" id="oth">
</form>
Jeanco
March 15, 2007, 3:46pm
4
Good point, use funkdaddy’s modification of my code.
