Javascript onChange Textbox

Posted on 2006-05-17
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
    LVL 5

    Accepted Solution


    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

    Thanks a lot

    Write Comment

    Please enter a first name

    Please enter a last name

    We will never share this with anyone.

    Featured Post

    Maximize Your Threat Intelligence Reporting

    Reporting is one of the most important and least talked about aspects of a world-class threat intelligence program. Here’s how to do it right.

    "That which we persist in doing becomes easier, not that the task itself has become easier, but that our ability to perform it has improved." Ralph Waldo Emerson Introduction: One of the wonderful things about the web is that it makes it s…
    This article discusses the difference between strict equality operator and equality operator in JavaScript. The Need: Because JavaScript performs an implicit type conversion when performing comparisons, we have to take this into account when wri…
    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…

    737 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

    Need Help in Real-Time?

    Connect with top rated Experts

    16 Experts available now in Live!

    Get 1:1 Help Now