Advertisement
MikeGTS

Untitled

May 10th, 2011
370
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 3.93 KB | None | 0 0
  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
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement