HTML Blog: Change form fields for selected radio buttons through jquery

Introduction -

In this post you will learn how to change html input fields for selected radio button.

Sometimes we need to show some fields specific to radio button.

E.g. Business is radio button name and we have YES & NO radio button value.

If user select YES then some business specific fields should be appear like –

#Company Name

#Company Address

And if user select NO then means user is in job so other fields should appear like -

#Name

#Address

there may be some other common fields like state,city,phone number etc.

Main Content -

To create menu-submenu we need to create 1 html file,1 css file and 1 javascript file.

Since we want to keep code as simple as possible so we are separately creating javascript & css file.

HTML file – It contains all input fields.It has method call to show & hide fields for selected radio button.It also contains CSS.

JAVASCRIPT file – Jquery javascript file.

HTML file code - customer_info.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
html, body, textarea {font-family:Arial, Helvetica, sans-serif;font-size:12px;}
.lbl {font-weight:bold;}
input{outline:none;}
h3 {font-size:22px;}
.note{font-size:12px; color: #666666;}
h2 {border-bottom: solid 2px #999999; padding-bottom:5px}
.dd, input {border: solid 1px #8AA7D3; height:20px;}
.txt_area {border: solid 1px #8AA7D3; height:100px; width:250px;}
.cont_tble {width:75%}
.cont_tble td {padding-bottom:10px; width:400px;}

.no_ba{display:none;}
</style>

<script type="text/javascript" src="jquery-1.6.2.min.js"></script>

<script type="text/javascript">

$(document).ready(function(){

$("#show").click(function(){
$(".no_ba").fadeIn(1);
$(".ba").fadeOut(1);
});

$("#hide").click(function(){
$(".no_ba").fadeOut(1);
$(".ba").fadeIn(1);
});
});

</script>

</head>
<body>
<div>
<h2>Customer Information</h2>

<table class="cont_tble" cellpadding="0px" cellspacing="0px">
<tr>
<td class="lbl">* Business ?</td>
<td><input type="radio" name="business_account" style="border:none; vertical-align:middle" checked="checked" value="Yes" id="hide" /> Yes
<input type="radio" name="business_account" style="border:none; vertical-align:middle" value="No" id="show" />
No </td>
</tr>

<div class="eee">
<tr class="no_ba">
<td class="lbl">*First Name</td>
<td><input type="text" /></td>
</tr>

<tr class="no_ba">
<td class="lbl no_ba">*Last Name</td>
<td><input type="text" /></td>
</tr>
</div>
<tr class="ba">
<td class="lbl">*Company Name</td>
<td><input type="text" /></td>
</tr>

<tr>
<td class="lbl">*Address</td>
<td><input type="text" /></td>
</tr>
<tr>
<td class="lbl">*City</td>
<td><input type="text" /></td>
</tr>
<tr>
<td class="lbl">*State</td>
<td><input type="text" /></td>
</tr>
<td class="lbl">*Phone number</td>
<td><input type="text" /></td>
</tr>
</table>

</div>
</body>

</html>

JQUERY code - jquery-1.6.2.min.js

get the source code from below link -

jquery-1.6.2.min source code

Copy the source code and paste it into new js file.File name should be 'jquery-1.6.2.min.js'.You have to include this js file in your html file through script tag.

you need to keep 'jquery-1.6.2.min.js' file in same folder where you created html file.

You can see here if customer select YES for Business than 'Company Name' feild appear and If customer select NO for Business optinon then 'First Name' & 'Last Name' field appear and 'Company Name' disappear.

if Yes selected by customer

if No selected by customer

HTML Blog

Thursday, 16 October 2014

Change form fields for selected radio buttons through jquery

No comments:

Post a Comment