By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
431,965 Members | 2,043 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 431,965 IT Pros & Developers. It's quick & easy.

Jquery/Javascript not working

P: 11
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 :

Expand|Select|Wrap|Line Numbers
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.   <meta name="viewport" content="width=device-width, initial-scale=1">
  5.   <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  6.   <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
  7.   <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
  8.   <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
  9.   <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
  10. <!--This is Javascript to disable the address fields if user doesn't tick the checkbox-->
  11. <script type="text/javascript">
  12. $(document).ready(function(){
  13.     $('#sccb').click(function(){
  14.         if (this.checked) {
  15.             $('#cns').removeAttr("disabled");
  16.             $('#cns2').removeAttr("disabled");
  17.             $('#cns3').removeAttr("disabled");
  18.             $('#cns4').removeAttr("disabled");
  19.             $('#cns5').removeAttr("disabled");
  20.             $('#cns6').removeAttr("disabled");
  21.             $('#cns7').removeAttr("disabled");
  22.         } else {
  23.             $("#cns").attr("disabled", true);
  24.             $("#cns2").attr("disabled", true);
  25.             $("#cns3").attr("disabled", true);
  26.             $('#cns4').attr("disabled", true);
  27.             $('#cns5').attr("disabled", true);
  28.             $('#cns6').attr("disabled", true);
  29.             $('#cns7').attr("disabled", true);
  30.         }
  31.     });
  32. });
  33. </script>
  34. <script type="text/javascript">
  35. $(document).ready(function(){
  36.     $('#sccb1').click(function(){
  37.         if (this.checked) {
  38.             $('#cns8').removeAttr("disabled");
  39.             $('#cns9').removeAttr("disabled");
  40.             $('#cns10').removeAttr("disabled");
  41.             $('#cns11').removeAttr("disabled");
  42.             $('#cns12').removeAttr("disabled");
  43.             $('#cns13').removeAttr("disabled");
  44.             $('#cns14').removeAttr("disabled");
  45.  
  46.         } else {
  47.             $("#cns8").attr("disabled", true);
  48.             $("#cns9").attr("disabled", true);
  49.             $("#cns10").attr("disabled", true);
  50.             $("#cns11").attr("disabled", true);
  51.             $("#cns12").attr("disabled", true);
  52.             $("#cns13").attr("disabled", true);
  53.             $("#cns14").attr("disabled", true);
  54.         }
  55.     });
  56. });
  57. </script>
  58. <script type="text/javascript">
  59. $(document).ready(function(){
  60.     $('#sccb2').click(function(){
  61.         if (this.checked) {
  62.             $('#cns15').removeAttr("disabled");
  63.             $('#cns16').removeAttr("disabled");
  64.             $('#cns17').removeAttr("disabled");
  65.             $('#cns18').removeAttr("disabled");
  66.             $('#cns19').removeAttr("disabled");
  67.             $('#cns20').removeAttr("disabled");
  68.             $('#cns21').removeAttr("disabled");
  69.  
  70.         } else {
  71.             $("#cns15").attr("disabled", true);
  72.             $("#cns16").attr("disabled", true);
  73.             $("#cns17").attr("disabled", true);
  74.             $("#cns18").attr("disabled", true);
  75.             $("#cns19").attr("disabled", true);
  76.             $("#cns20").attr("disabled", true);
  77.             $("#cns21").attr("disabled", true);
  78.         }
  79.     });
  80. });
  81. </script>
  82. <script>
  83. $( document ).ready(function() {
  84.     $( "select" ).change(function () {
  85.         var val = $( "select" ).val();
  86.         if (val != 'select one') {
  87.             var tableRows = $("table tr");
  88.             jQuery.each(tableRows, function(i ,tr) {
  89.                 if (i > val) {
  90.                     $(tr).hide();
  91.                 } else {
  92.                     $(tr).show();
  93.                 }
  94.             })
  95.         }
  96.       }
  97.     )
  98. });
  99. </script>
  100.   <style>
  101. .input {
  102. display: inline;
  103. -webkit-box-sizing: content-box;
  104. -moz-box-sizing: content-box;
  105. box-sizing: content-box;
  106. position: absolute;
  107. padding: 4px;
  108. border: 2px solid #b7b7b7;
  109. -webkit-border-radius: 4px;
  110. border-radius: 4px;
  111. font: normal 14px/normal "Comic Sans MS", cursive, sans-serif;
  112. color: rgba(0,0,0,1);
  113. -o-text-overflow: ellipsis;
  114. text-overflow: ellipsis;
  115. background: rgba(255,255,255,1);
  116. -webkit-box-shadow: 0 0 1px 0 rgba(0,0,0,0.5) ;
  117. box-shadow: 0 0 1px 0 rgba(0,0,0,0.5) ;
  118. text-shadow: 1px 1px 0 rgba(255,255,255,0.66) ;
  119. -webkit-transition: all 200ms cubic-bezier(0.42, 0, 1, 1);
  120. -moz-transition: all 200ms cubic-bezier(0.42, 0, 1, 1);
  121. -o-transition: all 200ms cubic-bezier(0.42, 0, 1, 1);
  122. transition: all 200ms cubic-bezier(0.42, 0, 1, 1);
  123. }
  124. tbody tr {
  125. display: none;
  126. }
  127. </style>
  128. </head>
  129. <body>
  130.  
  131. <div class="container">
  132.   <h2>Accordion Example</h2>
  133.   <div class="panel-group" id="accordion">
  134.     <div class="panel panel-default">
  135.       <div class="panel-heading">
  136.         <h4 class="panel-title">
  137.           <a data-toggle="collapse" data-parent="#accordion" href="#collapse1">Collapsible Group 1</a>
  138.         </h4>
  139.       </div>
  140.       <div id="collapse1" class="panel-collapse collapse in">
  141.         <div class="panel-body">
  142. <fieldset>
  143. <fieldset style="width: 1031px;"><legend style="font-weight: bold; font-family: Comic Sans MS;">Personal Details</legend><br>
  144. <div style="width: 1021px;" class="form-group"> <big><label for="stuftitle">Title<span style="color: red;">*</span></label></big>
  145. &nbsp; &nbsp; &nbsp;&nbsp;
  146. <select name="stuftitle" class="input">
  147. <option value="">-select--</option>
  148. <option>Mr</option>
  149. <option>Dr</option>
  150. </select>
  151. &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
  152. &nbsp;&nbsp;&nbsp;
  153. <big><label for="stuffname">Firstname<span style="color: red;">*</span></label></big>
  154. &nbsp; &nbsp;
  155. <input size="15" name="stuffname" class="input">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
  156. &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
  157. &nbsp;&nbsp;
  158. <big><label for="stufmname">Middlename<span style="color: red;">*</span></label></big>&nbsp;
  159. <input size="15" class="input" name="stufmname">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
  160. <big><label for="stufsname">Surname<span style="color: red;">*</span></label></big>
  161. &nbsp;&nbsp;&nbsp; <input size="16" class="input" name="stufsname"></div>
  162. <br>
  163. <big><label for="stufgender">Gender<span style="color: red;">*</span></label></big>&nbsp;
  164. <select name="stufgender" class="input">
  165. <option value="">-select--</option>
  166. <option>Male</option>
  167. <option>Mx</option>
  168. </select>
  169. &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
  170. &nbsp;
  171. <big><label for="stufdob">Birthdate<span style="color: red;">*</span></label></big>
  172. &nbsp;&nbsp;&nbsp;&nbsp; <input size="15" name="stufdob" class="input" type="date">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
  173. &nbsp; &nbsp;&nbsp;
  174. <big><label for="stufmobile">Mobile<span style="color: red;">*</span></label></big>
  175. &nbsp; &nbsp; &nbsp; &nbsp;&nbsp;&nbsp; <input size="15" class="input" name="stufmobile">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
  176. &nbsp;&nbsp;
  177. <big><label for="stufemail">Email<span style="color: red;">*</span></label></big>
  178. &nbsp;&nbsp;&nbsp; <input size="19" class="input" name="stufemail" type="email">
  179. </fieldset>
  180. <fieldset style="width: 1012px;">
  181. <legend><br>
  182. <span style="font-weight: bold; font-family: Comic Sans MS;">Address
  183. Details</span></legend>
  184. <div style="width: 1021px;" class="form-group">
  185. <big><label for="stufaddress">If address different than Applicant's address please tick the checkbox? <span style="color: red;">*</span></label></big>&nbsp;&nbsp;<input type="checkbox" id="sccb" name="stufaddress" value="stufaddress"><br><br>
  186. <big><label for="stufadd1">Add. Line 1<span style="color: red;">*</span></label></big>
  187. &nbsp; &nbsp;&nbsp;&nbsp;&nbsp; <input type="text" class="input" id="cns" name="stufadd1" disabled="disabled"/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
  188. &nbsp; &nbsp; &nbsp; &nbsp; <big><label for="stufadd2">Add. Line 2</label></big>
  189. &nbsp; &nbsp; &nbsp;&nbsp; <input type="text" class="input" id="cns2" name="stufadd2" disabled="disabled"/>
  190. &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
  191. &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;
  192. <big><label for="stufadd3">Add. Line 3</label></big>
  193. &nbsp;<input type="text" class="input" id="cns3" name="stufadd3" disabled="disabled" size="18"/><br>
  194. <br>
  195. <big><label for="stufcity">City<span style="color: red;">*</span></label></big>
  196. &nbsp;&nbsp;&nbsp;
  197. <input size="15" class="input" type="text" id="cns4" name="stufcity" disabled="disabled"/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
  198. <big><label for="stufstate">State<span style="color: red;">*</span></label></big>
  199. &nbsp;&nbsp;
  200. <input size="15" class="input" type="text" id="cns5" name="stufstate" disabled="disabled"/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
  201. <big><label for="stufcountry">Country<span style="color: red;">*</span></label></big>
  202. &nbsp;&nbsp;&nbsp;&nbsp;
  203. <input size="15" class="input" type="text" id="cns6" name="stufcountry" disabled="disabled"/>&nbsp;
  204. &nbsp;&nbsp;&nbsp;&nbsp;
  205. &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
  206. &nbsp; &nbsp; &nbsp; <big><label for="stufpincode">Pincode<span style="color: red;">*</span></label></big>
  207. &nbsp; &nbsp;&nbsp; &nbsp;&nbsp; <input size="10" class="input" type="text" id="cns7" name="stufpincode" disabled="disabled"/> </div>
  208. </fieldset>
  209. <br style="font-family: Comic Sans MS;">
  210. <fieldset>
  211. <legend style="font-weight: bold; font-family: Comic Sans MS;">Qualification
  212. Details</legend>
  213. <div style="width: 1021px;" class="form-group"><big><big><small><label for="stufpgd">Post Graduation </label></small><label for="stufpgd"></label></big>&nbsp;</big>&nbsp;&nbsp;
  214. <input name="stufpgd" class="input">
  215. &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
  216. <big><label for="stufgd">Graduation</label></big>
  217. &nbsp; &nbsp; &nbsp;&nbsp; <input class="input" name="stufgd">
  218. &nbsp; &nbsp;
  219. &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
  220. <big><label for="stuf12">12th Marks/Grade</label></big>
  221. &nbsp; <input size="10" class="input" name="stuf12"><br>
  222. <div style="width: 1021px;" class="form-group"><span style="color: red;">(include
  223. University name)</span>
  224. &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
  225. <span style="color: red;">(include University name)</span><br>
  226. <br>
  227. <big><label for="stufpq">Profesional Qualification</label></big>
  228. &nbsp;
  229. <input name="stufpq" class="input">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
  230. &nbsp;&nbsp;
  231. <big><label for="stuf10">10th Mark/Grade</label></big> &nbsp; &nbsp; <input size="10" class="input" name="stuf10">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
  232. &nbsp;&nbsp;
  233. <big><label for="stufalumni">School Alumni?</label></big>
  234. &nbsp;&nbsp;&nbsp; &nbsp; &nbsp;&nbsp;&nbsp; &nbsp;
  235. <select name="stufalumni" class="input">
  236. <option value="">-select--</option>
  237. <option>Yes</option>
  238. <option>No
  239. </option>
  240. </select>
  241. </div>
  242. </div>
  243. </fieldset>
  244. <br>
  245. <div style="width: 1021px;" class="form-group">
  246. <fieldset><legend style="font-family: Comic Sans MS; font-weight: bold;">Job/Business
  247. Detail</legend>
  248. <div style="width: 1021px;" class="form-group"><big><label for="stufcname">Company Name</label></big>
  249. &nbsp;&nbsp; <input name="stufcname" class="input">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
  250. <big><label for="stufoccupation">Occupation</label></big>
  251. &nbsp; &nbsp; &nbsp;&nbsp; <input class="input" name="stufoccupation">
  252. &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
  253. &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
  254. &nbsp; &nbsp;
  255. <big><label for="stufdesignation">Designation</label></big>
  256. &nbsp;&nbsp; <input size="18" class="input" name="stufdesignation"><br>
  257. <br>
  258. <big><label for="stufcadd1">Add. Line 1</label></big>
  259. &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp; <input name="stufcadd1" class="input">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
  260. &nbsp; &nbsp;&nbsp;
  261. <big><label for="stufcadd2">Add. Line 2</label></big>
  262. &nbsp; &nbsp; &nbsp;&nbsp; <input class="input" name="stufcadd2">&nbsp;&nbsp;
  263. &nbsp;
  264. &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
  265. &nbsp; &nbsp; &nbsp;
  266. <big><label style="font-weight: bold;" for="stufcadd3">Add. Line 3</label></big>
  267. &nbsp; &nbsp;&nbsp; &nbsp; <input size="16" class="input" name="stufcadd3"><br>
  268. <br>
  269. <big><label for="stufccity">City</label></big>
  270. &nbsp;&nbsp;&nbsp; <input size="15" name="stufccity" class="input">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
  271. &nbsp; &nbsp;
  272. <big><label for="stufcstate">State</label></big>
  273. &nbsp;&nbsp; <input size="15" class="input" name="stufcstate">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
  274. &nbsp; &nbsp;
  275. <big><label for="stufcpincode">Pincode</label></big>
  276. &nbsp; <input size="15" class="input" name="stufcpincode">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
  277. &nbsp;&nbsp;
  278. <big><label for="stufdoj">Joining Date</label></big>
  279. &nbsp;&nbsp;&nbsp; <input class="input" name="stufdoj" size="15" type="date">
  280. </div>
  281. </fieldset>
  282. </div>
  283. </fieldset>
  284.         </div>
  285.       </div>
  286.     </div>
  287.     <div class="panel panel-default">
  288.       <div class="panel-heading">
  289.         <h4 class="panel-title">
  290.           <a data-toggle="collapse" data-parent="#accordion" href="#collapse2">Collapsible Group 2</a>
  291.         </h4>
  292.       </div>
  293.       <div id="collapse2" class="panel-collapse collapse">
  294.         <div class="panel-body">
  295. <fieldset>
  296. <fieldset style="width: 1031px;"><legend style="font-weight: bold; font-family: Comic Sans MS;">Personal Details</legend><br>
  297. <div style="width: 1021px;" class="form-group"> <big><label for="stumtitle">Title<span style="color: red;">*</span></label></big>
  298. &nbsp; &nbsp; &nbsp;&nbsp;
  299. <select name="stumtitle" class="input">
  300. <option value="">-select--</option>
  301. <option>Mrs</option>
  302. <option>Ms</option>
  303. <option>Miss</option>
  304. <option>Dr</option>
  305. </select>
  306. &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
  307. &nbsp;&nbsp;&nbsp;
  308. <big><label for="stumfname">Firstname<span style="color: red;">*</span></label></big>
  309. &nbsp; &nbsp;
  310. <input size="15" name="stumfname" class="input">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
  311. &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
  312. &nbsp;&nbsp;
  313. <big><label for="stummname">Middlename<span style="color: red;">*</span></label></big>&nbsp;
  314. <input size="15" class="input" name="stummname">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
  315. <big><label for="stumsname">Surname<span style="color: red;">*</span></label></big>
  316. &nbsp;&nbsp;&nbsp; <input size="16" class="input" name="stumsname"></div>
  317. <br>
  318. <big><label for="stumgender">Gender<span style="color: red;">*</span></label></big>&nbsp;
  319. <select name="stumgender" class="input">
  320. <option value="">-select--</option>
  321. <option>Female</option>
  322. <option>Mx</option>
  323. </select>
  324. &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
  325. &nbsp;
  326. <big><label for="stumdob">Birthdate<span style="color: red;">*</span></label></big>
  327. &nbsp;&nbsp;&nbsp;&nbsp; <input size="15" name="stumdob" class="input" type="date">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
  328. &nbsp; &nbsp;&nbsp;
  329. <big><label for="stummobile">Mobile<span style="color: red;">*</span></label></big>
  330. &nbsp; &nbsp; &nbsp; &nbsp;&nbsp;&nbsp; <input size="15" class="input" name="stummobile">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
  331. &nbsp;&nbsp;
  332. <big><label for="stumemail">Email<span style="color: red;">*</span></label></big>
  333. &nbsp;&nbsp;&nbsp; <input size="19" class="input" name="stumemail" type="email">
  334. </fieldset>
  335. <fieldset style="width: 1012px;">
  336. <legend><br>
  337. <span style="font-weight: bold; font-family: Comic Sans MS;">Address
  338. Details</span></legend>
  339. <div style="width: 1021px;" class="form-group">
  340. <big><label for="stumaddress">If address different than Applicant's address please tick the checkbox? <span style="color: red;">*</span></label></big><big>&nbsp;&nbsp;<input type="checkbox" id="sccb1" name="stumaddress" value="stumaddress"><br><br>
  341. <label for="stumadd1">Add. Line 1<span style="color: red;">*</span></label>
  342. &nbsp; &nbsp;&nbsp;&nbsp;&nbsp; <input type="text" id="cns8" class="input" name="stumadd1" disabled="disabled"/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
  343. &nbsp; &nbsp; &nbsp; &nbsp; <label for="stumadd2">Add. Line 2</label>
  344. &nbsp; &nbsp; &nbsp;&nbsp; <input type="text" id="cns9" class="input" name="stumadd2" disabled="disabled"/>
  345. &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
  346. &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;
  347. <label for="stumadd3">Add. Line 3</label>
  348. &nbsp; <input size="18" type="text" id="cns10" class="input" name="stumadd3" disabled="disabled"/><br>
  349. <br>
  350. <label for="stumcity">City<span style="color: red;">*</span></label>
  351. &nbsp;&nbsp;&nbsp;
  352. <input size="15" type="text" id="cns11" class="input" name="stumcity" disabled="disabled"/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
  353. <label for="stumstate">State<span style="color: red;">*</span></label>
  354. &nbsp;&nbsp;
  355. <input size="15" type="text" id="cns12" class="input" name="stumstate" disabled="disabled"/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
  356. <label for="stumcountry">Country<span style="color: red;">*</span></label>
  357. &nbsp;&nbsp;&nbsp;&nbsp;
  358. <input size="15" type="text" id="cns13" class="input" name="stumcountry" disabled="disabled"/>&nbsp;
  359. &nbsp;&nbsp;&nbsp;&nbsp;
  360. &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
  361. &nbsp; &nbsp; &nbsp;<label for="stumpincode">Pincode<span style="color: red;">*</span></label>
  362. &nbsp; &nbsp;&nbsp; &nbsp;&nbsp; <input size="10" type="text" id="cns14" class="input" name="stumpincode" disabled="disabled"/></div>
  363. </fieldset>
  364. <br style="font-family: Comic Sans MS;">
  365. <fieldset>
  366. <legend style="font-weight: bold; font-family: Comic Sans MS;">Qualification
  367. Details</legend>
  368. <div style="width: 1021px;" class="form-group"><big><big><small><label for="stumpgd">Post Graduation </label></small><label for="stumpgd"></label></big>&nbsp;</big>&nbsp;&nbsp;
  369. <input name="stumpgd" class="input">
  370. &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
  371. <big><label for="stumgd">Graduation</label></big>
  372. &nbsp; &nbsp; &nbsp;&nbsp; <input class="input" name="stumgd">
  373. &nbsp; &nbsp;
  374. &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
  375. <big><label for="stum12">12th Marks/Grade</label></big>
  376. &nbsp; <input size="10" class="input" name="stum12"><br>
  377. <div style="width: 1021px;" class="form-group"><span style="color: red;">(include
  378. University name)</span>
  379. &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
  380. <span style="color: red;">(include University name)</span><br>
  381. <br>
  382. <big><label for="stumpq">Profesional Qualification</label></big>
  383. &nbsp;
  384. <input name="stumpq" class="input">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
  385. &nbsp;&nbsp;
  386. <big><label for="stum10">10th Mark/Grade</label></big> &nbsp; &nbsp; <input size="10" class="input" name="stum10">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
  387. &nbsp;&nbsp;
  388. <big><label for="stumalumni">School Alumni?</label></big>
  389. &nbsp;&nbsp;&nbsp; &nbsp; &nbsp;&nbsp;&nbsp; &nbsp;
  390. <select name="stumalumni" class="input">
  391. <option value="">-select--</option>
  392. <option>Yes</option>
  393. <option>No
  394. </option>
  395. </select>
  396. </div>
  397. </div>
  398. </fieldset>
  399. <br>
  400. <div style="width: 1021px;" class="form-group">
  401. <fieldset><legend style="font-family: Comic Sans MS; font-weight: bold;">Job/Business
  402. Detail</legend>
  403. <div style="width: 1021px;" class="form-group"><big><label for="stumcname">Company Name</label></big>
  404. &nbsp;&nbsp; <input name="stumcname" class="input">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
  405. <big><label for="stumoccupation">Occupation</label></big>
  406. &nbsp; &nbsp; &nbsp;&nbsp; <input class="input" name="stumoccupation">
  407. &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
  408. &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
  409. &nbsp; &nbsp;
  410. <big><label for="stumdesignation">Designation</label></big>
  411. &nbsp;&nbsp; <input size="18" class="input" name="stumdesignation"><br>
  412. <br>
  413. <big><label for="stumcadd1">Add. Line 1</label></big>
  414. &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp; <input name="stumcadd1" class="input">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
  415. &nbsp; &nbsp;&nbsp;
  416. <big><label for="stumcadd2">Add. Line 2</label></big>
  417. &nbsp; &nbsp; &nbsp;&nbsp; <input class="input" name="stumcadd2">&nbsp;&nbsp;
  418. &nbsp;
  419. &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
  420. &nbsp; &nbsp; &nbsp;
  421. <big><label style="font-weight: bold;" for="stumcadd3">Add. Line 3</label></big>
  422. &nbsp; &nbsp;&nbsp; &nbsp; <input size="16" class="input" name="stumcadd3"><br>
  423. <br>
  424. <big><label for="stumccity">City</label></big>
  425. &nbsp;&nbsp;&nbsp; <input size="15" name="stumccity" class="input">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
  426. &nbsp; &nbsp;
  427. <big><label for="stumcstate">State</label></big>
  428. &nbsp;&nbsp; <input size="15" class="input" name="stumcstate">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
  429. &nbsp; &nbsp;
  430. <big><label for="stumcpincode">Pincode</label></big>
  431. &nbsp; <input size="15" class="input" name="stumcpincode">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
  432. &nbsp;&nbsp;
  433. <big><label for="stumdoj">Joining Date</label></big>
  434. &nbsp;&nbsp;&nbsp; <input class="input" name="stumdoj" size="15" type="date">
  435. </div>
  436. </fieldset>
  437. </div>
  438. </fieldset>
  439.         </div>
  440.       </div>
  441.     </div>
  442.     <div class="panel panel-default">
  443.       <div class="panel-heading">
  444.         <h4 class="panel-title">
  445.           <a data-toggle="collapse" data-parent="#accordion" href="#collapse3">Collapsible Group 3</a>
  446.         </h4>
  447.       </div>
  448.       <div id="collapse3" class="panel-collapse collapse">
  449.         <div class="panel-body">
  450. <fieldset>
  451. <fieldset style="width: 1031px;"><legend style="font-weight: bold; font-family: Comic Sans MS;">Personal Details</legend><br>
  452. <div style="width: 1021px;" class="form-group"> <big><label for="stugtitle">Title<span style="color: red;">*</span></label></big>
  453. &nbsp; &nbsp; &nbsp;&nbsp;
  454. <select name="stugtitle" class="input">
  455. <option value="">-select--</option>
  456. <option>Mr</option>
  457. <option>Mrs</option>
  458. <option>Ms</option>
  459. <option>Miss</option>
  460. <option>Dr</option>
  461. </select>
  462. &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
  463. &nbsp;&nbsp;&nbsp;
  464. <big><label for="stugfname">Firstname<span style="color: red;">*</span></label></big>
  465. &nbsp; &nbsp;
  466. <input size="15" name="stugfname" class="input">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
  467. &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
  468. &nbsp;&nbsp;
  469. <big><label for="stugmname">Middlename<span style="color: red;">*</span></label></big>&nbsp;
  470. <input size="15" class="input" name="stugmname">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
  471. <big><label for="stugsname">Surname<span style="color: red;">*</span></label></big>
  472. &nbsp;&nbsp;&nbsp; <input size="16" class="input" name="stugsname"></div>
  473. <br>
  474. <big><label for="stuggender">Gender<span style="color: red;">*</span></label></big>&nbsp;
  475. <select name="stuggender" class="input">
  476. <option value="">-select--</option>
  477. <option>Male</option>
  478. <option>Female</option>
  479. <option>Mx</option>
  480. </select>
  481. &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
  482. &nbsp;
  483. <big><label for="stugdob">Birthdate<span style="color: red;">*</span></label></big>
  484. &nbsp;&nbsp;&nbsp;&nbsp; <input size="15" name="stugdob" class="input" type="date">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
  485. &nbsp; &nbsp;&nbsp;
  486. <big><label for="stugmobile">Mobile<span style="color: red;">*</span></label></big>
  487. &nbsp; &nbsp; &nbsp; &nbsp;&nbsp;&nbsp; <input size="15" class="input" name="stugmobile">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
  488. &nbsp;&nbsp;
  489. <big><label for="stugemail">Email<span style="color: red;">*</span></label></big>
  490. &nbsp;&nbsp;&nbsp; <input size="19" class="input" name="stugemail" type="email">
  491. </fieldset>
  492. <fieldset style="width: 1012px;">
  493. <legend><br>
  494. <span style="font-weight: bold; font-family: Comic Sans MS;">Address
  495. Details</span></legend>
  496. <div style="width: 1021px;" class="form-group">
  497. <big><label for="stugaddress">If address different than Applicant's address please tick the checkbox?<span style="color: red;">*</span></label></big>
  498. &nbsp;&nbsp;<input type="checkbox" id="sccb2" name="stugaddress" value="stugaddress"><br><br>
  499. <big><label for="stugadd1">Add. Line 1<span style="color: red;">*</span></label></big>
  500. &nbsp; &nbsp;&nbsp;&nbsp;&nbsp; <input type="text" id="cns15" class="input" name="stugadd1" disabled="disabled"/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
  501. &nbsp; &nbsp; &nbsp; &nbsp; <big><label for="stugadd2">Add. Line 2</label></big>
  502. &nbsp; &nbsp; &nbsp;&nbsp; <input type="text" id="cns16" class="input" name="stugadd2" disabled="disabled"/>
  503. &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
  504. &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;
  505. <big><label for="stugadd3">Add. Line 3</label></big>
  506. &nbsp; <input size="18" type="text" id="cns17" class="input" name="stugadd3" disabled="disabled"/><br>
  507. <br>
  508. <big><label for="stugcity">City<span style="color: red;">*</span></label></big>
  509. &nbsp;&nbsp;&nbsp;
  510. <input size="15" type="text" id="cns18" class="input" name="stugcity" disabled="disabled"/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
  511. <big><label for="stugstate">State<span style="color: red;">*</span></label></big>
  512. &nbsp;&nbsp;
  513. <input size="15" type="text" id="cns19" class="input" name="stugstate" disabled="disabled"/>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
  514. <big><label for="stugcountry">Country<span style="color: red;">*</span></label></big>
  515. &nbsp;&nbsp;&nbsp;&nbsp;
  516. <input size="15" type="text" id="cns20" class="input" name="stugcountry" disabled="disabled"/>&nbsp;
  517. &nbsp;&nbsp;&nbsp;&nbsp;
  518. &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
  519. &nbsp; &nbsp; &nbsp; <big><label for="stugpincode">Pincode<span style="color: red;">*</span></label></big>
  520. &nbsp; &nbsp;&nbsp; &nbsp;&nbsp; <input size="10" type="text" id="cns21" class="input" name="stumgpincode" disabled="disabled"/></div>
  521. </fieldset>
  522. <br style="font-family: Comic Sans MS;">
  523. <fieldset>
  524. <legend style="font-weight: bold; font-family: Comic Sans MS;">Qualification
  525. Details</legend>
  526. <div style="width: 1021px;" class="form-group"><big><big><small><label for="stugpgd">Post Graduation </label></small><label for="stugpgd"></label></big>&nbsp;</big>&nbsp;&nbsp;
  527. <input name="stugpgd" class="input">
  528. &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
  529. <big><label for="stuggd">Graduation</label></big>
  530. &nbsp; &nbsp; &nbsp;&nbsp; <input class="input" name="stuggd">
  531. &nbsp; &nbsp;
  532. &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
  533. <big><label for="stug12">12th Marks/Grade</label></big>
  534. &nbsp; <input size="10" class="input" name="stug12"><br>
  535. <div style="width: 1021px;" class="form-group"><span style="color: red;">(include
  536. University name)</span>
  537. &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
  538. <span style="color: red;">(include University name)</span><br>
  539. <br>
  540. <big><label for="stugpq">Profesional Qualification</label></big>
  541. &nbsp;
  542. <input name="stugpq" class="input">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
  543. &nbsp;&nbsp;
  544. <big><label for="stug10">10th Mark/Grade</label></big> &nbsp; &nbsp; <input size="10" class="input" name="stug10">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
  545. &nbsp;&nbsp;
  546. <big><label for="stugalumni">School Alumni?</label></big>
  547. &nbsp;&nbsp;&nbsp; &nbsp; &nbsp;&nbsp;&nbsp; &nbsp;
  548. <select name="stugalumni" class="input">
  549. <option value="">-select--</option>
  550. <option>Yes</option>
  551. <option>No
  552. </option>
  553. </select>
  554. </div>
  555. </div>
  556. </fieldset>
  557. <br>
  558. <div style="width: 1021px;" class="form-group">
  559. <fieldset><legend style="font-family: Comic Sans MS; font-weight: bold;">Job/Business
  560. Detail</legend>
  561. <div style="width: 1021px;" class="form-group"><big><label for="stugcname">Company Name</label></big>
  562. &nbsp;&nbsp; <input name="stugcname" class="input">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
  563. <big><label for="stugoccupation">Occupation</label></big>
  564. &nbsp; &nbsp; &nbsp;&nbsp; <input class="input" name="stugoccupation">
  565. &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
  566. &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
  567. &nbsp; &nbsp;
  568. <big><label for="stugdesignation">Designation</label></big>
  569. &nbsp;&nbsp; <input size="18" class="input" name="stugdesignation"><br>
  570. <br>
  571. <big><label for="stugcadd1">Add. Line 1</label></big>
  572. &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp; <input name="stugcadd1" class="input">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
  573. &nbsp; &nbsp;&nbsp;
  574. <big><label for="stugcadd2">Add. Line 2</label></big>
  575. &nbsp; &nbsp; &nbsp;&nbsp; <input class="input" name="stugcadd2">&nbsp;&nbsp;
  576. &nbsp;
  577. &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
  578. &nbsp; &nbsp; &nbsp;
  579. <big><label style="font-weight: bold;" for="stugcadd3">Add. Line 3</label></big>
  580. &nbsp; &nbsp;&nbsp; &nbsp; <input size="16" class="input" name="stugcadd3"><br>
  581. <br>
  582. <big><label for="stugccity">City</label></big>
  583. &nbsp;&nbsp;&nbsp; <input size="15" name="stugccity" class="input">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
  584. &nbsp; &nbsp;
  585. <big><label for="stugcstate">State</label></big>
  586. &nbsp;&nbsp; <input size="15" class="input" name="stugcstate">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
  587. &nbsp; &nbsp;
  588. <big><label for="stugcpincode">Pincode</label></big>
  589. &nbsp; <input size="15" class="input" name="stugcpincode">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
  590. &nbsp;&nbsp;
  591. <big><label for="stugdoj">Joining Date</label></big>
  592. &nbsp;&nbsp;&nbsp; <input class="input" name="stugdoj" size="15" type="date">
  593. </div>
  594. </fieldset>
  595. </div>
  596. </fieldset>
  597.         </div>
  598.       </div>
  599.     </div>
  600. <div class="panel panel-default">
  601.       <div class="panel-heading">
  602.         <h4 class="panel-title">
  603.           <a data-toggle="collapse" data-parent="#accordion" href="#collapse4">Sibling Detail</a>
  604.         </h4>
  605.       </div>
  606.       <div id="collapse4" class="panel-collapse collapse">
  607.         <div class="panel-body">
  608.  
  609.  
  610.  
  611. <big style="font-family: Comic Sans MS;"><big>Select Number of siblings<span
  612. style="color: red; font-weight: bold;">*</span></big></big><span
  613. style="font-family: Comic Sans MS;"> </span>&nbsp;&nbsp;
  614. <select name="app_siblingno" class="input">
  615. <option>select one</option>
  616. <option>0</option>
  617. <option>1</option>
  618. <option>2</option>
  619. <option>3</option>
  620. <option>4</option>
  621. <option>5</option>
  622. <option>6</option>
  623. </select>
  624. <br>
  625. <br>
  626. <table style="text-align: left; width: 100px;" border="0"
  627. cellpadding="0" cellspacing="0">
  628. <tbody>
  629. <tr>
  630. <td colspan="6" rowspan="1" style="vertical-align: top;">
  631. </td>
  632. </tr>
  633. <tr>
  634. <td style="vertical-align: top;">S.No 1
  635. </td>
  636. <td style="vertical-align: top;">&nbsp;&nbsp;&nbsp;&nbsp;Name&nbsp;&nbsp;&nbsp;&nbsp;<input name="app_siblingname1">
  637. </td>
  638. <td style="vertical-align: top;">&nbsp;&nbsp;&nbsp;&nbsp;Birthdate<input name="app_siblingdob1">
  639. </td>
  640. <td style="vertical-align: top;">&nbsp;&nbsp;&nbsp;&nbsp;Class<select name="app_siblingclass1">
  641. <option>select one</option>
  642. <option>XII</option>
  643. <option>XI</option>
  644. <option>X</option>
  645. <option>IX</option>
  646. <option>VIII</option>
  647. <option>VII</option>
  648. <option>VI</option>
  649. <option>V</option>
  650. <option>IV</option>
  651. <option>III</option>
  652. <option>II</option>
  653. <option>I</option>
  654. <option>KG/Prep</option>
  655. <option>Nursery</option>
  656. </td>
  657. <td style="vertical-align: top;">&nbsp;&nbsp;&nbsp;&nbsp;Gender<select name="app_siblinggender1">
  658. <option>select one</option>
  659. <option>Male</option>
  660. <option>Female</option>
  661. <option>Mx</option>
  662. </td>
  663. <td style="vertical-align: top;">&nbsp;&nbsp;&nbsp;&nbsp;School Name<input name="app_schlname1">
  664. </td>
  665. </tr>
  666. <tr>
  667. <td style="vertical-align: top;">2
  668. </td>
  669. <td style="vertical-align: top;"><input name="app_siblingname2">
  670. </td>
  671. <td style="vertical-align: top;"><input name="app_siblingdob2">
  672. </td>
  673. <td style="vertical-align: top;"><select name="app_siblingclass2">
  674. <option>select one</option>
  675. <option>XII</option>
  676. <option>XI</option>
  677. <option>X</option>
  678. <option>IX</option>
  679. <option>VIII</option>
  680. <option>VII</option>
  681. <option>VI</option>
  682. <option>V</option>
  683. <option>IV</option>
  684. <option>III</option>
  685. <option>II</option>
  686. <option>I</option>
  687. <option>KG/Prep</option>
  688. <option>Nursery</option>
  689. </td>
  690. <td style="vertical-align: top;"><select name="app_siblinggender2">
  691. <option>select one</option>
  692. <option>Male</option>
  693. <option>Female</option>
  694. <option>Mx</option>
  695. </td>
  696. <td style="vertical-align: top;"><input name="app_siblingschlname2">
  697. </td>
  698. </tr>
  699. <tr>
  700. <td style="vertical-align: top;">3
  701. </td>
  702. <td style="vertical-align: top;"><input name="app_siblingname3">
  703. </td>
  704. <td style="vertical-align: top;"><input name="app_siblingdob3">
  705. </td>
  706. <td style="vertical-align: top;"><select name="app_siblingclass3">
  707. <option>select one</option>
  708. <option>XII</option>
  709. <option>XI</option>
  710. <option>X</option>
  711. <option>IX</option>
  712. <option>VIII</option>
  713. <option>VII</option>
  714. <option>VI</option>
  715. <option>V</option>
  716. <option>IV</option>
  717. <option>III</option>
  718. <option>II</option>
  719. <option>I</option>
  720. <option>KG/Prep</option>
  721. <option>Nursery</option>
  722. </td>
  723. <td style="vertical-align: top;"><select name="app_siblinggender3">
  724. <option>select one</option>
  725. <option>Male</option>
  726. <option>Female</option>
  727. <option>Mx</option>
  728. </td>
  729. <td style="vertical-align: top;"><input name="app_siblingschlname3">
  730. </td>
  731. </tr>
  732. <tr>
  733. <td style="vertical-align: top;">4
  734. </td>
  735. <td style="vertical-align: top;"><input name="app_siblingname4">
  736. </td>
  737. <td style="vertical-align: top;"><input name="app_siblingdob4">
  738. </td>
  739. <td style="vertical-align: top;"><select name="app_siblingclass4">
  740. <option>select one</option>
  741. <option>XII</option>
  742. <option>XI</option>
  743. <option>X</option>
  744. <option>IX</option>
  745. <option>VIII</option>
  746. <option>VII</option>
  747. <option>VI</option>
  748. <option>V</option>
  749. <option>IV</option>
  750. <option>III</option>
  751. <option>II</option>
  752. <option>I</option>
  753. <option>KG/Prep</option>
  754. <option>Nursery</option>
  755. </td>
  756. <td style="vertical-align: top;"><select name="app_siblinggender4">
  757. <option>select one</option>
  758. <option>Male</option>
  759. <option>Female</option>
  760. <option>Mx</option>
  761. </td>
  762. <td style="vertical-align: top;"><input name="app_siblingschlname4">
  763. </td>
  764. </tr>
  765. <tr>
  766. <td style="vertical-align: top;">5
  767. </td>
  768. <td style="vertical-align: top;"><input name="app_siblingname5">
  769. </td>
  770. <td style="vertical-align: top;"><input name="app_siblingdob5">
  771. </td>
  772. <td style="vertical-align: top;"><select name="app_siblingclass5">
  773. <option>select one</option>
  774. <option>XII</option>
  775. <option>XI</option>
  776. <option>X</option>
  777. <option>IX</option>
  778. <option>VIII</option>
  779. <option>VII</option>
  780. <option>VI</option>
  781. <option>V</option>
  782. <option>IV</option>
  783. <option>III</option>
  784. <option>II</option>
  785. <option>I</option>
  786. <option>KG/Prep</option>
  787. <option>Nursery</option>
  788. </td>
  789. <td style="vertical-align: top;"><select name="app_siblinggender5">
  790. <option>select one</option>
  791. <option>Male</option>
  792. <option>Female</option>
  793. <option>Mx</option>
  794. </td>
  795. <td style="vertical-align: top;"><input name="app_siblingschlname5">
  796. </td>
  797. </tr>
  798. <tr>
  799. <td style="vertical-align: top;">6
  800. </td>
  801. <td style="vertical-align: top;"><input name="app_siblingname6">
  802. </td>
  803. <td style="vertical-align: top;"><input name="app_siblingdob6">
  804. </td>
  805. <td style="vertical-align: top;"><select name="app_siblingclass6">
  806. <option>select one</option>
  807. <option>XII</option>
  808. <option>XI</option>
  809. <option>X</option>
  810. <option>IX</option>
  811. <option>VIII</option>
  812. <option>VII</option>
  813. <option>VI</option>
  814. <option>V</option>
  815. <option>IV</option>
  816. <option>III</option>
  817. <option>II</option>
  818. <option>I</option>
  819. <option>KG/Prep</option>
  820. <option>Nursery</option>
  821. </td>
  822. <td style="vertical-align: top;"><select name="app_siblinggender6">
  823. <option>select one</option>
  824. <option>Male</option>
  825. <option>Female</option>
  826. <option>Mx</option>
  827. </td>
  828. <td style="vertical-align: top;"><input name="app_siblingschlname6">
  829. </td>
  830. </tr>
  831. </tbody>
  832. </table>
  833.         </div>
  834.       </div>
  835.     </div>
  836. <div class="panel panel-default">
  837.       <div class="panel-heading">
  838.         <h4 class="panel-title">
  839.           <a data-toggle="collapse" data-parent="#accordion" href="#collapse5">Document Upload</a>
  840.         </h4>
  841.       </div>
  842.       <div id="collapse5" class="panel-collapse collapse">
  843.         <div class="panel-body">
  844.         Document Upload
  845. (Only PDF/JPE/JPEG)</span></big></big></label></big><big><br>
  846. </big><big>
  847. </big><big><span style="color: red;">(Note : File size
  848. should not be more than 100KB)</span></big><big><br>
  849. </big><big>
  850. </big><big><br>
  851. </big><big>
  852. </big><div class="form-group"><big>
  853. </big><big><big><label for="stupassport">1. Password</label></big></big><big>&nbsp;&nbsp;&nbsp;
  854. &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;
  855. &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; </big><big><input name="stupassport" accept=".jpg,.pdf" class="input" type="file"></big><big> </big></div><big>
  856. </big><big><br>
  857. </big><big>
  858. </big><big><br>
  859. </big><big>
  860. </big><div class="form-group"><big><big><label for="stuic">2. Immunisation
  861. Certificate&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp; <input name="stuic" accept=".jpg,.pdf" class="input" type="file"></label></big></big></div><big>
  862. </big><big><br>
  863. </big><big>
  864. </big><big><br>
  865. </big><big>
  866. </big><div class="form-group"><big>
  867. </big><big><big><label for="stutc">3. Transfer
  868. Certificate</label></big></big><big>&nbsp;&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;
  869. &nbsp; &nbsp;&nbsp; &nbsp; &nbsp;&nbsp; </big><big><input name="stutc" accept=".jpg,.pdf" class="input" type="file"></big></div><big>
  870. </big><big><br>
  871. </big><big>
  872. </big><big><br>
  873. </big><big>
  874. </big><div class="form-group"><big>
  875. </big><big><big><label for="stumrc">4. Marksheet/ Reportcard</label></big></big><big>
  876. &nbsp;&nbsp; &nbsp;&nbsp;&nbsp; </big><big><input name="stumrc" accept=".jpg,.pdf" class="input" type="file"></big></div><big>
  877. </big><big><br>
  878. </big><big>
  879. </big><big><br>
  880. </big><big>
  881. </big><div class="form-group"><big>
  882. </big><big><big><label for="stumr">5. Medical Report</label></big></big><big>&nbsp; &nbsp;
  883. &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp; </big><big><input name="stumr" accept=".jpg,.pdf" class="input" type="file"></big></div><big>
  884. </big><big><br>
  885. </big><big>
  886. </big><big><br>
  887. </big><big>
  888. </big><div class="form-group"><big>
  889. </big><big><big><label for="stuod">6. Any Other Document</label></big></big><big>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
  890. &nbsp; &nbsp;&nbsp; &nbsp;</big><big><input name="stuod" accept=".jpg,.pdf" class="input" type="file"></big></div><big>
  891. </big><big><br>
  892. </big><big>
  893. </big>
  894.         </div>
  895.       </div>
  896.     </div>
  897.   </div>
  898. </div>
  899.  
  900. </body>
  901. </html>
  902.  
  903.  
Aug 28 '16 #1

✓ answered by Dormilich

Expand|Select|Wrap|Line Numbers
  1. var val = $( "select" ).val();
this will always refer to the first <select>. not the one that triggered the event.

for that you would use
Expand|Select|Wrap|Line Numbers
  1. var val = this.value;

Share this Question
Share on Google+
18 Replies


P: 11
Can someone please help ??
Aug 29 '16 #2

Dormilich
Expert Mod 5K+
P: 8,639
you include jQuery three times with different versions. in that case it would've been a miracle if that went well.
Aug 29 '16 #3

P: 11
can you please suggest me how can I achieve the desired result in that case ?
Aug 29 '16 #4

Dormilich
Expert Mod 5K+
P: 8,639
well, start with including jQuery only once (I thought that one were obvious ...)
Aug 29 '16 #5

gits
Expert Mod 5K+
P: 5,320
besides that i think that the logic for the 'select' handling is wrong. it applies the same handling for all select elements on that page which i think is not the intention, so that part probably needs to be fixed as well.
Aug 29 '16 #6

P: 11
I did try that but i wasnt sure how can I combine 3 different library into one. As my 3 javascripts are referring to 3 check boxes which enables the address fields and the jquery is being used for showing/dispalying the rows based on option chosen
Aug 29 '16 #7

Dormilich
Expert Mod 5K+
P: 8,639
I did try that but i wasnt sure how can I combine 3 different library into one.
you don't combine 3 jQuery versions into one. you use 1 jquery version (the latest possible one) that you know works with each part.
Aug 29 '16 #8

P: 11
I did try looking into that but couldn't find it and that's why choose to go this way. Will you be able to help me please ?
Aug 29 '16 #9

Dormilich
Expert Mod 5K+
P: 8,639
then remove those 3 jQuery links and place one before bootstrap using version 2.2.4 (the latest jQuery 2 release)
Aug 29 '16 #10

P: 11
I think I have boiled down the issue. The problem is table rows jquery. It doesn't seems to be working when run in the html here. However I am able to run it when running it standalone in a separate form. Is it getting conflicted ?
Aug 29 '16 #11

Dormilich
Expert Mod 5K+
P: 8,639
The problem is table rows jquery.
I have no idea what that could mean.
Aug 29 '16 #12

P: 11
The jquery which is not working after including in html code is
Expand|Select|Wrap|Line Numbers
  1. <script>
  2.  
  3. jQuery(function($){
  4. $( document ).ready(function() {
  5.     $( "select" ).change(function () {
  6.         var val = $( "select" ).val();
  7.         if (val != 'select one') {
  8.             var tableRows = $("table tr");
  9.             jQuery.each(tableRows, function(i ,tr) {
  10.                 if (i > val) {
  11.                     $(tr).hide();
  12.                 } else {
  13.                     $(tr).show();
  14.                 }
  15.             })
  16.         }
  17.       }
  18.     )
  19. });
  20. });
  21.  
  22. </script>
  23. <big style="font-family: Comic Sans MS;"><big>Select Number of siblings<span
  24. style="color: red; font-weight: bold;">*</span></big></big><span
  25. style="font-family: Comic Sans MS;"> </span>&nbsp;&nbsp;
  26. <select name="app_siblingno" class="input">
  27. <option>select one</option>
  28. <option>0</option>
  29. <option>1</option>
  30. <option>2</option>
  31. <option>3</option>
  32. <option>4</option>
  33. <option>5</option>
  34. <option>6</option>
  35. </select>
  36. <br>
  37. <br>
  38. <table style="text-align: left; width: 100px;" border="0"
  39. cellpadding="0" cellspacing="0">
  40. <tbody>
  41. <tr>
  42. <td colspan="6" rowspan="1" style="vertical-align: top;">
  43. </td>
  44. </tr>
  45. <tr>
  46. <td style="vertical-align: top;">S.No 1
  47. </td>
  48. <td style="vertical-align: top;">&nbsp;&nbsp;&nbsp;&nbsp;Name&nbsp;&nbsp;&nbsp;&nbsp;<input name="app_siblingname1">
  49. </td>
  50. <td style="vertical-align: top;">&nbsp;&nbsp;&nbsp;&nbsp;Birthdate<input name="app_siblingdob1">
  51. </td>
  52. <td style="vertical-align: top;">&nbsp;&nbsp;&nbsp;&nbsp;Class<select name="app_siblingclass1">
  53. <option>select one</option>
  54. <option>XII</option>
  55. <option>XI</option>
  56. <option>X</option>
  57. <option>IX</option>
  58. <option>VIII</option>
  59. <option>VII</option>
  60. <option>VI</option>
  61. <option>V</option>
  62. <option>IV</option>
  63. <option>III</option>
  64. <option>II</option>
  65. <option>I</option>
  66. <option>KG/Prep</option>
  67. <option>Nursery</option>
  68. </td>
  69. <td style="vertical-align: top;">&nbsp;&nbsp;&nbsp;&nbsp;Gender<select name="app_siblinggender1">
  70. <option>select one</option>
  71. <option>Male</option>
  72. <option>Female</option>
  73. <option>Mx</option>
  74. </td>
  75. <td style="vertical-align: top;">&nbsp;&nbsp;&nbsp;&nbsp;School Name<input name="app_schlname1">
  76. </td>
  77. </tr>
  78. <tr>
  79. <td style="vertical-align: top;">2
  80. </td>
  81. <td style="vertical-align: top;"><input name="app_siblingname2">
  82. </td>
  83. <td style="vertical-align: top;"><input name="app_siblingdob2">
  84. </td>
  85. <td style="vertical-align: top;"><select name="app_siblingclass2">
  86. <option>select one</option>
  87. <option>XII</option>
  88. <option>XI</option>
  89. <option>X</option>
  90. <option>IX</option>
  91. <option>VIII</option>
  92. <option>VII</option>
  93. <option>VI</option>
  94. <option>V</option>
  95. <option>IV</option>
  96. <option>III</option>
  97. <option>II</option>
  98. <option>I</option>
  99. <option>KG/Prep</option>
  100. <option>Nursery</option>
  101. </td>
  102. <td style="vertical-align: top;"><select name="app_siblinggender2">
  103. <option>select one</option>
  104. <option>Male</option>
  105. <option>Female</option>
  106. <option>Mx</option>
  107. </td>
  108. <td style="vertical-align: top;"><input name="app_siblingschlname2">
  109. </td>
  110. </tr>
  111. <tr>
  112. <td style="vertical-align: top;">3
  113. </td>
  114. <td style="vertical-align: top;"><input name="app_siblingname3">
  115. </td>
  116. <td style="vertical-align: top;"><input name="app_siblingdob3">
  117. </td>
  118. <td style="vertical-align: top;"><select name="app_siblingclass3">
  119. <option>select one</option>
  120. <option>XII</option>
  121. <option>XI</option>
  122. <option>X</option>
  123. <option>IX</option>
  124. <option>VIII</option>
  125. <option>VII</option>
  126. <option>VI</option>
  127. <option>V</option>
  128. <option>IV</option>
  129. <option>III</option>
  130. <option>II</option>
  131. <option>I</option>
  132. <option>KG/Prep</option>
  133. <option>Nursery</option>
  134. </td>
  135. <td style="vertical-align: top;"><select name="app_siblinggender3">
  136. <option>select one</option>
  137. <option>Male</option>
  138. <option>Female</option>
  139. <option>Mx</option>
  140. </td>
  141. <td style="vertical-align: top;"><input name="app_siblingschlname3">
  142. </td>
  143. </tr>
  144. <tr>
  145. <td style="vertical-align: top;">4
  146. </td>
  147. <td style="vertical-align: top;"><input name="app_siblingname4">
  148. </td>
  149. <td style="vertical-align: top;"><input name="app_siblingdob4">
  150. </td>
  151. <td style="vertical-align: top;"><select name="app_siblingclass4">
  152. <option>select one</option>
  153. <option>XII</option>
  154. <option>XI</option>
  155. <option>X</option>
  156. <option>IX</option>
  157. <option>VIII</option>
  158. <option>VII</option>
  159. <option>VI</option>
  160. <option>V</option>
  161. <option>IV</option>
  162. <option>III</option>
  163. <option>II</option>
  164. <option>I</option>
  165. <option>KG/Prep</option>
  166. <option>Nursery</option>
  167. </td>
  168. <td style="vertical-align: top;"><select name="app_siblinggender4">
  169. <option>select one</option>
  170. <option>Male</option>
  171. <option>Female</option>
  172. <option>Mx</option>
  173. </td>
  174. <td style="vertical-align: top;"><input name="app_siblingschlname4">
  175. </td>
  176. </tr>
  177. <tr>
  178. <td style="vertical-align: top;">5
  179. </td>
  180. <td style="vertical-align: top;"><input name="app_siblingname5">
  181. </td>
  182. <td style="vertical-align: top;"><input name="app_siblingdob5">
  183. </td>
  184. <td style="vertical-align: top;"><select name="app_siblingclass5">
  185. <option>select one</option>
  186. <option>XII</option>
  187. <option>XI</option>
  188. <option>X</option>
  189. <option>IX</option>
  190. <option>VIII</option>
  191. <option>VII</option>
  192. <option>VI</option>
  193. <option>V</option>
  194. <option>IV</option>
  195. <option>III</option>
  196. <option>II</option>
  197. <option>I</option>
  198. <option>KG/Prep</option>
  199. <option>Nursery</option>
  200. </td>
  201. <td style="vertical-align: top;"><select name="app_siblinggender5">
  202. <option>select one</option>
  203. <option>Male</option>
  204. <option>Female</option>
  205. <option>Mx</option>
  206. </td>
  207. <td style="vertical-align: top;"><input name="app_siblingschlname5">
  208. </td>
  209. </tr>
  210. <tr>
  211. <td style="vertical-align: top;">6
  212. </td>
  213. <td style="vertical-align: top;"><input name="app_siblingname6">
  214. </td>
  215. <td style="vertical-align: top;"><input name="app_siblingdob6">
  216. </td>
  217. <td style="vertical-align: top;"><select name="app_siblingclass6">
  218. <option>select one</option>
  219. <option>XII</option>
  220. <option>XI</option>
  221. <option>X</option>
  222. <option>IX</option>
  223. <option>VIII</option>
  224. <option>VII</option>
  225. <option>VI</option>
  226. <option>V</option>
  227. <option>IV</option>
  228. <option>III</option>
  229. <option>II</option>
  230. <option>I</option>
  231. <option>KG/Prep</option>
  232. <option>Nursery</option>
  233. </td>
  234. <td style="vertical-align: top;"><select name="app_siblinggender6">
  235. <option>select one</option>
  236. <option>Male</option>
  237. <option>Female</option>
  238. <option>Mx</option>
  239. </td>
  240. <td style="vertical-align: top;"><input name="app_siblingschlname6">
  241. </td>
  242. </tr>
  243. </tbody>
  244. </table>
But this is working standalone
Aug 29 '16 #13

Dormilich
Expert Mod 5K+
P: 8,639
Expand|Select|Wrap|Line Numbers
  1. var val = $( "select" ).val();
this will always refer to the first <select>. not the one that triggered the event.

for that you would use
Expand|Select|Wrap|Line Numbers
  1. var val = this.value;
Aug 29 '16 #14

P: 11
thanks a million..it works perfectly....
Aug 29 '16 #15

gits
Expert Mod 5K+
P: 5,320
it's not i guess. as i said - the handling for the select is applied to all! select nodes in the page. I guess the tablerows should only react to the select-node in the 'Sibling Detail' section? now simply open that section and for example 'Collapsible Group 3' as well. use the select node in that section to chose Yes/No for example - and it will show all the tablerows. i doubt that this is the intention. you would need to check from which select node the event comes from - by an id or an attribute that identifies that - or simply only add the handler to that single select-node.
Aug 30 '16 #16

P: 11
Gits you are right.. I didnt actually notice that. Can you please help me in adding the handler as I am not that technical ? Thanks
Aug 30 '16 #17

gits
Expert Mod 5K+
P: 5,320
since i'm not going to write the code for copy and pasting i give you 2 hints that you could use to fix that issue:

1. you can give the select node that you want to handle an id or whatever other attribute (for example a name) that you can check additionally in the current handler code and only in case the events come from that node - handle the table rows. This would allow you to handle all the select's events in a central place. There are different possibilities to implement it like that.

2. given the fact that you would give the node a unique attribute you could even change the 'apply' mechanism by not selecting all nodes in the first place but only that one you really want. In this case you would have a handler for that specific node only and the other selects would need their own custom handlers applied as well if you ever want them to have one.

Both solutions would work - with the described basic ideas behind them. it would depend on how you think you will extend the code from there on, i cannot really say that one would be 'better' then the other while i don't know the further plans, that might imply that one implementation could have an advantage over the other.

when you show what you have tried then we might be able to help you further in case you would have problems with a specific solution.

best regards.
Aug 31 '16 #18

P: 11
Thanks gits. I have managed to get this working now. Thanks for your idea
Sep 1 '16 #19

Post your reply

Sign in to post your reply or Sign up for a free account.