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
Steps to show and hide a textbox using JavaScript & jQuery
1. Create an HTML
First, we will create an HTML where dropdown and textbox are shown. Check the following code.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 | <html> <head> <title>Show/hide a textbox using JavaScript - Clue Mediator</title> </head> <body> <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> </body> </html> |
2. Add CSS
Add the following CSS code before the closing head (</head>) tag for the basic UI style.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | <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.
1 2 3 4 5 6 7 8 9 10 | <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
1 | <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script> |
Script
1 2 3 4 5 6 7 8 9 10 11 | <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
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 | <html> <head> <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> </head> <body> <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> </body> </html> |
jQuery Code
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 | <html> <head> <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> </head> <body> <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> </body> </html> |
That’s it for today.
Thank you for reading. Happy Coding..!! 🙂
