Show/Hide Form Elements on Radio Button Selection

java

How to Show/Hide Div section or Form Elements based on radio Button selection

While creating a HTML form we sometime facing a situation, to show some form fields only on selection of specific radio button option.

Let us understand this in  detail with help of a form. Lets say we have a Event Planner Form with various fields. One of its filed is ‘Event Type’ visitor/user have to select type of event he wish to make the booking for.

Here form shows 3 options 1. Corporate 2.Wedding 3. Other

We need to implement the functionality which can show a text box to specify the other Event type after selecting “other” radio button. Clicking on other event type radio button will hide the text Box. Please see below pic for example.

Show/Hide on Radio Button Selection Example

 

Form 1 is the ideal situation when form 1 get loads. Radio button option ‘Corporate’ will be selected by default.

Form 2 shows the situation when user clicks on Other radio button option a new text box will appear ‘Please specify other event type’. Here he needs to specify the type of other event.

lets see how we can implement this.

Step 1

1. Create an HTMl file with below mentioned Code.

<table class="services" border="0" cellspacing="0" cellpadding="5" align="center">
<tbody>
<tr>
<td width="168"><form action="/send1.php" enctype="multipart/form-data" method="post">Name</td>
<td><input class="inputbox" type="text" name="name" required="" size="40" /></td>
</tr>
<tr>
<td>Email</td>
<td><input class="inputbox" type="email" name="email" required="" size="40" /></td>
</tr>
<tr>
<td>Contact No.:</td>
<td><input class="inputbox" type="tel" autocomplete="off" maxlength="15" name="contact" required="" size="40" /></td>
</tr>
<tr>
<td>Type of Event :</td>
<td>&ltinput id="corpo" type="radio" checked="checked" name="etype" required="" value="corporate" /> corporate <input id="wedd" type="radio" name="etype" required="" value="wedding" /> wedding <input id="oth" type="radio" name="etype" required="" value="other" /> Other</td>
</tr>
<tr>
<td></td>
<td>
<div id="otherbox" style="display: none;"><em>Please specify other Event Type</em>
<input class="inputbox" type="text" name="otherevent" size="40" /></div></td>
</tr>

<tr>
<td><input type="submit"  /></td></tr>
</form>
</tbody>
</table>

Step 2

Add below mentioned script in to Head section

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>

Step 3

Add Java Script Code just Below the Form to show/Hide elements.

<script type="text/javascript">
  $("input[name='etype']:radio")
    .change(function() {
      $("#otherbox").toggle($(this).val() == "other");
});
</script>

Now Every thing has been done.