Dropdown Menu- Choose 'Other' selection to show hidden textbox

[jerrydigital]

good evening,

I am trying to allow my users to enter in text if they don't find their option on my drop down menu. In the code below, I can get a text box to show up when I select 'Other' on the drop down menu. However, I cannot get it to work when I try to select 'Other' on the second drop down menu. Any ideas about how I can start getting the second drop down menu to show a text box just like the first one does?

Also, how do I get the text box to appear on the same line the dropdown menu was? By using this code, my formatting is kind of unprofessional.

Thank you for any insight......Je rry

<p>Company:	 <select name="company" id="mySelect" onChange="swap();" style=display:inline;">
<option selected="x"></option>
<option value="y">y</option>
<option value="z">z</option>
<option value="Other">Other..</option>
</select>
<input type="text" name="company" id="myText" style="display:none;" onclick="swapback()"></p>
<script type="text/javascript">
function swap() {
if(document.getElementById('mySelect').value == 'Other'){
document.getElementById('mySelect').style.display = 'none';
document.getElementById('myText').style.display = 'block';
document.getElementById('myText').focus();
}
}
function swapback() {
document.getElementById('mySelect').selectedIndex = 0;
document.getElementById('mySelect').style.display = 'block';
document.getElementById('myText').style.display = 'none';
}
</script>
<p>Company:	 <select name="company" id="mySelect" onChange="swap();" style=display:inline;">
<option selected="x"></option>
<option value="y">y</option>
<option value="z">z</option>
<option value="Other">Other..</option>
</select>
<input type="text" name="company" id="myText" style="display:none;" onclick="swapback()"></p>
<script type="text/javascript">
function swap() {
if(document.getElementById('mySelect').value == 'Other'){
document.getElementById('mySelect').style.display = 'none';
document.getElementById('myText').style.display = 'block';
document.getElementById('myText').focus();
}
}
function swapback() {
document.getElementById('mySelect').selectedIndex = 0;
document.getElementById('mySelect').style.display = 'block';
document.getElementById('myText').style.display = 'none';
}
</script>

[jhardman]

Jerry,

I appreciate that you trust the answers that you get in the ASP forum :-) , but this question has nothing to do with ASP. In the future, please notice in which forum you are posting.

The problem is that both selects and both text boxes have the same ID - and they really need to have their own distinct ID, when the javascript function is called, it has no way to know which select and which textbox you want are writing about. I believe the function searches through the document and uses the first element with that ID. Anyway, I would have to think a while about how to best do this, but I would first pass the element that calls the function into the function call so the function knows which select called it- like this:

<select name="company" id="mySelect" 
onChange="swap(this);" style=display:inline;">
<!--
...
-->
function swap(caller) {
if(caller.value == 'Other'){
//something here
}

Then maybe one of the javascript experts can tell you what to do from there.

Jared

[jerrydigital]

thank you for your help and i apologize for putting this in the asp section originally.

I decided to just add an additional text box for the user to input the "other" section instead of messing around with the hidden box.

I plan to revisit this section after my site is up and running to make it better but for now, the extra text box will do.

thanks again.

Jerry

[acoder]

What jhardman said was correct and should have put you in the right direction.

Two more quick points:
1. You've forgotten the opening quote in the style attribute.
2. There's no need to include the JavaScript code twice - in fact, you should avoid it. Write it once and make it generic to reuse it for the second select.