File APIs for Java Developers
Manipulate DOC, XLS, PPT, PDF and many others from your application.
http://aspose.com/file-tools
The moose likes HTML, CSS and JavaScript and the fly likes Display a textbox after dropdown change Big Moose Saloon
  Search | Java FAQ | Recent Topics | Flagged Topics | Hot Topics | Zero Replies
Register / Login
JavaRanch » Java Forums » Engineering » HTML, CSS and JavaScript
Bookmark "Display a textbox after dropdown change" Watch "Display a textbox after dropdown change" New topic
Author

Display a textbox after dropdown change

Maximiliano Gonzalez
Greenhorn

Joined: Aug 27, 2008
Posts: 11
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
Author and ninkuma
Marshal

Joined: Jan 10, 2002
Posts: 60062
    
  65

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


[Asking smart questions] [Bear's FrontMan] [About Bear] [Books by Bear]
Bear Bibeault
Author and ninkuma
Marshal

Joined: Jan 10, 2002
Posts: 60062
    
  65

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
Greenhorn

Joined: Aug 27, 2008
Posts: 11
I've found this code in some other page and it does make sense, I should adjust it to my needs.



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
Author and ninkuma
Marshal

Joined: Jan 10, 2002
Posts: 60062
    
  65

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
Greenhorn

Joined: Aug 27, 2008
Posts: 11
My dropdowns will have 3 options and only one will display a textbox.

Thanks
Bear Bibeault
Author and ninkuma
Marshal

Joined: Jan 10, 2002
Posts: 60062
    
  65

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

Joined: Aug 27, 2008
Posts: 11
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
Author and ninkuma
Marshal

Joined: Jan 10, 2002
Posts: 60062
    
  65

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
Greenhorn

Joined: Aug 27, 2008
Posts: 11
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
Author and ninkuma
Marshal

Joined: Jan 10, 2002
Posts: 60062
    
  65

OK, well I've already answered how to handle that.
Philip Thamaravelil
Ranch Hand

Joined: Feb 09, 2006
Posts: 99
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
Author and ninkuma
Marshal

Joined: Jan 10, 2002
Posts: 60062
    
  65

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
Greenhorn

Joined: Aug 27, 2008
Posts: 11
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
 
 
subject: Display a textbox after dropdown change
 
Similar Threads
display values chosen from dropdown
hide dropdown list
Are there a way to put a Form and a TextBox in one display?
How to Edit Details in database using JSP page?
Send Ajax request to refresh dataTable