Nomination Details

by fakhruddin

HTML

<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css">
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<form id="personal_details" name="personal_details" action="">
<fieldset class="no_border" id="nomination_no">

<div class="float_left">
<input type="radio" value="nominee_no" name="nomination" id="nomination_no" />I don't want to nominate.
</div>

<div class="float_left">
<input type="radio" value="nominee_yes" name="nomination" id="nomination_yes" />I would like to nominate.
</div>

<div class="float_left" id="total_nominees">
Total Nominees:
<select name="nominees" id="nominees"  class="effect">
<option value="one">Single Nominee</option>
<option value="two">Two Nominees</option>
<option value="three">Three Nominees</option>
</select>
</div>

</fieldset>

<fieldset class="border" id="nominee_one_details"><legend>Nominee One Details:</legend>

<fieldset class="no_border">
<label>Name:</label><br /><input type="text"  class="effect" name=""  style="width:80%" />
</fieldset>

<fieldset class="no_border">
<label>Address:</label><br /><input type="text"  class="effect"   style="width:80%" />
</fieldset>

<fieldset class="no_border">
<div class="float_left"><label>Date of Birth:</label><br /><input type="text"  class="effect" name="input" id="nominee_one_dob" style="width:40%"  /></div>

<div class="float_left"><label>Age in years:</label><br /><input readonly="readonly" type="text"  class="effect" name="input" id="nominee_one_years" value="0"  style="width:20%"  /></div>

<div class="float_left"><label>Relationship:</label><br /><input type="text"  class="effect"  style="width:40%"  /></div>
</fieldset>


<fieldset class="no_border" id="guardian_one_details">

<div class="float_left_guardian">
<label>Guardian Name:</label><br /><input type="text" style="width:90%" class="effect" /></div>

<div class="float_left_guardian"><label>Guardian PAN:</label><br /><input type="text" class="effect"...

CSS

form {
			margin:0 auto; 
			text-align:left;
			width:740px;
			border:1px solid #ccc;
			padding:15px;
			background:#fff;
			border-radius: 10px; 
			-moz-border-radius: 10px; 
			-webkit-border-radius: 10px; 
			box-shadow: 0 0 4px #ccc; 
			-webkit-box-shadow: 0 0 4px #ccc; 
			-moz-box-shadow: 0 0 4px #ccc;
			behavior: url(./border-radius.htc);
			font-family:Calibri;
			height: auto;
		}
		fieldset.border{
			overflow:hidden;
			border:1;
			
			margin:3px 0;
    	}
		fieldset.no_border{
			overflow:hidden;
			border:0;
  
			margin:3px 0;
    	}
    	input.effect {
			float:left;
			border:1px solid #ccc;	
			height: 20px;
			padding:3px;
			width:190px;
			font-size:14px;
			-moz-border-radius: 5px;
			-webkit-border-radius: 5px;
			border-radius: 5px;
				
		}
		
			
		.cssSubmitButton {			
			font-size: 12px;
			background: #fff no-repeat 4px 5px;
			display: inline-block;
			padding: 5px 20px 6px;
			color: #333;
			border:1px solid #ccc;
			text-decoration: none;
			font-weight: bold;
			line-height: 1.9em;
			border-radius: 15px;
			-moz-border-radius: 15px;
			-webkit-border-radius: 15px;
			-moz-box-shadow: 0 1px 3px #999;
			-webkit-box-shadow: 0 1px 3px #999;
			position: relative;
			cursor: pointer;
			outline:none;
		}
		
		.cssSubmitButton:visited {}
		
		.cssSubmitButton:hover {
			border:1px solid #333;
		}
			
		#personal_details span{
			margin-left: 50px;
			color: #b1b1b1;
			font-size: 11px;
			font-style:...

JavaScript

$( "#nominee_one_dob" ).datepicker({
	changeMonth: true,
	changeYear: true,
	dateFormat: 'yy/mm/dd',
	yearRange: "-120:+0",
	
	onClose: function(date){
		
		var dob = new Date(date);
        var today = new Date();

		var birth_year = dob.getFullYear();
		var current_year = today.getFullYear();
		
		var current_age = current_year - birth_year;
		
		//alert(current_age);

        if (current_age < 18)
        {
            
			$("#nominee_one_years").val(current_age);
			$("#guardian_one_details").css("display","block");
			
        }
        else
        {
            //alert(" Over 18");
			$("#nominee_one_years").val(current_age);
			$("#guardian_one_details").css("display","none");
        }
	}
	
  });
  
  $( "#nominee_two_dob" ).datepicker({
	changeMonth: true,
	changeYear: true,
	dateFormat: 'yy/mm/dd',
	yearRange: "-120:+0",
	
	onClose: function(date){
		var dob = new Date(date);
        var today = new Date();
		
		var birth_year = dob.getFullYear();
		var current_year = today.getFullYear();
		
		var current_age = current_year - birth_year;
		
		//alert(current_age);

        if (current_age < 18)
        {
            //alert("Under 18");
			$("#nominee_two_years").val(current_age);
			$("#guardian_two_details").css("display","block");
        }
        else
        {
            //alert(" Over 18");
			$("#nominee_two_years").val(current_age);
			$("#guardian_two_details").css("display","none");
        }
	}
  });
  
  $( "#nominee_three_dob" ).datepicker({
	changeMonth: true,
	changeYear: true,
	dateFormat: 'yy/mm/dd',
	yearRange: "-120:+0",
	
	onClose: function(date){
		var dob = new Date(date);
        var today = new Date();
		
		var birth_year = dob.getFullYear();
		var current_year = today.getFullYear();
		
		var current_age = current_year - birth_year;
		
		//alert(current_age);

        if (current_age < 18)
        {
            //alert("Under...