Javascript onChange Textbox

Posted on 2006-05-17
Medium Priority
Last Modified: 2006-11-18
Hello All

I have this select drop down

<select name="title" class="form" onChange="javascript:addField();">
<option value="Mr">Mr</option>
<option value="Mrs">Mrs</option>
<option value="Others">Others</option>

This is somewhere in my JSP page. On Change of title as Other, I need to bring a textbox right under this

select drop down.

function addField(){
if(MainForm.title.options[MainForm.title.selectedIndex].value == "Others"){
// need to do some code to place the textbox under select drop down

How can I place the textbox exactlt at that place. I don't know. Any help will be greatly appreciated

Question by:Java_Problem

Accepted Solution

shaggy_the_sheep earned 200 total points
ID: 16701657

You could put the text box where you want it. Just enclose it with a span. Give this span an id such as <span id="OthersTextBox" style="display: none"><TEXTBOX STUFF IN HERE></span>

The style display: none will ensure that the box is hidden to begin with.

Now with the selec box just change your script to this...

function addField(){
if(MainForm.title.options[MainForm.title.selectedIndex].value == "Others"){
   document.getElementById('OthersTextBox').style.display = 'block';
//This will hide the box if someone previously chose other but the changed their mind.
   document.getElementById('OthersTextBox').style.display = 'none';

Let me know if you need anything else


Author Comment

ID: 16701739
Thanks a lot

Featured Post

What does it mean to be "Always On"?

Is your cloud always on? With an Always On cloud you won't have to worry about downtime for maintenance or software application code updates, ensuring that your bottom line isn't affected.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

In Part 1 (http://www.experts-exchange.com/Programming/Languages/Scripting/JavaScript/A_7849-Hex-Maze.html) we covered the hexagonal maze basics -- how the cells are represented in a JavaScript array and how the maze is displayed.  In this part, we'…
This article discusses how to implement server side field validation and display customized error messages to the client.
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…
Suggested Courses

862 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question