April 19, 2021

Programmingempire

In this post on Show or Hide TextBox when Selection Changed in JavaScript, I will demonstrate how to display a textbox or hide it when a specific option is selected in a drop-down list.

Although we use a dropdown list in order to provide the user a number of options in which he or she can select the desired one. However, sometimes the available options are not sufficient. In such a case, it is better to provide one more option that results in displaying an input control that the user can use to enter the desired value.

In other words, the dropdown list works as follows. Whenever the user selects a specific option, a textbox should be displayed. Otherwise, the textbox should not appear. The following example in HTML and JavaScript demonstrates this scenario.

Example for Demonstrating Show or Hide TextBox on a Specific Selection

As can be seen, the following HTML code displays a dropdown list using the <select> tag. Also, a textbox is also there with its CSS property display set to none. Therefore, initially, the textbox is not displayed.

In addition, there is a JavaScript function called f1(), which will be executed when the user selects an option from the list. As soon as, the onchange event handler executes, the variables v and v1 fetch the select element and the textbox respectively with a specific value of id. After that, the function will check whether the selected option has a specific value or not. Accordingly, it will set the display property of the textbox to block or none in order to show or hide textbox respectively.

<html>
  <head>
     <title>Creating TextBox Dynamically</title>
     <style>
       .c{
            margin:40px;
            padding: 20px;
            
            background-color: #F6F6F0;
            border: solid 3px #F6F6F0;
            border-radius:20px;
	    min-height: 500px;
            width: 300px;
         }
         .d{
	    font-size: 20px;
            font-family: 'comic sans ms';
            font-weight: bolder;
          }
     </style>
     <script>
        function f1()
        {
          // document.write('option changed!');
          var v=document.getElementById("s");
          var v1=document.getElementById("myinst");
          if(v.value=="o")
          {
             v1.style.display='block';
          }
          else
          {
             v1.style.display='none';
          }
        }
     </script>
  </head>
  <body>
     <div class="c d">
        <select id="s" name="colleges" class="d" onchange="f1()">
           <option disabled selected>Select your college...</option>
          <option value="m">IITM</option>
          <option value="n">IINTM</option>
          <option value="r">Indraprastha Institute</option>
          <option value="d">ADVT</option>
          <option value="o">Other</option>
        </select>
        <div id="myinst" style="display:none;margin-left:2px;margin-top:10px;">
           <input type="text" name="inst" class="d">
        </div>
     </div>
  </body>
</html>

Output

Programmingempire

Example for Demonstrating Show or Hide TextBox on a Specific Selection

Further Reading

You may also like...

How to Perform Form Validation in JavaScript?

Changing Style of HTML Elements using getElementsByClassName() Method

How to Use ID and Class Attributes in JavaScript?