How to display input text in javascript by selected value of dropdownlist

By Posted on

In order to display input text in a web-based page using javascript by activating or selecting a selected value of dropdownlist, there is a way to achieve it. So, in order to show how to do do it, below is presented example in the form of scripts. The following is the script for showing or displaying the actual dropdownlist in an HTML page : 

<select id="function" onchange="check_function(this.value);">
<option selected="selected" value="0">— Choose Function—</option>
<option value="1">Application</option>
<option value="2">Database</option>
<option value="3">Application and Database</option>
<option value="4">Other</option>
</select>
<span style="display: inline-block;">
<input id="function_name" style="display: none;" name="name" size="45" type="text" value="" /> </span>
<span class="error">*</span></pre>
<div class="faded">
 
<div class="error"></div>
 
</div>

The dropdownlist is represented with a HTML select element. The element itself have an id of ‘function’. It is actually specifying the function of a server whether it is going to be installed as an application server, database server, both of it or other function. Whenever the option element which has the value of “4” or selecting “Other” is selected, it will display the input type text element for describing the function of the server by typing into it. Another important hint is the definition of ‘check_function’ as part of the attribute of the HTML select element as shown below : 

<select id="function" onchange="check_function(this.value);">

So, whenever the HTML select element is changed, it will call a function named ‘check_function’ and passing the value of the selected HTML option element.

Furthermore, in order to present the input type element which is represented with the id of “function_name”, it needs the help of Javascript to do it. Below is the snippet code of Javascript to show the input type element : 

function check_function(val){
       var function_element = document.getElementById('function');
       var other_function_element = document.getElementById('function_name');
       if(val == '4'){
              other_function_element.style.display = 'block';
       }else{
              other_function_element.style.display = 'none';
       }
}

The important part is to design the condition for the input type element to be shown. That condition is where the option element selected which is part of the dropdownlist is the option element which has the value of Other or represented with the value of ‘4’. So, first of all, get the HTML select element first. It is represented with the following line : 

var function_element = document.getElementById('function');

The ‘function’ id is the function declared before in the previous snippet code as shown below : 

<select id="function" onchange="check_function(this.value);">

Whenever the HTML option element with the value of ‘4’ is selected, the HTML input type element with the id of ‘function_name’ will be displayed in the form of block as shown with the snippet code shown before : 

if(val == '4'){
        other_function_element.style.display = 'block';

Leave a Reply