Display a textbox after dropdown change

[Maximiliano Gonzalez]

Hi,

I'm creating a webpage that should display a textbox if I pick one option of a dropdown menu. How can I do that?

Also, once the textbox has been displayed, how can I retrieve it's value? There could be plenty of these textboxes in the page.

Thanks!

[Bear Bibeault]

Sounds like a job for JavaScript. Moving this topic accordingly.

[Bear Bibeault]

In a change handler for the dropdown, detect when the option has been selected and either cause a previously hidden control to be displayed, or create a new one.

You'd fetch the value in the servlet just like any other control.
[ November 11, 2008: Message edited by: Bear Bibeault ]

[Maximiliano Gonzalez]

I've found this code in some other page and it does make sense, I should adjust it to my needs.

  <select onchange="if (this.selectedIndex==2){this.form['box'].style.visibility='visible'}else {this.form['box'].style.visibility='hidden'} if (this.selectedIndex==3){this.form['box1'].style.visibility='visible'}else {this.form['box1'].style.visibility='hidden'};">
<option value="">0</option>
<option value="">1</option>
<option value="">2</option>
<option value="">3</option>
</select>
<input style="visibility:hidden;" type="text" name="box"><input style="visibility:hidden;" type="text" name="box1">  

But in this code, there is only one dropdown. In my case I may have any number of dropdowns and as a result, an equal or smaller number of textboxes. How would I identify the name of the box to retrieve it's value?

[Bear Bibeault]

That's a lot of script to be sticking into the onchange attribute. I'd factor it out into its own function for readability (and it's just a good practice).

Is there a text control for each option? For each select control? More info is needed.

[Maximiliano Gonzalez]

My dropdowns will have 3 options and only one will display a textbox.

Thanks

[Bear Bibeault]

That doesn't help me answer your question regarding matching text controls to their triggers.

[Maximiliano Gonzalez]

I'm sorry I'm fairly new to JavaScript.

I don't know what you mean by text controls and matching them to their triggers.

[Bear Bibeault]

text control == text box

trigger == item or action that initiates a process

In other words, I need more information about the relationship between the items and actions that will display the text controls than you've given.

[Maximiliano Gonzalez]

I'll initially have a dropdown with 3 static select options, option A, option B, option C, if I select A, I need to display a textbox. If I choose B or C, there won't be anything else to display.

[Bear Bibeault]

OK, well I've already answered how to handle that.

[Philip Thamaravelil]

function showDiv( ){ document.getElementById( 'optionalBox').style.display = 'block'; }
function hideDiv( ){ document.getElementById( 'optionalBox').style.display = 'none'; }


<select name="name1">
<option></option>
<option name="A" on click="javascript:showDiv();">A</option>
<option name="B" on click="javascript:hideDiv();">B</option>
<option name="C" on click="javascript:hideDiv();">C</option>
</select>

<div id="optionalBox" style="display:none">
<input name="" type="text">
</div>

[Bear Bibeault]

Well, he already showed code that hides and shows the control (albeit with visibility rather than display), so I'm still not sure what the remaining question is.

[Maximiliano Gonzalez]

I tried Philip Thamaravelil's code and it worked, but it worked only for one dropdown.

In my page I may have any number of dropdowns and I need each one of them to be able to display a new text controller.

Right now I have a page with 2 of those dropdowns, if I choose the option that should display the textbox on the first one, the controller is correctly displayed, if I then choose the same option in the second dropdown, no new controller is displayed.

Also if I select an option that shouldn't display the text controller on the first dropdown, it isn't displayed, and if I choose the displaying option on the second one, the controller is displayed next to the first drop down.

Thanks for your help