Show/Hide Text Box using JavaScript and jQuery

  • Post category:JavaScript
  • Reading time:8 mins read

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.

Checkout more articles on JavaScript

Demo Application

Output - Show/Hide Text Box using JavaScript and jQuery - Code Premix
Output – Show/Hide Text Box using JavaScript and jQuery – Code Premix

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.

<html>

<head>
	<title>Show/Hide Text Box using JavaScript and jQuery - Code Premix</title>
</head>

<body>

	<h2>Show/Hide Text Box using JavaScript and jQuery - <a href="https://codepremix.com/" target="_blank"
			rel="noopener noreferrer">Code Premix</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>

</body>

</html>

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
<html>

<head>
	<title>Show/Hide Text Box using JavaScript and jQuery - Code Premix</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>

</head>

<body>

	<h2>Show/Hide Text Box using JavaScript and jQuery - <a href="https://codepremix.com/" target="_blank"
			rel="noopener noreferrer">Code Premix</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>
</body>

</html>
jQuery Code
<html>

<head>
	<title>Show/Hide Text Box using JavaScript and jQuery - Code Premix</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>

</head>

<body>

	<h2>Show/Hide Text Box using JavaScript and jQuery - <a href="https://codepremix.com/" target="_blank"
			rel="noopener noreferrer">Code Premix</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>

</body>

</html>

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

Tags:

Leave a Reply