We can manage display or hide a part of the form based on the user selection from a radio button. One example of this is displaying contact information and at the same place displaying the contact form for the visitor to send a message. Once the visitor clicks the radio button saying contact form the contact details will be replaced with a contact form.

We will be using layers defined by div tags for achieving this effect. We will use on page style sheet to assign styles for the div tag.

Inside our head tags we will place one JavaScript function to manage the display style property of the div tag. So this function will receive Div tag is and display value ( inline or none )

We will use one pair of radio buttons and use its onclick event to display one div layer and hide the other div layer. Same way the other radio button will do the opposite. We kept form components inside one div layer and contact details inside other div layer. Based on requirements we can place different components and text inside different layers

Let us start with the demo.

Hide and displaying layers through buttons Hide and displaying layers through radio buttons OnClick event of period button Default value by using OnFocus event of a text box Showing help text by using onfocus and onBlur event triggers Text box click event removing data Text box onBlur click event changing case Selecting all the data of inside textarea by clicking Counting the characters dynamically inside a textarea and setting a limit Copying a set of textbox entered data to another area of a form Copying data along with drop down list box selection inside a form Managing browser status bar message onMouseOver & onMouseOut events of a link OnMouseOver image changing over a link