• Post Reply
  • Bookmark Topic Watch Topic
  • New Topic

Display a textbox after dropdown change

 
Maximiliano Gonzalez
Greenhorn
Posts: 11
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
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
Pie
Posts: 65229
95
IntelliJ IDE Java jQuery Mac Mac OS X
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
Sounds like a job for JavaScript. Moving this topic accordingly.
 
Bear Bibeault
Author and ninkuma
Marshal
Pie
Posts: 65229
95
IntelliJ IDE Java jQuery Mac Mac OS X
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
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
Posts: 11
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
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
Pie
Posts: 65229
95
IntelliJ IDE Java jQuery Mac Mac OS X
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
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
Posts: 11
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
My dropdowns will have 3 options and only one will display a textbox.

Thanks
 
Bear Bibeault
Author and ninkuma
Marshal
Pie
Posts: 65229
95
IntelliJ IDE Java jQuery Mac Mac OS X
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
That doesn't help me answer your question regarding matching text controls to their triggers.
 
Maximiliano Gonzalez
Greenhorn
Posts: 11
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
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
Pie
Posts: 65229
95
IntelliJ IDE Java jQuery Mac Mac OS X
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
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
Posts: 11
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
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
Pie
Posts: 65229
95
IntelliJ IDE Java jQuery Mac Mac OS X
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
OK, well I've already answered how to handle that.
 
Philip Thamaravelil
Ranch Hand
Posts: 99
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
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
Pie
Posts: 65229
95
IntelliJ IDE Java jQuery Mac Mac OS X
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
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
Posts: 11
  • Mark post as helpful
  • send pies
  • Quote
  • Report post to moderator
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
 
  • Post Reply
  • Bookmark Topic Watch Topic
  • New Topic