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

Untitled

By: MikeGTS on May 10th, 2011  |  syntax: HTML  |  size: 3.93 KB  |  hits: 309  |  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. copyright
  2.  
  3. http://www.onextrapixel.com/2009/10/13/how-to-display-form-fields-based-on-selection-with-or-without-jquery-cookie/
  4.  
  5. //control.js:
  6. -------------
  7.  
  8. /*With jQuery Cookie*/
  9. $(document).ready(function(){
  10.         $("#parent2").css("display","none");
  11.            
  12.  
  13. $("select").change(function () {
  14. if ($('select option:selected').val() == "No" ) {
  15. $("#parent2").slideDown("fast"); //Slide Down Effect
  16. $.cookie('showTop', 'expanded');
  17. } else {
  18. $("#parent2").slideUp("fast");  //Slide Up Effect
  19. $.cookie('showTop', 'collapsed');
  20. }
  21. });  
  22.  
  23.  
  24.      
  25.       var showTop = $.cookie('showTop');  
  26.      
  27.       if (showTop == 'expanded') {
  28.                
  29.         $("#parent2").show("fast");  
  30.         $('select option:selected');  
  31.  
  32.       } else {
  33.         $("#parent2").hide("fast");
  34.         $('select option:selected');
  35.       }  
  36.          
  37. });
  38.  
  39. //end control.js
  40.  
  41. //example Form.html
  42.  
  43. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  44. <title>Displaying Extra Fields With jQuery And Enhanced With jQuery Cookies - Onextrapixel</title>
  45. <style type="text/css">
  46. * {
  47.         border:none;
  48.         margin:0;
  49.         padding:0;
  50. }
  51.  
  52. body {
  53.         background:#fff;
  54.         color: #000;
  55.         font:12.35px "Lucida Grande", Georgia, Arial, Verdana, sans-serif;
  56. }
  57.  
  58. a:link {
  59.         color:#0054a6;
  60.         text-decoration:none;
  61. }
  62.  
  63. p {
  64.         margin:10px 0;
  65. }
  66.  
  67. h1 {
  68.         font-size:20px;
  69.         margin-bottom:20px;
  70. }
  71.  
  72. h2 {
  73.         font-size:14px;
  74.         margin-bottom:15px;
  75. }
  76.  
  77. #wrap {
  78.         margin:10px auto;
  79.         width:900px;
  80. }
  81.  
  82. #header {
  83.         margin-bottom:20px;
  84. }
  85.  
  86. select {
  87.         border: 1px solid #B6C3C3;
  88.         background:#FDF8ED;
  89.        
  90. }
  91.  
  92. input {
  93.         border: 1px solid #B6C3C3;
  94.         background:#FDF8ED;
  95.         padding:2px;
  96. }
  97.  
  98. fieldset {
  99.         margin-bottom:40px;
  100. }
  101.  
  102. legend {
  103.         font-size:15px;
  104.         font-weight:bold;
  105. }
  106.  
  107. .formset {
  108.         margin:25px 0;
  109. }
  110.  
  111. .formset li {
  112.         list-style:none;
  113.         margin-bottom: 10px;
  114. }
  115.  
  116. .formset li label {
  117.         float:left;
  118.         width:150px;
  119. }
  120.  
  121. .submitbtn {
  122.         background:#f9f0d6;
  123.         border:3px solid #c7b093;
  124.         padding:3px;
  125.         text-transform:uppercase;
  126.         color:#2d1904;
  127.         -moz-border-radius:4px;
  128.         -webkit-border-radius:4px;
  129.         cursor:pointer;
  130. }
  131. </style>
  132. <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
  133. <script type="text/javascript" src="js/jquery.cookie.js"></script>
  134. <script type="text/javascript" src="js/control.js"></script>
  135. </head>
  136.  
  137. <body>
  138. <div id="wrap">
  139. <div id="header">
  140. <h1>Displaying Extra Fields With jQuery And Enhanced With jQuery Cookies</h1>
  141. <a href="http://www.onextrapixel.com/2009/10/13/how-to-display-form-fields-based-on-selection-with-or-without-jquery-cookie/">Back to tutorial</a>
  142. </div>
  143.        
  144. <fieldset>
  145. <h2>Example 2: Display Fields Base On Selected Radio Button <span style="color:red;">WITH</span> jQuery Cookie</h2>
  146. <p>With jQuery Cookie, if you refresh the page or there is an error message the last action will be retrieved from the cookie.</p>
  147.                        
  148. <ol class="formset">
  149.  
  150. <li><label for="fname2">First Name: </label>
  151. <input type="text" id="fname2" value="" name="fname2"/></li>
  152.  
  153. <li><label for="lname2">Last Name: </label>
  154. <input type="text" id="lname2" value="" name="lname2"/></li>
  155.  
  156. <li><label for="email2">Email Address: </label>
  157. <input type="text" id="email2" value="" name="email2" /></li>
  158.  
  159. <li><label for="age2">Are you OK ?</label>
  160. <select name="select" id="select" class="select">
  161. <option value="Yes">Yes</option>
  162. <option value="No">No</option>
  163. </select>
  164.  
  165. </li></ol>
  166.                        
  167. <ol id="parent2" class="formset">
  168. <li><strong>Parent/Guardian Information:</strong></li>
  169. <li><label for="pname2">Parent Name: </label>
  170. <input type="text" id="pname2" value="" name="pname2"/></li>
  171.  
  172. <li><label for="contact2">Contact No.: </label>
  173. <input type="text" id="contact2" value="" name="contact2"/></li>
  174. </ol>
  175. <input type="submit" name="submit" value="Submit" class="submitbtn" />
  176. </fieldset>
  177. </div>
  178.                
  179. </body>
  180. </html>
  181.  
  182. //End example form.html
create a new version of this paste RAW Paste Data