Show and Hide a textbox using JavaScript and jQuery

Today, we’ll explain to you how to show and hide a textbox using JavaScript and jQuery.

Here, we will show/hide the div with a textbox depending on the selection of the dropdown list. If the user selects `yes` from the dropdown list then the textbox will appear.

Example

Output - Show and Hide a textbox using JavaScript and jQuery - Clue Mediator

Steps to show and hide a textbox using JavaScript & jQuery

1. Create an HTML
2. Add CSS
3. Using JavaScript show/hide a textbox
4. Using jQuery show/hide a textbox
5. Output

1. Create an HTML

First, we will create an HTML where dropdown and textbox are shown. Check the following code.

  <title>Show/hide a textbox using JavaScript - Clue Mediator</title>




  <h2>Show/hide a textbox using JavaScript - <a href="https://www.cluemediator.com/" target="_blank" rel="noopener noreferrer">Clue Mediator</a>
  </h2>
  <form>
    <div>
      <label>Do you have work experience?</label>
      <select id="experience" onchange="showHide()">
        <option value="1">Yes</option>
        <option value="2" selected>No</option>
      </select>
    </div>
    <div id="hidden-field" style="display: none;">
      <label>Enter work experience in year</label>
      <input type="text" class="form-control">
    </div>
  </form>

2. Add CSS

Add the following CSS code before the closing head (`</head>`) tag for the basic UI style.

<style type="text/css">
  body {
    font-family: Arial, Helvetica, sans-serif;
    padding: 20px;
    font-size: 16px;
  }

  input,
  select,
  option {
    padding: 5px;
    min-width: 100px;
    margin: 10px;
  }
</style>

3. Using JavaScript show/hide a textbox

Now using the JavaScript, we will hide and show the textbox as per dropdown selection.

When an option is selected from the dropdown, the `showHide()` function will be executed. If the selected value is `1`, the div with id `hidden-field` will show otherwise it will be hidden.

Add the following code at the end of the HTML file.

<script type="text/javascript">
  function showHide() {
    let experience = document.getElementById('experience');
    if (experience.value == 1) {
      document.getElementById('hidden-field').style.display = 'block';
    } else {
      document.getElementById('hidden-field').style.display = 'none';
    }
  }
</script>

4. Using jQuery show/hide a textbox

Similarly, we will do the same task using jQuery. We need to include the jQuery library and the script in the HTML file.

jQuery library

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

Script

<script type="text/javascript">
  $(document).ready(function () {
    $("#experience").change(function () {
      if ($("#experience").val() == 1) {
        $("#hidden-field").show();
      } else {
        $("#hidden-field").hide();
      }
    })
  });
</script>

5. Output

Let’s combine all above code together and see how it works.

JavaScript Code

  <title>Show/hide a textbox using JavaScript - Clue Mediator</title>
  <style type="text/css">
    body {
      font-family: Arial, Helvetica, sans-serif;
      padding: 20px;
      font-size: 16px;
    }

    input,
    select,
    option {
      padding: 5px;
      min-width: 100px;
      margin: 10px;
    }
  </style>





  <h2>Show/hide a textbox using JavaScript - <a href="https://www.cluemediator.com/" target="_blank" rel="noopener noreferrer">Clue Mediator</a>
  </h2>
  <form>
    <div>
      <label>Do you have work experience?</label>
      <select id="experience" onchange="showHide()">
        <option value="1">Yes</option>
        <option value="2" selected>No</option>
      </select>
    </div>
    <div id="hidden-field" style="display: none;">
      <label>Enter work experience in year</label>
      <input type="text" class="form-control">
    </div>
  </form>
  <script type="text/javascript">
    function showHide() {
      let experience = document.getElementById('experience');
      if (experience.value == 1) {
        document.getElementById('hidden-field').style.display = 'block';
      } else {
        document.getElementById('hidden-field').style.display = 'none';
      }
    }
  </script>

jQuery Code

  <title>Show/hide a textbox using JavaScript - Clue Mediator</title>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
  <style type="text/css">
    body {
      font-family: Arial, Helvetica, sans-serif;
      padding: 20px;
      font-size: 16px;
    }

    input,
    select,
    option {
      padding: 5px;
      min-width: 100px;
      margin: 10px;
    }
  </style>





  <h2>Show/hide a textbox using JavaScript - <a href="https://www.cluemediator.com/" target="_blank" rel="noopener noreferrer">Clue Mediator</a>
  </h2>
  <form>
    <div>
      <label>Do you have work experience?</label>
      <select id="experience" onchange="showHide()">
        <option value="1">Yes</option>
        <option value="2" selected>No</option>
      </select>
    </div>
    <div id="hidden-field" style="display: none;">
      <label>Enter work experience in year</label>
      <input type="text" class="form-control">
    </div>
  </form>
  <script type="text/javascript">
    $(document).ready(function () {
      $("#experience").change(function () {
        if ($("#experience").val() == 1) {
          $("#hidden-field").show();
        } else {
          $("#hidden-field").hide();
        }
      })
    });
  </script>

That’s it for today.
Thank you for reading. Happy Coding..!! 🙂