Show/Hide Text Box 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.
- Remove whitespace from a string using JavaScript
- A list of commonly used commands for Git Branches
- Remove an element from an array in JavaScript
- How to truncate a string in JavaScript
- Calculate age using JavaScript
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.
input,
select,
option {
padding: 5px;
min-width: 100px;
margin: 10px;
}
</style>
<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>
input,
select,
option {
padding: 5px;
min-width: 100px;
margin: 10px;
}
</style>
<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>
That’s it for today.
Thank you for reading. Happy Coding..!!