I am working on webpage which has following :
- Collapsible panel as it has lot of fields( have used Accordian style for this purpose)
- 3 Javascripts to enable/disable set of fields based on Checkbox
- Jquery to show/hide the tablerows depending upon the dropdown so if they select 0 nothing shows, if they select 1 row 1 shows and selct 2 to display 2 rows and so on..
The problem I am facing is that scripts and query works separately but not when they are combined together. Please help !!!
Below is the code :
- Collapsible panel as it has lot of fields( have used Accordian style for this purpose)
- 3 Javascripts to enable/disable set of fields based on Checkbox
- Jquery to show/hide the tablerows depending upon the dropdown so if they select 0 nothing shows, if they select 1 row 1 shows and selct 2 to display 2 rows and so on..
The problem I am facing is that scripts and query works separately but not when they are combined together. Please help !!!
Below is the code :
Code:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!--This is Javascript to disable the address fields if user doesn't tick the checkbox-->
<script type="text/javascript">
$(document).ready(function(){
$('#sccb').click(function(){
if (this.checked) {
$('#cns').removeAttr("disabled");
$('#cns2').removeAttr("disabled");
$('#cns3').removeAttr("disabled");
$('#cns4').removeAttr("disabled");
$('#cns5').removeAttr("disabled");
$('#cns6').removeAttr("disabled");
$('#cns7').removeAttr("disabled");
} else {
$("#cns").attr("disabled", true);
$("#cns2").attr("disabled", true);
$("#cns3").attr("disabled", true);
$('#cns4').attr("disabled", true);
$('#cns5').attr("disabled", true);
$('#cns6').attr("disabled", true);
$('#cns7').attr("disabled", true);
}
});
});
</script>
<script type="text/javascript">
$(document).ready(function(){
$('#sccb1').click(function(){
if (this.checked) {
$('#cns8').removeAttr("disabled");
$('#cns9').removeAttr("disabled");
$('#cns10').removeAttr("disabled");
$('#cns11').removeAttr("disabled");
$('#cns12').removeAttr("disabled");
$('#cns13').removeAttr("disabled");
$('#cns14').removeAttr("disabled");
} else {
$("#cns8").attr("disabled", true);
$("#cns9").attr("disabled", true);
$("#cns10").attr("disabled", true);
$("#cns11").attr("disabled", true);
$("#cns12").attr("disabled", true);
$("#cns13").attr("disabled", true);
$("#cns14").attr("disabled", true);
}
});
});
</script>
<script type="text/javascript">
$(document).ready(function(){
$('#sccb2').click(function(){
if (this.checked) {
$('#cns15').removeAttr("disabled");
$('#cns16').removeAttr("disabled");
$('#cns17').removeAttr("disabled");
$('#cns18').removeAttr("disabled");
$('#cns19').removeAttr("disabled");
$('#cns20').removeAttr("disabled");
$('#cns21').removeAttr("disabled");
} else {
$("#cns15").attr("disabled", true);
$("#cns16").attr("disabled", true);
$("#cns17").attr("disabled", true);
$("#cns18").attr("disabled", true);
$("#cns19").attr("disabled", true);
$("#cns20").attr("disabled", true);
$("#cns21").attr("disabled", true);
}
});
});
</script>
<script>
$( document ).ready(function() {
$( "select" ).change(function () {
var val = $( "select" ).val();
if (val != 'select one') {
var tableRows = $("table tr");
jQuery.each(tableRows, function(i ,tr) {
if (i > val) {
$(tr).hide();
} else {
$(tr).show();
}
})
}
}
)
});
</script>
<style>
.input {
display: inline;
-webkit-box-sizing: content-box;
-moz-box-sizing: content-box;
box-sizing: content-box;
position: absolute;
padding: 4px;
border: 2px solid #b7b7b7;
-webkit-border-radius: 4px;
border-radius: 4px;
font: normal 14px/normal "Comic Sans MS", cursive, sans-serif;
color: rgba(0,0,0,1);
-o-text-overflow: ellipsis;
text-overflow: ellipsis;
background: rgba(255,255,255,1);
-webkit-box-shadow: 0 0 1px 0 rgba(0,0,0,0.5) ;
box-shadow: 0 0 1px 0 rgba(0,0,0,0.5) ;
text-shadow: 1px 1px 0 rgba(255,255,255,0.66) ;
-webkit-transition: all 200ms cubic-bezier(0.42, 0, 1, 1);
-moz-transition: all 200ms cubic-bezier(0.42, 0, 1, 1);
-o-transition: all 200ms cubic-bezier(0.42, 0, 1, 1);
transition: all 200ms cubic-bezier(0.42, 0, 1, 1);
}
tbody tr {
display: none;
}
</style>
</head>
<body>
<div class="container">
<h2>Accordion Example</h2>
<div class="panel-group" id="accordion">
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" href="#collapse1">Collapsible Group 1</a>
</h4>
</div>
<div id="collapse1" class="panel-collapse collapse in">
<div class="panel-body">
<fieldset>
<fieldset style="width: 1031px;"><legend style="font-weight: bold; font-family: Comic Sans MS;">Personal Details</legend><br>
<div style="width: 1021px;" class="form-group"> <big><label for="stuftitle">Title<span style="color: red;">*</span></label></big>
<select name="stuftitle" class="input">
<option value="">-select--</option>
<option>Mr</option>
<option>Dr</option>
</select>
<big><label for="stuffname">Firstname<span style="color: red;">*</span></label></big>
<input size="15" name="stuffname" class="input">
<big><label for="stufmname">Middlename<span style="color: red;">*</span></label></big>
<input size="15" class="input" name="stufmname">
<big><label for="stufsname">Surname<span style="color: red;">*</span></label></big>
<input size="16" class="input" name="stufsname"></div>
<br>
<big><label for="stufgender">Gender<span style="color: red;">*</span></label></big>
<select name="stufgender" class="input">
<option value="">-select--</option>
<option>Male</option>
<option>Mx</option>
</select>
<big><label for="stufdob">Birthdate<span style="color: red;">*</span></label></big>
<input size="15" name="stufdob" class="input" type="date">
<big><label for="stufmobile">Mobile<span style="color: red;">*</span></label></big>
<input size="15" class="input" name="stufmobile">
<big><label for="stufemail">Email<span style="color: red;">*</span></label></big>
<input size="19" class="input" name="stufemail" type="email">
</fieldset>
<fieldset style="width: 1012px;">
<legend><br>
<span style="font-weight: bold; font-family: Comic Sans MS;">Address
Details</span></legend>
<div style="width: 1021px;" class="form-group">
<big><label for="stufaddress">If address different than Applicant's address please tick the checkbox? <span style="color: red;">*</span></label></big> <input type="checkbox" id="sccb" name="stufaddress" value="stufaddress"><br><br>
<big><label for="stufadd1">Add. Line 1<span style="color: red;">*</span></label></big>
<input type="text" class="input" id="cns" name="stufadd1" disabled="disabled"/>
<big><label for="stufadd2">Add. Line 2</label></big>
<input type="text" class="input" id="cns2" name="stufadd2" disabled="disabled"/>
<big><label for="stufadd3">Add. Line 3</label></big>
<input type="text" class="input" id="cns3" name="stufadd3" disabled="disabled" size="18"/><br>
<br>
<big><label for="stufcity">City<span style="color: red;">*</span></label></big>
<input size="15" class="input" type="text" id="cns4" name="stufcity" disabled="disabled"/>
<big><label for="stufstate">State<span style="color: red;">*</span></label></big>
<input size="15" class="input" type="text" id="cns5" name="stufstate" disabled="disabled"/>
<big><label for="stufcountry">Country<span style="color: red;">*</span></label></big>
<input size="15" class="input" type="text" id="cns6" name="stufcountry" disabled="disabled"/>
<big><label for="stufpincode">Pincode<span style="color: red;">*</span></label></big>
<input size="10" class="input" type="text" id="cns7" name="stufpincode" disabled="disabled"/> </div>
</fieldset>
<br style="font-family: Comic Sans MS;">
<fieldset>
<legend style="font-weight: bold; font-family: Comic Sans MS;">Qualification
Details</legend>
<div style="width: 1021px;" class="form-group"><big><big><small><label for="stufpgd">Post Graduation </label></small><label for="stufpgd"></label></big> </big>
<input name="stufpgd" class="input">
<big><label for="stufgd">Graduation</label></big>
<input class="input" name="stufgd">
<big><label for="stuf12">12th Marks/Grade</label></big>
<input size="10" class="input" name="stuf12"><br>
<div style="width: 1021px;" class="form-group"><span style="color: red;">(include
University name)</span>
<span style="color: red;">(include University name)</span><br>
<br>
<big><label for="stufpq">Profesional Qualification</label></big>
<input name="stufpq" class="input">
<big><label for="stuf10">10th Mark/Grade</label></big> <input size="10" class="input" name="stuf10">
<big><label for="stufalumni">School Alumni?</label></big>
<select name="stufalumni" class="input">
<option value="">-select--</option>
<option>Yes</option>
<option>No
</option>
</select>
</div>
</div>
</fieldset>
<br>
<div style="width: 1021px;" class="form-group">
<fieldset><legend style="font-family: Comic Sans MS; font-weight: bold;">Job/Business
Detail</legend>
<div style="width: 1021px;" class="form-group"><big><label for="stufcname">Company Name</label></big>
<input name="stufcname" class="input">
<big><label for="stufoccupation">Occupation</label></big>
<input class="input" name="stufoccupation">
<big><label for="stufdesignation">Designation</label></big>
<input size="18" class="input" name="stufdesignation"><br>
<br>
<big><label for="stufcadd1">Add. Line 1</label></big>
<input name="stufcadd1" class="input">
<big><label for="stufcadd2">Add. Line 2</label></big>
<input class="input" name="stufcadd2">
<big><label style="font-weight: bold;" for="stufcadd3">Add. Line 3</label></big>
<input size="16" class="input" name="stufcadd3"><br>
<br>
<big><label for="stufccity">City</label></big>
<input size="15" name="stufccity" class="input">
<big><label for="stufcstate">State</label></big>
<input size="15" class="input" name="stufcstate">
<big><label for="stufcpincode">Pincode</label></big>
<input size="15" class="input" name="stufcpincode">
<big><label for="stufdoj">Joining Date</label></big>
<input class="input" name="stufdoj" size="15" type="date">
</div>
</fieldset>
</div>
</fieldset>
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" href="#collapse2">Collapsible Group 2</a>
</h4>
</div>
<div id="collapse2" class="panel-collapse collapse">
<div class="panel-body">
<fieldset>
<fieldset style="width: 1031px;"><legend style="font-weight: bold; font-family: Comic Sans MS;">Personal Details</legend><br>
<div style="width: 1021px;" class="form-group"> <big><label for="stumtitle">Title<span style="color: red;">*</span></label></big>
<select name="stumtitle" class="input">
<option value="">-select--</option>
<option>Mrs</option>
<option>Ms</option>
<option>Miss</option>
<option>Dr</option>
</select>
<big><label for="stumfname">Firstname<span style="color: red;">*</span></label></big>
<input size="15" name="stumfname" class="input">
<big><label for="stummname">Middlename<span style="color: red;">*</span></label></big>
<input size="15" class="input" name="stummname">
<big><label for="stumsname">Surname<span style="color: red;">*</span></label></big>
<input size="16" class="input" name="stumsname"></div>
<br>
<big><label for="stumgender">Gender<span style="color: red;">*</span></label></big>
<select name="stumgender" class="input">
<option value="">-select--</option>
<option>Female</option>
<option>Mx</option>
</select>
<big><label for="stumdob">Birthdate<span style="color: red;">*</span></label></big>
<input size="15" name="stumdob" class="input" type="date">
<big><label for="stummobile">Mobile<span style="color: red;">*</span></label></big>
<input size="15" class="input" name="stummobile">
<big><label for="stumemail">Email<span style="color: red;">*</span></label></big>
<input size="19" class="input" name="stumemail" type="email">
</fieldset>
<fieldset style="width: 1012px;">
<legend><br>
<span style="font-weight: bold; font-family: Comic Sans MS;">Address
Details</span></legend>
<div style="width: 1021px;" class="form-group">
<big><label for="stumaddress">If address different than Applicant's address please tick the checkbox? <span style="color: red;">*</span></label></big><big> <input type="checkbox" id="sccb1" name="stumaddress" value="stumaddress"><br><br>
<label for="stumadd1">Add. Line 1<span style="color: red;">*</span></label>
<input type="text" id="cns8" class="input" name="stumadd1" disabled="disabled"/>
<label for="stumadd2">Add. Line 2</label>
<input type="text" id="cns9" class="input" name="stumadd2" disabled="disabled"/>
<label for="stumadd3">Add. Line 3</label>
<input size="18" type="text" id="cns10" class="input" name="stumadd3" disabled="disabled"/><br>
<br>
<label for="stumcity">City<span style="color: red;">*</span></label>
<input size="15" type="text" id="cns11" class="input" name="stumcity" disabled="disabled"/>
<label for="stumstate">State<span style="color: red;">*</span></label>
<input size="15" type="text" id="cns12" class="input" name="stumstate" disabled="disabled"/>
<label for="stumcountry">Country<span style="color: red;">*</span></label>
<input size="15" type="text" id="cns13" class="input" name="stumcountry" disabled="disabled"/>
<label for="stumpincode">Pincode<span style="color: red;">*</span></label>
<input size="10" type="text" id="cns14" class="input" name="stumpincode" disabled="disabled"/></div>
</fieldset>
<br style="font-family: Comic Sans MS;">
<fieldset>
<legend style="font-weight: bold; font-family: Comic Sans MS;">Qualification
Details</legend>
<div style="width: 1021px;" class="form-group"><big><big><small><label for="stumpgd">Post Graduation </label></small><label for="stumpgd"></label></big> </big>
<input name="stumpgd" class="input">
<big><label for="stumgd">Graduation</label></big>
<input class="input" name="stumgd">
<big><label for="stum12">12th Marks/Grade</label></big>
<input size="10" class="input" name="stum12"><br>
<div style="width: 1021px;" class="form-group"><span style="color: red;">(include
University name)</span>
<span style="color: red;">(include University name)</span><br>
<br>
<big><label for="stumpq">Profesional Qualification</label></big>
<input name="stumpq" class="input">
<big><label for="stum10">10th Mark/Grade</label></big> <input size="10" class="input" name="stum10">
<big><label for="stumalumni">School Alumni?</label></big>
<select name="stumalumni" class="input">
<option value="">-select--</option>
<option>Yes</option>
<option>No
</option>
</select>
</div>
</div>
</fieldset>
<br>
<div style="width: 1021px;" class="form-group">
<fieldset><legend style="font-family: Comic Sans MS; font-weight: bold;">Job/Business
Detail</legend>
<div style="width: 1021px;" class="form-group"><big><label for="stumcname">Company Name</label></big>
<input name="stumcname" class="input">
<big><label for="stumoccupation">Occupation</label></big>
<input class="input" name="stumoccupation">
<big><label for="stumdesignation">Designation</label></big>
<input size="18" class="input" name="stumdesignation"><br>
<br>
<big><label for="stumcadd1">Add. Line 1</label></big>
<input name="stumcadd1" class="input">
<big><label for="stumcadd2">Add. Line 2</label></big>
<input class="input" name="stumcadd2">
<big><label style="font-weight: bold;" for="stumcadd3">Add. Line 3</label></big>
<input size="16" class="input" name="stumcadd3"><br>
<br>
<big><label for="stumccity">City</label></big>
<input size="15" name="stumccity" class="input">
<big><label for="stumcstate">State</label></big>
<input size="15" class="input" name="stumcstate">
<big><label for="stumcpincode">Pincode</label></big>
<input size="15" class="input" name="stumcpincode">
<big><label for="stumdoj">Joining Date</label></big>
<input class="input" name="stumdoj" size="15" type="date">
</div>
</fieldset>
</div>
</fieldset>
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" href="#collapse3">Collapsible Group 3</a>
</h4>
</div>
<div id="collapse3" class="panel-collapse collapse">
<div class="panel-body">
<fieldset>
<fieldset style="width: 1031px;"><legend style="font-weight: bold; font-family: Comic Sans MS;">Personal Details</legend><br>
<div style="width: 1021px;" class="form-group"> <big><label for="stugtitle">Title<span style="color: red;">*</span></label></big>
<select name="stugtitle" class="input">
<option value="">-select--</option>
<option>Mr</option>
<option>Mrs</option>
<option>Ms</option>
<option>Miss</option>
<option>Dr</option>
</select>
<big><label for="stugfname">Firstname<span style="color: red;">*</span></label></big>
<input size="15" name="stugfname" class="input">
<big><label for="stugmname">Middlename<span style="color: red;">*</span></label></big>
<input size="15" class="input" name="stugmname">
<big><label for="stugsname">Surname<span style="color: red;">*</span></label></big>
<input size="16" class="input" name="stugsname"></div>
<br>
<big><label for="stuggender">Gender<span style="color: red;">*</span></label></big>
<select name="stuggender" class="input">
<option value="">-select--</option>
<option>Male</option>
<option>Female</option>
<option>Mx</option>
</select>
<big><label for="stugdob">Birthdate<span style="color: red;">*</span></label></big>
<input size="15" name="stugdob" class="input" type="date">
<big><label for="stugmobile">Mobile<span style="color: red;">*</span></label></big>
<input size="15" class="input" name="stugmobile">
<big><label for="stugemail">Email<span style="color: red;">*</span></label></big>
<input size="19" class="input" name="stugemail" type="email">
</fieldset>
<fieldset style="width: 1012px;">
<legend><br>
<span style="font-weight: bold; font-family: Comic Sans MS;">Address
Details</span></legend>
<div style="width: 1021px;" class="form-group">
<big><label for="stugaddress">If address different than Applicant's address please tick the checkbox?<span style="color: red;">*</span></label></big>
<input type="checkbox" id="sccb2" name="stugaddress" value="stugaddress"><br><br>
<big><label for="stugadd1">Add. Line 1<span style="color: red;">*</span></label></big>
<input type="text" id="cns15" class="input" name="stugadd1" disabled="disabled"/>
<big><label for="stugadd2">Add. Line 2</label></big>
<input type="text" id="cns16" class="input" name="stugadd2" disabled="disabled"/>
<big><label for="stugadd3">Add. Line 3</label></big>
<input size="18" type="text" id="cns17" class="input" name="stugadd3" disabled="disabled"/><br>
<br>
<big><label for="stugcity">City<span style="color: red;">*</span></label></big>
<input size="15" type="text" id="cns18" class="input" name="stugcity" disabled="disabled"/>
<big><label for="stugstate">State<span style="color: red;">*</span></label></big>
<input size="15" type="text" id="cns19" class="input" name="stugstate" disabled="disabled"/>
<big><label for="stugcountry">Country<span style="color: red;">*</span></label></big>
<input size="15" type="text" id="cns20" class="input" name="stugcountry" disabled="disabled"/>
<big><label for="stugpincode">Pincode<span style="color: red;">*</span></label></big>
<input size="10" type="text" id="cns21" class="input" name="stumgpincode" disabled="disabled"/></div>
</fieldset>
<br style="font-family: Comic Sans MS;">
<fieldset>
<legend style="font-weight: bold; font-family: Comic Sans MS;">Qualification
Details</legend>
<div style="width: 1021px;" class="form-group"><big><big><small><label for="stugpgd">Post Graduation </label></small><label for="stugpgd"></label></big> </big>
<input name="stugpgd" class="input">
<big><label for="stuggd">Graduation</label></big>
<input class="input" name="stuggd">
<big><label for="stug12">12th Marks/Grade</label></big>
<input size="10" class="input" name="stug12"><br>
<div style="width: 1021px;" class="form-group"><span style="color: red;">(include
University name)</span>
<span style="color: red;">(include University name)</span><br>
<br>
<big><label for="stugpq">Profesional Qualification</label></big>
<input name="stugpq" class="input">
<big><label for="stug10">10th Mark/Grade</label></big> <input size="10" class="input" name="stug10">
<big><label for="stugalumni">School Alumni?</label></big>
<select name="stugalumni" class="input">
<option value="">-select--</option>
<option>Yes</option>
<option>No
</option>
</select>
</div>
</div>
</fieldset>
<br>
<div style="width: 1021px;" class="form-group">
<fieldset><legend style="font-family: Comic Sans MS; font-weight: bold;">Job/Business
Detail</legend>
<div style="width: 1021px;" class="form-group"><big><label for="stugcname">Company Name</label></big>
<input name="stugcname" class="input">
<big><label for="stugoccupation">Occupation</label></big>
<input class="input" name="stugoccupation">
<big><label for="stugdesignation">Designation</label></big>
<input size="18" class="input" name="stugdesignation"><br>
<br>
<big><label for="stugcadd1">Add. Line 1</label></big>
<input name="stugcadd1" class="input">
<big><label for="stugcadd2">Add. Line 2</label></big>
<input class="input" name="stugcadd2">
<big><label style="font-weight: bold;" for="stugcadd3">Add. Line 3</label></big>
<input size="16" class="input" name="stugcadd3"><br>
<br>
<big><label for="stugccity">City</label></big>
<input size="15" name="stugccity" class="input">
<big><label for="stugcstate">State</label></big>
<input size="15" class="input" name="stugcstate">
<big><label for="stugcpincode">Pincode</label></big>
<input size="15" class="input" name="stugcpincode">
<big><label for="stugdoj">Joining Date</label></big>
<input class="input" name="stugdoj" size="15" type="date">
</div>
</fieldset>
</div>
</fieldset>
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" href="#collapse4">Sibling Detail</a>
</h4>
</div>
<div id="collapse4" class="panel-collapse collapse">
<div class="panel-body">
<big style="font-family: Comic Sans MS;"><big>Select Number of siblings<span
style="color: red; font-weight: bold;">*</span></big></big><span
style="font-family: Comic Sans MS;"> </span>
<select name="app_siblingno" class="input">
<option>select one</option>
<option>0</option>
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
<option>6</option>
</select>
<br>
<br>
<table style="text-align: left; width: 100px;" border="0"
cellpadding="0" cellspacing="0">
<tbody>
<tr>
<td colspan="6" rowspan="1" style="vertical-align: top;">
</td>
</tr>
<tr>
<td style="vertical-align: top;">S.No 1
</td>
<td style="vertical-align: top;"> Name <input name="app_siblingname1">
</td>
<td style="vertical-align: top;"> Birthdate<input name="app_siblingdob1">
</td>
<td style="vertical-align: top;"> Class<select name="app_siblingclass1">
<option>select one</option>
<option>XII</option>
<option>XI</option>
<option>X</option>
<option>IX</option>
<option>VIII</option>
<option>VII</option>
<option>VI</option>
<option>V</option>
<option>IV</option>
<option>III</option>
<option>II</option>
<option>I</option>
<option>KG/Prep</option>
<option>Nursery</option>
</td>
<td style="vertical-align: top;"> Gender<select name="app_siblinggender1">
<option>select one</option>
<option>Male</option>
<option>Female</option>
<option>Mx</option>
</td>
<td style="vertical-align: top;"> School Name<input name="app_schlname1">
</td>
</tr>
<tr>
<td style="vertical-align: top;">2
</td>
<td style="vertical-align: top;"><input name="app_siblingname2">
</td>
<td style="vertical-align: top;"><input name="app_siblingdob2">
</td>
<td style="vertical-align: top;"><select name="app_siblingclass2">
<option>select one</option>
<option>XII</option>
<option>XI</option>
<option>X</option>
<option>IX</option>
<option>VIII</option>
<option>VII</option>
<option>VI</option>
<option>V</option>
<option>IV</option>
<option>III</option>
<option>II</option>
<option>I</option>
<option>KG/Prep</option>
<option>Nursery</option>
</td>
<td style="vertical-align: top;"><select name="app_siblinggender2">
<option>select one</option>
<option>Male</option>
<option>Female</option>
<option>Mx</option>
</td>
<td style="vertical-align: top;"><input name="app_siblingschlname2">
</td>
</tr>
<tr>
<td style="vertical-align: top;">3
</td>
<td style="vertical-align: top;"><input name="app_siblingname3">
</td>
<td style="vertical-align: top;"><input name="app_siblingdob3">
</td>
<td style="vertical-align: top;"><select name="app_siblingclass3">
<option>select one</option>
<option>XII</option>
<option>XI</option>
<option>X</option>
<option>IX</option>
<option>VIII</option>
<option>VII</option>
<option>VI</option>
<option>V</option>
<option>IV</option>
<option>III</option>
<option>II</option>
<option>I</option>
<option>KG/Prep</option>
<option>Nursery</option>
</td>
<td style="vertical-align: top;"><select name="app_siblinggender3">
<option>select one</option>
<option>Male</option>
<option>Female</option>
<option>Mx</option>
</td>
<td style="vertical-align: top;"><input name="app_siblingschlname3">
</td>
</tr>
<tr>
<td style="vertical-align: top;">4
</td>
<td style="vertical-align: top;"><input name="app_siblingname4">
</td>
<td style="vertical-align: top;"><input name="app_siblingdob4">
</td>
<td style="vertical-align: top;"><select name="app_siblingclass4">
<option>select one</option>
<option>XII</option>
<option>XI</option>
<option>X</option>
<option>IX</option>
<option>VIII</option>
<option>VII</option>
<option>VI</option>
<option>V</option>
<option>IV</option>
<option>III</option>
<option>II</option>
<option>I</option>
<option>KG/Prep</option>
<option>Nursery</option>
</td>
<td style="vertical-align: top;"><select name="app_siblinggender4">
<option>select one</option>
<option>Male</option>
<option>Female</option>
<option>Mx</option>
</td>
<td style="vertical-align: top;"><input name="app_siblingschlname4">
</td>
</tr>
<tr>
<td style="vertical-align: top;">5
</td>
<td style="vertical-align: top;"><input name="app_siblingname5">
</td>
<td style="vertical-align: top;"><input name="app_siblingdob5">
</td>
<td style="vertical-align: top;"><select name="app_siblingclass5">
<option>select one</option>
<option>XII</option>
<option>XI</option>
<option>X</option>
<option>IX</option>
<option>VIII</option>
<option>VII</option>
<option>VI</option>
<option>V</option>
<option>IV</option>
<option>III</option>
<option>II</option>
<option>I</option>
<option>KG/Prep</option>
<option>Nursery</option>
</td>
<td style="vertical-align: top;"><select name="app_siblinggender5">
<option>select one</option>
<option>Male</option>
<option>Female</option>
<option>Mx</option>
</td>
<td style="vertical-align: top;"><input name="app_siblingschlname5">
</td>
</tr>
<tr>
<td style="vertical-align: top;">6
</td>
<td style="vertical-align: top;"><input name="app_siblingname6">
</td>
<td style="vertical-align: top;"><input name="app_siblingdob6">
</td>
<td style="vertical-align: top;"><select name="app_siblingclass6">
<option>select one</option>
<option>XII</option>
<option>XI</option>
<option>X</option>
<option>IX</option>
<option>VIII</option>
<option>VII</option>
<option>VI</option>
<option>V</option>
<option>IV</option>
<option>III</option>
<option>II</option>
<option>I</option>
<option>KG/Prep</option>
<option>Nursery</option>
</td>
<td style="vertical-align: top;"><select name="app_siblinggender6">
<option>select one</option>
<option>Male</option>
<option>Female</option>
<option>Mx</option>
</td>
<td style="vertical-align: top;"><input name="app_siblingschlname6">
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" href="#collapse5">Document Upload</a>
</h4>
</div>
<div id="collapse5" class="panel-collapse collapse">
<div class="panel-body">
Document Upload
(Only PDF/JPE/JPEG)</span></big></big></label></big><big><br>
</big><big>
</big><big><span style="color: red;">(Note : File size
should not be more than 100KB)</span></big><big><br>
</big><big>
</big><big><br>
</big><big>
</big><div class="form-group"><big>
</big><big><big><label for="stupassport">1. Password</label></big></big><big>
</big><big><input name="stupassport" accept=".jpg,.pdf" class="input" type="file"></big><big> </big></div><big>
</big><big><br>
</big><big>
</big><big><br>
</big><big>
</big><div class="form-group"><big><big><label for="stuic">2. Immunisation
Certificate <input name="stuic" accept=".jpg,.pdf" class="input" type="file"></label></big></big></div><big>
</big><big><br>
</big><big>
</big><big><br>
</big><big>
</big><div class="form-group"><big>
</big><big><big><label for="stutc">3. Transfer
Certificate</label></big></big><big>
</big><big><input name="stutc" accept=".jpg,.pdf" class="input" type="file"></big></div><big>
</big><big><br>
</big><big>
</big><big><br>
</big><big>
</big><div class="form-group"><big>
</big><big><big><label for="stumrc">4. Marksheet/ Reportcard</label></big></big><big>
</big><big><input name="stumrc" accept=".jpg,.pdf" class="input" type="file"></big></div><big>
</big><big><br>
</big><big>
</big><big><br>
</big><big>
</big><div class="form-group"><big>
</big><big><big><label for="stumr">5. Medical Report</label></big></big><big>
</big><big><input name="stumr" accept=".jpg,.pdf" class="input" type="file"></big></div><big>
</big><big><br>
</big><big>
</big><big><br>
</big><big>
</big><div class="form-group"><big>
</big><big><big><label for="stuod">6. Any Other Document</label></big></big><big>
</big><big><input name="stuod" accept=".jpg,.pdf" class="input" type="file"></big></div><big>
</big><big><br>
</big><big>
</big>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
Comment