Hide and showing form sections JavaScript


show more Make your web forms more dynamic and interactive with JavaScript. Find out how to hide and show different sections of an HTML form when users check a box. show less
please wait ...

Hiding and showing form sections

In this example, rather than react to the onsubmit of the form, I am actually going to react to an event of an individual form element-- in this case, this check box, that when I check it is activating or turning on another section of the form itself. This is very, very simple to do. Let me show you the general process and a few best practices for doing this. So I am going to jump into my editor. The HTML here is very, very straightforward. The section that has multiple check boxes in it is wrapped in a div with an id of tourSelection.

Now, there are no CSS or other styling properties being applied to it, so it actually isn't hidden by default, and that's quite important. We'll talk about that 'why' in a moment. So going into my JavaScript, just a few simple lines, and getting rid of the last three here, this is just a window.onload that is calling preparePage. So everything is in this preparePage function. This gets called once, and what we do is here. I'm volunteeri...

Hiding and showing form sections
Video duration: 3m 17s 5h 31m Beginner

Viewers:

Make your web forms more dynamic and interactive with JavaScript. Find out how to hide and show different sections of an HTML form when users check a box.

Subjects:
Developer Web
Software:
JavaScript
Author:
please wait ...