Hide and displaying layers through radio buttons

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

demo of onclick radio button and layer

Here is the code

<html>
<head>
<title>(Type a title for your page here)</title>
<style type="text/css">
div {
position: absolute;
left: 10px;
top: 40px;
background-color: #f1f1f1;
width: 280px;
padding: 10px;
color: black;
border: #0000cc 2px dashed;
display: none;
}
</style>

<script language="JavaScript">
function setVisibility(id, visibility) {
document.getElementById(id).style.display = visibility;
}
</script>

</head>
<body >

<form action='test3ck.php' method='POST' >
<input type=radio name=type value='male' onclick="setVisibility('sub3', 'inline');setVisibility('sub4','none');";>Contact Details <input type=radio name=type value='female' onclick="setVisibility('sub3', 'none');setVisibility('sub4','inline');";>Contact Form

<div id="sub3"><b>Contact Details</b><br>
First Name: <br>
Street Address:<br>
City:<br>
Zip:<br>
State:<br>
Country
</div>

<div id="sub4" ><b>Contact Form</b><br>
Name<input type=text name=sname><br>
Email<input type=text name=email><br>
<textarea name=dtl rows=3 cols=25></textarea><br>
<input type=submit >
</div>
<br></form>

</body>

</html>


Subscribe to our YouTube Channel here


Subscribe

* indicates required
Subscribe to plus2net

    plus2net.com




    sanjeev sajal

    17-03-2010

    this so helpful me all time.
    Preethi

    06-05-2010

    when focus is on textbox,a msg will display and also perform validation using onblur
    safeer

    14-04-2015

    Thanks these all are very good and most helpful for every body!

    Post your comments , suggestion , error , requirements etc here .




    We use cookies to improve your browsing experience. . Learn more
    HTML MySQL PHP JavaScript ASP Photoshop Articles FORUM . Contact us
    ©2000-2024 plus2net.com All rights reserved worldwide Privacy Policy Disclaimer