Hide And Show Textbox Using JavaScript
Last Updated : Mar 11, 2024
IN - JavaScript | Written & Updated By - Pragati
In this tutorial we will show you the solution of hide and show textbox using JavaScript, here we defined textbox with one question it had two options also when user clicks ‘Yes’ option for that question then textbox will appear for collect users answer if user clicks on ‘No’ option for that question then textbox will not appear.
These are done by using ‘display’ property in JavaScript.
Step By Step Guide On Hide And Show Textbox Using JavaScript :-
Here we defined question in p element then defined two radio button type input element with options ‘Yes, No’ label and initially textbox’s ‘inp’ display property sets to none.
When user clicks on ‘Yes’ option then textbox ‘inp’ will appear because we added ‘addEventListener()’ method on radio type input element ‘s’ there we sets inp display to block by document.getElementById() method and display property.
When user clicks on ‘No’ option then textbox ‘inp’ will disappeared because we added ‘addEventListener()’ method on radio type input element ‘n’ there we sets inp display to none by document.getElementById() method and display property.
<!DOCTYPE html>
<html>
<head>
<title>Textbox hide/show</title>
</head>
<body>
<style>
#inp{display: none;}
</style>
<p>Are you a graduate?</p>
<input type="radio" name="" id="s"> Yes
<input type="radio" name="" id="n"> No
<br><br>
<input type="text" id="inp" placeholder="Enter your degree">
<script>
document.getElementById('s').addEventListener("click",function(){
document.getElementById('inp').style.display="block";
});
document.getElementById('n').addEventListener("click",function(){
document.getElementById('inp').style.display="none";
});
</script>
</body>
</html>- <!DOCTYPE html> tag which is instruct the web browser about what version of HTML file written in and it’s not have any ending tag.
- The<html> tag is used to indicate the beginning of HTML document.
- As above shown <head> tag is contain information about webpage and external file links are declared here. <title> tag is used for set the webpage title.
- Both <head> and <title> tags having their pair end tag, so we need to close the ending tags respectively. If you’re not closed anyone of ending tag properly that is also affect the webpage result.
- <body> tag is beginning of main coding part because it contain coding of entire website blocks and elements described here.
- Here we defined style block for sets textbox ‘inp’ display to ‘none’ because we needs to hide initially textbox ‘inp’. For display question we used p element and defined three input elements with separate purpose.
- First two input elements defined with radio type with id’s ‘s,n’ for display as options ‘Yes, No’ and last input element defined for collect user inputs with id ‘inp’.
- In script we defined ‘document.getElementById()’ method with id ‘s’ and ‘addEventListener(“click”)’ because it denotes when user click on input element with ‘s’ then input element ‘inp’ display property sets to ‘block’ that’s way it appears suddenly.
- We defined ‘document.getElementById()’ method with id ‘n’ and ‘addEventListener(“click”)’ because it denotes when user click on input element with ‘n’ then input element ‘inp’ display property sets to ‘none’ that’s way it disappeared immediately.
- Both </body>,</html> tags closed respectively. </body> tag indicates the end of body, Then </html> tag indicates the end of HTML document.
Conclusion :-
In conclusion now we are able to know how to do show/hide textbox using javascript.
When we executes program on browser we can see question ‘Are you a graduate?’ with two options ‘Yes, No’ user needs to select any one option if clicked on ‘Yes’ then textbox appeared for collects users ‘degree’ detail otherwise textbox will hidden state.
If your need to change above defined question or options with some other concept then you can modify it accordingly.
I hope this tutorial on hide and show textbox using JavaScript helps you and the steps and method mentioned above are easy to follow and implement.
About Pragati
