Don't like ads? PRO users don't see any ads ;-)
Public Pastes
Guest

Untitled

By: a guest on Jul 29th, 2012  |  syntax: None  |  size: 7.28 KB  |  hits: 10  |  expires: Never
download  |  raw  |  embed  |  report abuse  |  print
Text below is selected. Please press Ctrl+C to copy to your clipboard. (⌘+C on Mac)
  1. jquery - Hiding/showing fieldset not consistent
  2. <form method="post" action="">
  3.     <div id="holdMsg"></div>
  4.     <fieldset id="mainSection" name="mainSection">
  5.                 <legend style="color:blue; font-weight:bold">Project Overview Section</legend>
  6.  
  7.                 <table style="width: 100%">
  8.                     <tr>
  9.                         <td style="height: 33px; width: 178px;">Name</td>
  10.                         <td style="height: 33px"><input  id="1125" name="1125" type="text" /></td>
  11.                     </tr>
  12.                     <tr>
  13.                         <td style="height: 33px; width: 178px;">Email</td>
  14.                         <td style="height: 33px"><input  id="1026" name="1026" type="text" /></td>
  15.                     </tr>
  16.                     <tr>
  17.                         <td style="width: 178px">Product Title</td>
  18.                         <td><input  id="1089" name="1089" type="text" /></td>
  19.                     </tr>
  20.                     <tr>
  21.                         <td style="width: 178px">Product Type</td>
  22.                         <td><select id="1169" name="1169">
  23.                         <option value="">Select</option>
  24.                         <option value="Cars">Cars</option>
  25.                         <option value="Boats">Boats</option>
  26.                         <option value="Planes">Planes</option>
  27.                         </select></td>
  28.                     </tr>
  29.                                     </table>
  30.             </fieldset>
  31.  
  32.             <fieldset id="section-11" name="section-11">
  33.                 <legend style="color:fuchsia; font-weight:bold">Car Details Section</legend>
  34.  
  35.                 <table cellpadding="2" style="width: 100%">
  36.                     <tr>
  37.                         <td style="width: 334px; height: 35px"><label>Size:</label></td>
  38.                         <td style="height: 35px"><input id="1245" name="1245" type="text" /></td>
  39.                     </tr>
  40.                     <tr>
  41.                         <td style="height: 35px; width: 334px">Color:</td>
  42.                         <td style="height: 35px">
  43.                         <select id="1433" name="1433">
  44.                 <option value="Orange">Orange</option>
  45.                         <option value="Blank">Blank</option>
  46.                         <option value="Green">Green</option>
  47.             </select></td>
  48.                     </tr>
  49.                     <tr>
  50.                         <td style="width: 334px">Description:</td>
  51.                         <td>
  52.                         <textarea id="1290" name="1290" rows="2" style="width: 433px"></textarea></td>
  53.                     </tr>
  54.                 </table>
  55.                             </fieldset>
  56.  
  57.             <fieldset id="section-12" name="section-12">
  58.                 <legend style="color:fuchsia; font-weight:bold">Plane Details Section</legend>
  59.  
  60.                 <table cellpadding="2" style="width: 100%">
  61.                     <tr>
  62.                         <td style="width: 334px; height: 35px"><label>Size:</label></td>
  63.                         <td style="height: 35px"><input id="1245" name="1245" type="text" /></td>
  64.                     </tr>
  65.                     <tr>
  66.                         <td style="height: 35px; width: 334px">Color:</td>
  67.                         <td style="height: 35px">
  68.                         <select id="1433" name="1433">
  69.                 <option value="Orange">Orange</option>
  70.                         <option value="Blank">Blank</option>
  71.                         <option value="Green">Green</option>
  72.             </select></td>
  73.                     </tr>
  74.                     <tr>
  75.                         <td style="width: 334px">Description:</td>
  76.                         <td>
  77.                         <textarea id="1290" name="1290" rows="2" style="width: 433px"></textarea></td>
  78.                     </tr>
  79.                 </table>
  80.                             </fieldset>
  81.             <fieldset id="section-13" name="section-13">
  82.                 <legend style="color:fuchsia; font-weight:bold">Boat Details Section</legend>
  83.  
  84.                 <table cellpadding="2" style="width: 100%">
  85.                     <tr>
  86.                         <td style="width: 334px; height: 35px"><label>Size:</label></td>
  87.                         <td style="height: 35px"><input id="1245" name="1245" type="text" /></td>
  88.                     </tr>
  89.                     <tr>
  90.                         <td style="height: 35px; width: 334px">Color:</td>
  91.                         <td style="height: 35px">
  92.                         <select id="1433" name="1433">
  93.                 <option value="Orange">Orange</option>
  94.                         <option value="Blank">Blank</option>
  95.                         <option value="Green">Green</option>
  96.             </select></td>
  97.                     </tr>
  98.                     <tr>
  99.                         <td style="width: 334px">Description:</td>
  100.                         <td>
  101.                         <textarea id="1290" name="1290" rows="2" style="width: 433px"></textarea></td>
  102.                     </tr>
  103.                 </table>
  104.                             </fieldset><br>
  105. <fieldset id="section-1011" name="section-1011">
  106.                 <legend style="color:green; font-weight:bold">Misc Info Section</legend>
  107.  
  108.                 <table cellpadding="2" style="width: 100%">
  109.                     <tr>
  110.                         <td style="width: 334px; height: 35px"><label>Size:</label></td>
  111.                         <td style="height: 35px"><input id="1301" name="1301" type="text" /></td>
  112.                     </tr>
  113.                     <tr>
  114.                         <td style="height: 35px; width: 334px">Color:</td>
  115.                         <td style="height: 35px">
  116.                         <select id="1302" name="1302">
  117.                 <option value="Orange">Orange</option>
  118.                         <option value="Blank">Blank</option>
  119.                         <option value="Green">Green</option>
  120.             </select></td>
  121.                     </tr>
  122.                     <tr>
  123.                         <td style="width: 334px">Description:</td>
  124.                         <td>
  125.                         <textarea id="1303" name="1303" rows="2" style="width: 433px"></textarea></td>
  126.                     </tr>
  127.                 </table>
  128.                             </fieldset>
  129.  
  130.  
  131. </form>
  132.        
  133. $("#section-11").hide();
  134. $("#section-12").hide();
  135. $("#section-13").hide();
  136. $("#section-1011").hide();
  137.  
  138. var projtype = new Array(
  139.         {value : 'Cars', sect_id : 'fieldset#section-11'},
  140.         {value : 'Planes', sect_id : 'fieldset#section-12'},
  141.         {value : 'Boats', sect_id : 'fieldset#section-13'}
  142.     );
  143. $("select#1169").on('change',function () {
  144. var thisVal = $(this).val();
  145.  var sect_id ="";
  146.     $(projtype).each(function() {
  147. $(this.sect_id).hide();
  148.         if(this.value == thisVal) {
  149.         $(this.sect_id).show();
  150.         return false;
  151.         }
  152.     });        
  153. });
  154.        
  155. $("#section-11").hide();
  156. $("#section-12").hide();
  157. $("#section-13").hide();
  158. $("#section-1011").hide();
  159.  
  160. var projtype = new Array({
  161.     value: 'Cars',
  162.     sect_id: 'fieldset#section-11'
  163. }, {
  164.     value: 'Planes',
  165.     sect_id: 'fieldset#section-12'
  166. }, {
  167.     value: 'Boats',
  168.     sect_id: 'fieldset#section-13'
  169. });
  170. $("select#1169").on('change', function() {
  171.     var thisVal = $(this).val();
  172.     $('fieldset[id!="mainSection"]').hide();
  173.     var sect_id = "";
  174.     $(projtype).each(function() {
  175.         if (this.value == thisVal) {
  176.             $(this.sect_id).show();
  177.         }
  178.     });
  179. });
create a new version of this paste RAW Paste Data