JavaScript

Show or Hide TextBox when Selection Changed in JavaScript

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

Show or Hide TextBox
Show or Hide TextBox

Related Topics

Evolution of JavaScript from ES1 to ES2020

Understanding Document Object Model (DOM) in JavaScript

Introduction to Programming in TypeScript

Creating Classes in TypeScript

Working with Arrays in TypeScript

Significance of Tuples in TypeScript

Explaining Interfaces in TypeScript with Examples

How to Create and Use Arrow Functions in TypeScript

Understanding JSON Web Tokens

Java Practice Exercise

Introduction to HTML DOM Methods in JavaScript

Changing Style of HTML Elements using getElementsByClassName() Method

Leave a Reply

Your email address will not be published. Required fields are marked *