473,387 Members | 1,691 Online
Bytes | Software Development & Data Engineering Community
Post Job

Home Posts Topics Members FAQ

home > topics > javascript > questions > accordian not working properly with jquery table

Join Bytes to post your question to a community of 473,387 software developers and data experts.

Accordian not working properly with jquery table

I have jquery table nested within Accordian but it doesnt seems to be working. Even the submit buttons are not displaying outside the accordian panel. I have tried looking into tabs view but issue still remain same. Looks like the conflict with jquery. Please help me in resolving this.Below is the code I am using.

`
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/2.1.1/jquery.min.js"></script>
  7.       <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
  8.  
  9. <!--This is Javascript to disable the address fields if user doesn't tick the checkbox-->
  10.         <script type="text/javascript">
  11.         $(document).ready(function(){
  12.             $('#sccb').click(function(){
  13.                 if (this.checked) {
  14.                     $('#cns').removeAttr("disabled");
  15.                     $('#cns2').removeAttr("disabled");
  16.                     $('#cns3').removeAttr("disabled");
  17.                     $('#cns4').removeAttr("disabled");
  18.                     $('#cns5').removeAttr("disabled");
  19.                     $('#cns6').removeAttr("disabled");
  20.                     $('#cns7').removeAttr("disabled");
  21.                 } else {
  22.                     $("#cns").attr("disabled", true);
  23.                     $("#cns2").attr("disabled", true);
  24.                     $("#cns3").attr("disabled", true);
  25.                     $('#cns4').attr("disabled", true);
  26.                     $('#cns5').attr("disabled", true);
  27.                     $('#cns6').attr("disabled", true);
  28.                     $('#cns7').attr("disabled", true);
  29.                 }
  30.             });
  31.         });
  32.         </script>
  33.         <script type="text/javascript">
  34.         $(document).ready(function(){
  35.             $('#sccb1').click(function(){
  36.                 if (this.checked) {
  37.                     $('#cns8').removeAttr("disabled");
  38.                     $('#cns9').removeAttr("disabled");
  39.                     $('#cns10').removeAttr("disabled");
  40.                     $('#cns11').removeAttr("disabled");
  41.                     $('#cns12').removeAttr("disabled");
  42.                     $('#cns13').removeAttr("disabled");
  43.                     $('#cns14').removeAttr("disabled");
  44.  
  45.                 } else {
  46.                     $("#cns8").attr("disabled", true);
  47.                     $("#cns9").attr("disabled", true);
  48.                     $("#cns10").attr("disabled", true);
  49.                     $("#cns11").attr("disabled", true);
  50.                     $("#cns12").attr("disabled", true);
  51.                     $("#cns13").attr("disabled", true);
  52.                     $("#cns14").attr("disabled", true);
  53.                 }
  54.             });
  55.         });
  56.         </script>
  57.         <script type="text/javascript">
  58.         $(document).ready(function(){
  59.             $('#sccb2').click(function(){
  60.                 if (this.checked) {
  61.                     $('#cns15').removeAttr("disabled");
  62.                     $('#cns16').removeAttr("disabled");
  63.                     $('#cns17').removeAttr("disabled");
  64.                     $('#cns18').removeAttr("disabled");
  65.                     $('#cns19').removeAttr("disabled");
  66.                     $('#cns20').removeAttr("disabled");
  67.                     $('#cns21').removeAttr("disabled");
  68.  
  69.                 } else {
  70.                     $("#cns15").attr("disabled", true);
  71.                     $("#cns16").attr("disabled", true);
  72.                     $("#cns17").attr("disabled", true);
  73.                     $("#cns18").attr("disabled", true);
  74.                     $("#cns19").attr("disabled", true);
  75.                     $("#cns20").attr("disabled", true);
  76.                     $("#cns21").attr("disabled", true);
  77.                 }
  78.             });
  79.         });
  80.         </script>
  81.         <script>
  82.  
  83.         jQuery(function($){
  84.         $( document ).ready(function() {
  85.             $( "select" ).change(function () {
  86.                 var val = this.value;
  87.                 if (val != 'select one') {
  88.                     var tableRows = $("table tr");
  89.                     jQuery.each(tableRows, function(i ,tr) {
  90.                         if (i > val) {
  91.                             $(tr).hide();
  92.                         } else {
  93.                             $(tr).show();
  94.                         }
  95.                     })
  96.                 }
  97.               }
  98.             )
  99.         });
  100.         });
  101.  
  102.         </script>
  103.         <style>
  104.         button.accordion {
  105.             background-color: #33CCFF;
  106.             color: #444;
  107.             cursor: pointer;
  108.             margin: 15px;
  109.             padding: 14px;
  110.             width: 1250px;
  111.             border: 2px;
  112.             text-align: left;
  113.             font-family: Comic Sans MS;
  114.             text-decoration: underline;
  115.             font-weight: bold;
  116.             outline: none;
  117.             font-size: 15px;
  118.             transition: 0.4s;
  119.             border:1px solid #ccc;
  120.             border-radius:5px;
  121.         }
  122.  
  123.         button.accordion.active, button.accordion:hover {
  124.             background-color: #ddd;
  125.         }
  126.  
  127.         button.accordion:after {
  128.             content: '\02795';
  129.             font-size: 14px;
  130.             color: #777;
  131.             float: right;
  132.             margin-left: 5px;
  133.         }
  134.  
  135.         button.accordion.active:after {
  136.             content: "\2796";
  137.         }
  138.  
  139.         div.panel {
  140.             padding: 0 25px;
  141.             background-color: white;
  142.             max-height: 0;
  143.             overflow: hidden;
  144.             transition: 0.6s ease-in-out;
  145.             opacity: 0;
  146.         }
  147.  
  148.         div.panel.show {
  149.             opacity: 1;
  150.             max-height: 1500px;
  151.         }
  152.  
  153.         tbody tr {
  154.         display: none;
  155.         }
  156.         </style>
  157.     </head>
  158.         <body>
  159.         <button class="accordion"><big>Guardian's Details</big></button>
  160.         <div id="foo" class="panel">
  161.           <fieldset>
  162.         <fieldset style="width: 1220px;">
  163.         <legend style="font-weight: bold; font-family: Comic Sans MS;text-decoration: underline;">Personal Details</legend>
  164.         <div style="width: 1230px;" class="form-group"> 
  165.         <big><label for="stugtitle">Title<span style="color: red;">*</span></label></big>
  166.         &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 
  167.         <select name="stugtitle" class="input" required>
  168.         <option value="">--select--</option>
  169.         <option value="Mr">Mr</option>
  170.         <option value="Mrs">Mrs</option>
  171.         <option value="Mrs">Mrs</option>
  172.         <option value="Ms">Ms</option>
  173.         <option value="Miss">Miss</option>
  174.         <option value="Dr">Dr</option>
  175.         </select>
  176.         &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
  177.         <big><label for="stugfname">Firstname<span style="color: red;">*</span></label></big>
  178.         &nbsp;&nbsp;&nbsp;
  179.         <input size="15" name="stugfname" class="input" required>
  180.         &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
  181.         <big><label for="stugmname">Middlename</label></big>
  182.         &nbsp;&nbsp;&nbsp;
  183.         <input size="15" class="input" name="stugmname">
  184.         &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
  185.         <big><label for="stugsname">Surname<span style="color: red;">*</span></label></big>
  186.         &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
  187.         <input size="15" class="input" name="stugsname" required>
  188.         </div>
  189.         <br>
  190.         <big><label for="stuggender">Gender<span style="color: red;">*</span></label></big>
  191.         &nbsp;
  192.         <select name="stuggender" class="input" required>
  193.         <option value="">--select--</option>
  194.         <option value="M">Male</option>
  195.         <option value="F">Female</option>
  196.         <option value="Mx">Mx</option>
  197.         </select>
  198.         &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
  199.         <big><label for="stugdob">Birthdate<span style="color: red;">*</span></label></big>
  200.         &nbsp;&nbsp;&nbsp;&nbsp; 
  201.         <input size="15" name="stugdob" class="input" type="date" required>
  202.         &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
  203.         <big><label for="stugmobile">Mobile<span style="color: red;">*</span></label></big>
  204.         &nbsp; &nbsp; &nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
  205.         <input size="15" class="input" name="stugmobile" required>
  206.         &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
  207.         <big><label for="stugemail">Email<span style="color: red;">*</span></label></big>
  208.         &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
  209.         <input size="19" class="input" name="stugemail" type="email" required>
  210.         </fieldset>
  211.         <br><br>
  212.         <fieldset>
  213.         <fieldset style="width: 1220px;">
  214.         <legend style="font-weight: bold; font-family: Comic Sans MS; text-decoration: underline;">Address Details</legend>
  215.         <div style="width: 1230px;" class="form-group">
  216.         <big><big><big><label for="stugaddress">Adress not same as applicant's address<span style="color: red;">*</span></label></big></big></big>
  217.         &nbsp;&nbsp;
  218.         <input type="checkbox" id="sccb2" name="stugaddress" value="stugaddress">
  219.         (<span style="color: red; font-family: Comic Sans MS;"><span style="color: rgb(51, 51, 51);"></span><style="font-weight: bold;">Please tick the box to enter the details</span>)<br>
  220.               <br>
  221.               <big><label for="stugadd1">Address Line 1</label></big>
  222.         &nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 
  223.         <input type="text" class="input" id="cns15" name="stugadd1" disabled="disabled"/>
  224.         &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;   
  225.         <big><label for="stugadd2">Address Line 2</label></big>
  226.         &nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 
  227.         <input type="text" class="input" id="cns16" name="stugadd2" disabled="disabled"/>
  228.         &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;   
  229.         <big><label for="stugadd3">Address Line 3</label></big>
  230.         &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
  231.         <input type="text" class="input" id="cns17" name="stugadd3" disabled="disabled" size="18"/>
  232.         <br>
  233.         <br>
  234.         <big><label for="stugcity">City</label></big>
  235.         &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
  236.         <input size="15" class="input" type="text" id="cns18" name="stugcity" disabled="disabled"/>
  237.         &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
  238.         <big><label for="stugstate">State</label></big>
  239.         &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
  240.         <input size="15" class="input" type="text" id="cns19" name="stugstate" disabled="disabled"/>
  241.         &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
  242.         <big><label for="stugcountry">Country</label></big>
  243.         &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
  244.         <input size="15" class="input" type="text" id="cns20" name="stugcountry" disabled="disabled"/>
  245.         &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
  246.         <big><label for="stugpincode">Pincode</label></big>
  247.         &nbsp; &nbsp;&nbsp;&nbsp;&nbsp; 
  248.         <input size="10" class="input" type="text" id="cns21" name="stugpincode" disabled="disabled"/> </div>
  249.         </fieldset>
  250.         <br style="font-family: Comic Sans MS;">
  251.         </div>
  252.  
  253.         <button class="accordion"><big>Sibling's Details</big></button>
  254.         <div id="foo" class="panel">
  255.         <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>
  256.         &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
  257.         <select name="app_siblingno" class="input" required>
  258.         <option value = "">--select one--</option>
  259.         <option value = "0">0</option>
  260.         <option value = "1">1</option>
  261.         <option value = "2">2</option>
  262.         <option value = "3">3</option>
  263.         <option value = "4">4</option>
  264.         <option value = "5">5</option>
  265.         <option value = "6">6</option>
  266.         </select>
  267.         <br>
  268.         <br>
  269.         <div>
  270.         <table style="text-align: centre; width: 500px;" border="0"
  271.         cellpadding="0" cellspacing="0">
  272.         <tbody>
  273.         <tr>
  274.         <td colspan="6" rowspan="1" style="vertical-align: top;">
  275.         </td>
  276.         </tr>
  277.         <tr>
  278.         <td style="vertical-align: top;"><span style="font-family: Comic Sans MS; font-weight: bold;">S.No    1</span>
  279.         </td>
  280.         <td style="vertical-align: top;"><span style="font-family: Comic Sans MS; font-weight: bold;">&nbsp;&nbsp;&nbsp;&nbsp;Name</span>&nbsp;<input name="app_siblingname1" class="input">
  281.         </td>
  282.         <td style="vertical-align: top;"><span style="font-family: Comic Sans MS; font-weight: bold;">&nbsp;&nbsp;&nbsp;&nbsp;Birthdate</span>&nbsp;<input name="app_siblingdob1" class="input" type="date">
  283.         </td>
  284.         <td style="vertical-align: top;"><span style="font-family: Comic Sans MS; font-weight: bold;">&nbsp;&nbsp;&nbsp;&nbsp;Class</span>&nbsp;
  285.         <select name="app_siblingclass1" class="input">
  286.         <option value = "">--select one--</option>
  287.         <option value = "12">XII</option>
  288.         <option value = "11">XI</option>
  289.         <option value = "10">X</option>
  290.         <option value = "9">IX</option>
  291.         <option value = "8">VIII</option>
  292.         <option value = "7">VII</option>
  293.         <option value = "6">VI</option>
  294.         <option value = "5">V</option>
  295.         <option value = "4">IV</option>
  296.         <option value = "3">III</option>
  297.         <option value = "2">II</option>
  298.         <option value = "1">I</option>
  299.         <option value = "KG">KG/Prep</option>
  300.         <option value = "Nur">Nursery</option>
  301.         </td>
  302.         <td style="vertical-align: top;"><span style="font-family: Comic Sans MS; font-weight: bold;">&nbsp;&nbsp;&nbsp;&nbsp;Gender</span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
  303.         <select name="app_siblinggender1" class="input">
  304.         <option value = "">--select one--</option>
  305.         <option value = "M">Male</option>
  306.         <option value = "F">Female</option>
  307.         <option value = "Mx">Mx</option>
  308.         </td>
  309.         <td style="vertical-align: top;"><span style="font-family: Comic Sans MS; font-weight: bold;">&nbsp;&nbsp;&nbsp;&nbsp;School Name</span>&nbsp;<input name="app_schlname1" class="input">
  310.         </td>
  311.         </tr>
  312.         <tr>
  313.         <td style="vertical-align: top;"><span style="font-family: Comic Sans MS; font-weight: bold;">2</span>
  314.         </td>
  315.         <td style="vertical-align: top;"><span style="font-family: Comic Sans MS; font-weight: bold;"><input name="app_siblingname2" class="input"></span>
  316.         </td>
  317.         <td style="vertical-align: top;"><span style="font-family: Comic Sans MS; font-weight: bold;"><input name="app_siblingdob2" class="input" type="date"></span>
  318.         </td>
  319.         <td style="vertical-align: top;"><span style="font-family: Comic Sans MS; font-weight: bold;"><select name="app_siblingclass2" class="input"></span>
  320.         <option value = "">--select one--</option>
  321.         <option value = "12">XII</option>
  322.         <option value = "11">XI</option>
  323.         <option value = "10">X</option>
  324.         <option value = "9">IX</option>
  325.         <option value = "8">VIII</option>
  326.         <option value = "7">VII</option>
  327.         <option value = "6">VI</option>
  328.         <option value = "5">V</option>
  329.         <option value = "4">IV</option>
  330.         <option value = "3">III</option>
  331.         <option value = "2">II</option>
  332.         <option value = "1">I</option>
  333.         <option value = "KG">KG/Prep</option>
  334.         <option value = "Nur">Nursery</option>
  335.         </td>
  336.         <td style="vertical-align: top;"><span style="font-family: Comic Sans MS; font-weight: bold;"><select name="app_siblinggender2" class="input"></span>
  337.         <option value = "">--select one--</option>
  338.         <option value = "M">Male</option>
  339.         <option value = "F">Female</option>
  340.         <option value = "Mx">Mx</option>
  341.         </td>
  342.         <td style="vertical-align: top;"><span style="font-family: Comic Sans MS; font-weight: bold;"><input name="app_siblingschlname2" class="input"></span>
  343.         </td>
  344.         </tr>
  345.         <tr>
  346.         <td style="vertical-align: top;"><span style="font-family: Comic Sans MS; font-weight: bold;">3</span>
  347.         </td>
  348.         <td style="vertical-align: top;"><span style="font-family: Comic Sans MS;"><input name="app_siblingname3" class="input"></span>
  349.         </td>
  350.         <td style="vertical-align: top;"><span style="font-family: Comic Sans MS;"><input name="app_siblingdob3" class="input" type="date"></span>
  351.         </td>
  352.         <td style="vertical-align: top;"><span style="font-family: Comic Sans MS;"><select name="app_siblingclass3" class="input"></span>
  353.         <option value = "">--select one--</option>
  354.         <option value = "12">XII</option>
  355.         <option value = "11">XI</option>
  356.         <option value = "10">X</option>
  357.         <option value = "9">IX</option>
  358.         <option value = "8">VIII</option>
  359.         <option value = "7">VII</option>
  360.         <option value = "6">VI</option>
  361.         <option value = "5">V</option>
  362.         <option value = "4">IV</option>
  363.         <option value = "3">III</option>
  364.         <option value = "2">II</option>
  365.         <option value = "1">I</option>
  366.         <option value = "KG">KG/Prep</option>
  367.         <option value = "Nur">Nursery</option>
  368.         </td>
  369.         <td style="vertical-align: top;"><span style="font-family: Comic Sans MS;"><select name="app_siblinggender3" class="input"></span>
  370.         <option value = "">--select one--</option>
  371.         <option value = "M">Male</option>
  372.         <option value = "F">Female</option>
  373.         <option value = "Mx">Mx</option>
  374.         </td>
  375.         <td style="vertical-align: top;"><span style="font-family: Comic Sans MS;"><input name="app_siblingschlname3" class="input"></span>
  376.         </td>
  377.         </tr>
  378.         <tr>
  379.         <td style="vertical-align: top;"><span style="font-family: Comic Sans MS; font-weight: bold;">4</span>
  380.         </td>
  381.         <td style="vertical-align: top;"><span style="font-family: Comic Sans MS;"><input name="app_siblingname4" class="input"></span>
  382.         </td>
  383.         <td style="vertical-align: top;"><span style="font-family: Comic Sans MS;"><input name="app_siblingdob4" class="input" type="date"></span>
  384.         </td>
  385.         <td style="vertical-align: top;"><span style="font-family: Comic Sans MS;"><select name="app_siblingclass4" class="input"></span>
  386.         <option value = "">--select one--</option>
  387.         <option value = "12">XII</option>
  388.         <option value = "11">XI</option>
  389.         <option value = "10">X</option>
  390.         <option value = "9">IX</option>
  391.         <option value = "8">VIII</option>
  392.         <option value = "7">VII</option>
  393.         <option value = "6">VI</option>
  394.         <option value = "5">V</option>
  395.         <option value = "4">IV</option>
  396.         <option value = "3">III</option>
  397.         <option value = "2">II</option>
  398.         <option value = "1">I</option>
  399.         <option value = "KG">KG/Prep</option>
  400.         <option value = "Nur">Nursery</option>
  401.         </td>
  402.         <td style="vertical-align: top;"><span style="font-family: Comic Sans MS;"><select name="app_siblinggender4" class="input"></span>
  403.         <option value = "">--select one--</option>
  404.         <option value = "M">Male</option>
  405.         <option value = "F">Female</option>
  406.         <option value = "Mx">Mx</option>
  407.         </td>
  408.         <td style="vertical-align: top;"><span style="font-family: Comic Sans MS;"><input name="app_siblingschlname4" class="input"></span>
  409.         </td>
  410.         </tr>
  411.         <tr>
  412.         <td style="vertical-align: top;"><span style="font-family: Comic Sans MS; font-weight: bold;">5</span>
  413.         </td>
  414.         <td style="vertical-align: top;"><span style="font-family: Comic Sans MS;"><input name="app_siblingname5" class="input"></span>
  415.         </td>
  416.         <td style="vertical-align: top;"><span style="font-family: Comic Sans MS;"><input name="app_siblingdob5" class="input" type="date"></span>
  417.         </td>
  418.         <td style="vertical-align: top;"><span style="font-family: Comic Sans MS;"><select name="app_siblingclass5" class="input"></span>
  419.         <option value = "">--select one--</option>
  420.         <option value = "12">XII</option>
  421.         <option value = "11">XI</option>
  422.         <option value = "10">X</option>
  423.         <option value = "9">IX</option>
  424.         <option value = "8">VIII</option>
  425.         <option value = "7">VII</option>
  426.         <option value = "6">VI</option>
  427.         <option value = "5">V</option>
  428.         <option value = "4">IV</option>
  429.         <option value = "3">III</option>
  430.         <option value = "2">II</option>
  431.         <option value = "1">I</option>
  432.         <option value = "KG">KG/Prep</option>
  433.         <option value = "Nur">Nursery</option>
  434.         </td>
  435.         <td style="vertical-align: top;"><span style="font-family: Comic Sans MS;"><select name="app_siblinggender5" class="input"></span>
  436.         <option value = "">--select one--</option>
  437.         <option value = "M">Male</option>
  438.         <option value = "F">Female</option>
  439.         <option value = "Mx">Mx</option>
  440.         </td>
  441.         <td style="vertical-align: top;"><span style="font-family: Comic Sans MS;"><input name="app_siblingschlname5" class="input"></span>
  442.         </td>
  443.         </tr>
  444.         <tr>
  445.         <td style="vertical-align: top;"><span style="font-family: Comic Sans MS; font-weight: bold;">6</span>
  446.         </td>
  447.         <td style="vertical-align: top;"><span style="font-family: Comic Sans MS;"><input name="app_siblingname6" class="input"></span>
  448.         </td>
  449.         <td style="vertical-align: top;"><span style="font-family: Comic Sans MS;"><input name="app_siblingdob6" class="input" type="date"></span>
  450.         </td>
  451.         <td style="vertical-align: top;"><span style="font-family: Comic Sans MS;"><select name="app_siblingclass6" class="input"></span>
  452.         <option value = "">--select one--</option>
  453.         <option value = "12">XII</option>
  454.         <option value = "11">XI</option>
  455.         <option value = "10">X</option>
  456.         <option value = "9">IX</option>
  457.         <option value = "8">VIII</option>
  458.         <option value = "7">VII</option>
  459.         <option value = "6">VI</option>
  460.         <option value = "5">V</option>
  461.         <option value = "4">IV</option>
  462.         <option value = "3">III</option>
  463.         <option value = "2">II</option>
  464.         <option value = "1">I</option>
  465.         <option value = "KG">KG/Prep</option>
  466.         <option value = "Nur">Nursery</option>
  467.         </td>
  468.         <td style="vertical-align: top;"><span style="font-family: Comic Sans MS;"><select name="app_siblinggender6" class="input"></span>
  469.         <option value = "">--select one--</option>
  470.         <option value = "M">Male</option>
  471.         <option value = "F">Female</option>
  472.         <option value = "Mx">Mx</option>
  473.         </td>
  474.         <td style="vertical-align: top;"><span style="font-family: Comic Sans MS;"><input name="app_siblingschlname6" class="input"></span>
  475.         </td>
  476.         </tr>
  477.         </tbody>
  478.         </div>
  479.         </div>
  480.         <button class="accordion"><big>Document Upload</big></button>
  481.         <div id="foo" class="panel">
  482.         <h1>upload document here<h1>
  483.     <script>
  484.     var acc = document.getElementsByClassName("accordion");
  485.     var i;
  486.  
  487.     for (i = 0; i < acc.length; i++) {
  488.         acc[i].onclick = function(){
  489.         this.classList.toggle("active");
  490.         this.nextElementSibling.classList.toggle("show");
  491.          }
  492.     }
  493.     </script>
  494.         &nbsp;&nbsp; <input id="app_submit1" class="button1" name="app_submit1" value="&lt;&lt;Back" type="submit"> <input class="button1" name="app_submit2" value="Save" type="submit"> <input class="button1" name="app_submit3" value="Submit" type="submit"> <input class="button1" name="app_cancel2" value="Cancel" type="reset"><br>
  495.         </body>
  496. </html>
Sep 1 '16 #1
0 1090

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

Similar topics

8
Conversion code not working properly
by: weasel | last post by:
Why is the Farenheit to Celsius part not working properly? Instead of showing a similar range of what the farenheit is listing, the celsius portion is showing half the range of farenheit. print...
Python
1
Reading BLOB field into Image Web Control - Not working properly
by: Roberto Castro | last post by:
I have some problems with the way I am showing the BLOB fields in the Image web controls. It does work on my localhost though sometimes I need to hit Refresh for the images to load properly....
C# / C Sharp
5
Isdate() not working properly
by: Nita Raju | last post by:
Hi, I have to validate a textbox for date without using the validation controls. So i had to use IsDate(). It's not working properly when i give "11//2004". When i enter the above date it...
ASP.NET
2
<embed> tag not working properly on linux
by: Annu | last post by:
Hi I need help on <enbed> tag. Following code(No 1) is working properly on windows but on linux code no.2 is not working Code No 1: <EMBED type='application/x-mplayer2' ...
HTML / CSS
12
kamill
logout script not working properly.
by: kamill | last post by:
I have done a logout page for logout from admin section and provides a link to logout from admin section.Whenever i clicked on logout link it redirected to index.php of admin section......BUT when i...
PHP
5
$_SESSION['loggedin'] not working properly
by: damezumari | last post by:
When a user logs in to my site http://iwantyourquestion.com I set $_SESSION to true if his username and password are OK. When he calls a page I check if $_SESSION is true. If it not I ask him to...
PHP
3
javascript code is working properly in IE. But its not working in firefox
by: rajasree | last post by:
Hi all, am doing a project in PHP. my javascript code is working properly in ie. But its not working in firefox. Please help me my code is as follows; <script language="javascript"...
Javascript
4
Pop up not working properly in safari.
by: zairali | last post by:
Hi, I am trying to fix a webpage ( http://www.d.umn.edu/itss/labs/maps/ ) which uses some html (or xml also?) to show pop ups when you rollover the numbers on a map of the building. They work fine...
HTML / CSS
1
Loop (if statement) is not working properly when the condition is true
by: robin1983 | last post by:
Dear All, I got stuck in simple problem, I have a two php file one for registration form and one for to check and insert into the table. The problem is that when I get any kind error in...
PHP
3
Jquery table sorter causing slow script
by: sarahaziz | last post by:
Hello guys i have a problem i wish i could find a solution i created this instant chat system works fine i created this seTimeout to retrieve data when the messages exceeded an extent slow script...
Javascript
0
Easy Steps to Fix "Canon Printer Won't Connect to WiFi Network"
by: taylorcarr | last post by:
A Canon printer is a smart device known for being advanced, efficient, and reliable. It is designed for home, office, and hybrid workspace use and can also be used for a variety of purposes. However,...
General
0
How to turn on java script in a villaon keypad mobile phone
by: Charles Arthur | last post by:
How do i turn on java script on a villaon, callus and itel keypad mobile phone
Java
0
Batch import of multiple excel files into the database
by: ryjfgjl | last post by:
If we have dozens or hundreds of excel to import into the database, if we use the excel import function provided by database editors such as navicat, it will be extremely tedious and time-consuming...
Data Management
0
Migrating Website to Cloud - Emmanuel Katto
by: emmanuelkatto | last post by:
Hi All, I am Emmanuel katto from Uganda. I want to ask what challenges you've faced while migrating a website to cloud. Please let me know. Thanks! Emmanuel
General
0
BarryA
Navigating the Data Structures and Algorithms (DSA)
by: BarryA | last post by:
What are the essential steps and strategies outlined in the Data Structures and Algorithms (DSA) roadmap for aspiring data scientists? How can individuals effectively utilize this roadmap to progress...
Algorithms / Advanced Math
1
Is that possible of reading the .csv file in column wise and the column have different lengths ?
by: Sonnysonu | last post by:
This is the data of csv file 1 2 3 1 2 3 1 2 3 1 2 3 2 3 2 3 3 the lengths should be different i have to store the data by column-wise with in the specific length. suppose the i have to...
C / C++
0
How to build RAID in BIOS?
by: Hystou | last post by:
There are some requirements for setting up RAID: 1. The motherboard and BIOS support RAID configuration. 2. The motherboard has 2 or more available SATA protocol SSD/HDD slots (including MSATA, M.2...
Computer Hardware
0
Changing the language in Windows 10
by: Hystou | last post by:
Most computers default to English, but sometimes we require a different language, especially when relocating. Forgot to request a specific language before your computer shipped? No problem! You can...
Windows Server
0
Oralloy
Problem With Comparison Operator <=> in G++
by: Oralloy | last post by:
Hello folks, I am unable to find appropriate documentation on the type promotion of bit-fields when using the generalised comparison operator "<=>". The problem is that using the GNU compilers,...
C / C++

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.

BYTES.COM © 2024
About Bytes
Terms Of Use
Privacy Policy
Sitemap
Advertise on Bytes:
Post a Job
Sponsored Posts
Platinum & Gold Sponsors
Hire Now!