Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- copyright
- http://www.onextrapixel.com/2009/10/13/how-to-display-form-fields-based-on-selection-with-or-without-jquery-cookie/
- //control.js:
- -------------
- /*With jQuery Cookie*/
- $(document).ready(function(){
- $("#parent2").css("display","none");
- $("select").change(function () {
- if ($('select option:selected').val() == "No" ) {
- $("#parent2").slideDown("fast"); //Slide Down Effect
- $.cookie('showTop', 'expanded');
- } else {
- $("#parent2").slideUp("fast"); //Slide Up Effect
- $.cookie('showTop', 'collapsed');
- }
- });
- var showTop = $.cookie('showTop');
- if (showTop == 'expanded') {
- $("#parent2").show("fast");
- $('select option:selected');
- } else {
- $("#parent2").hide("fast");
- $('select option:selected');
- }
- });
- //end control.js
- //example Form.html
- <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
- <title>Displaying Extra Fields With jQuery And Enhanced With jQuery Cookies - Onextrapixel</title>
- <style type="text/css">
- * {
- border:none;
- margin:0;
- padding:0;
- }
- body {
- background:#fff;
- color: #000;
- font:12.35px "Lucida Grande", Georgia, Arial, Verdana, sans-serif;
- }
- a:link {
- color:#0054a6;
- text-decoration:none;
- }
- p {
- margin:10px 0;
- }
- h1 {
- font-size:20px;
- margin-bottom:20px;
- }
- h2 {
- font-size:14px;
- margin-bottom:15px;
- }
- #wrap {
- margin:10px auto;
- width:900px;
- }
- #header {
- margin-bottom:20px;
- }
- select {
- border: 1px solid #B6C3C3;
- background:#FDF8ED;
- }
- input {
- border: 1px solid #B6C3C3;
- background:#FDF8ED;
- padding:2px;
- }
- fieldset {
- margin-bottom:40px;
- }
- legend {
- font-size:15px;
- font-weight:bold;
- }
- .formset {
- margin:25px 0;
- }
- .formset li {
- list-style:none;
- margin-bottom: 10px;
- }
- .formset li label {
- float:left;
- width:150px;
- }
- .submitbtn {
- background:#f9f0d6;
- border:3px solid #c7b093;
- padding:3px;
- text-transform:uppercase;
- color:#2d1904;
- -moz-border-radius:4px;
- -webkit-border-radius:4px;
- cursor:pointer;
- }
- </style>
- <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
- <script type="text/javascript" src="js/jquery.cookie.js"></script>
- <script type="text/javascript" src="js/control.js"></script>
- </head>
- <body>
- <div id="wrap">
- <div id="header">
- <h1>Displaying Extra Fields With jQuery And Enhanced With jQuery Cookies</h1>
- <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>
- </div>
- <fieldset>
- <h2>Example 2: Display Fields Base On Selected Radio Button <span style="color:red;">WITH</span> jQuery Cookie</h2>
- <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>
- <ol class="formset">
- <li><label for="fname2">First Name: </label>
- <input type="text" id="fname2" value="" name="fname2"/></li>
- <li><label for="lname2">Last Name: </label>
- <input type="text" id="lname2" value="" name="lname2"/></li>
- <li><label for="email2">Email Address: </label>
- <input type="text" id="email2" value="" name="email2" /></li>
- <li><label for="age2">Are you OK ?</label>
- <select name="select" id="select" class="select">
- <option value="Yes">Yes</option>
- <option value="No">No</option>
- </select>
- </li></ol>
- <ol id="parent2" class="formset">
- <li><strong>Parent/Guardian Information:</strong></li>
- <li><label for="pname2">Parent Name: </label>
- <input type="text" id="pname2" value="" name="pname2"/></li>
- <li><label for="contact2">Contact No.: </label>
- <input type="text" id="contact2" value="" name="contact2"/></li>
- </ol>
- <input type="submit" name="submit" value="Submit" class="submitbtn" />
- </fieldset>
- </div>
- </body>
- </html>
- //End example form.html
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement