How to Show & Hide Text Boxes in Javascript
JavaScript lets you set the "visibility" property for a text box. You can dynamically set the visibility property to show or hide a text box. Typically, you show and hide a text box based on user input on such a button. You set the "OnClick" event on a button, determine the current visibility state of the text box, and display or hide the control based on the current visibility status.
Other People Are Reading
Instructions
-
-
1
Right click the HTML page that contains the text box you want to edit. Click "Open With," then click your HTML editor and click "Open." You can also set the text box in a JavaScript "JS" file. If your JavaScript is external, open the JS file instead.
-
2
Create the JavaScript function. The following function sets up the function used to change the visibility state:
function showhide() {
}
-
-
3
Show or hide the text box. Type the following code in the function created in the previous step:
if (textbox.style.visibility == 'hidden') {
textbox.style.visibility = 'visible';
}
else {
textbox.style.visibility = 'hidden';
}
The code above checks if the visibility is hidden. If it is hidden, the code changes the state to "visible." Otherwise, it changes the text box to "hidden."
-
4
Type the function in a button control's "OnClick" event. Add the following code to the button you want to use to show or hide the text box:
onclick="showhide()"
-
1
