title: Conditional form using jQuery and cookies
body: <p>I've got two different forms on my website: one for submitting a general inquiry and another one to order stuff. By clicking a radio button the user can choose the form he/she needs.</p>
  
  <p>I created the form in a content management system which checks if the textfield-data is entered correctly after submitting the form. If the system detects an error the page is reloaded and the form appears again displaying an error message.</p>
  
  <p>I would like to store the selection the user did to automatically show the correct form after the page has been reloaded. A tutorial on <a href="http://www.onextrapixel.com/2009/10/13/how-to-display-form-fields-based-on-selection-with-or-without-jquery-cookie/" rel="nofollow">Onextrapixel</a> explains something similar and I was trying to modify it according to my needs. The following code shows the script I am using. I tried to .hide() or .show() the specific content according to which radio button is clicked. Hiding the right content works without any problem if I disable the cookie stuff.</p>
  
  <pre><code>$(document).ready(function () {
      $("#parent2").css("display", "none");
      $("#parent3").css("display", "none");
  
      $(".aboveage2").click(function () {
          if ($('input[name=age2]:checked').val() == "anfrage") {
              $("#parent3").hide();
              $("#parent2").slideDown("fast");
              $.cookie('auswahl_radio', 'radio_allgemein');
          } else {
              $("#parent2").hide();
              $("#parent3").slideDown("fast");
              $.cookie('auswahl_radio', 'radio_rezept');
          }
      });
  
      var auswahl_radio = $.cookie('auswahl_radio');
  
      if (auswahl_radio == 'radio_allgemein') {
          $("#parent3").hide();
          $("#parent2").show();
          $('#opt_29_0').attr('checked', 'checked');
      } else {
          $("#parent2").hide();
          $("#parent3").show();
          $('#opt_29_1').attr('checked', 'checked');
      }
  });
  </code></pre>
  
  <p>The problem begins if I enable the Cookie plugin and I can't figure out what is wrong. Please bear with me, I am fairly new to jQuery.</p>
  
  <p>Here is the most important HTML source code:</p>
  
  <pre><code>    &lt;form action="kontakt.html" id="f3" method="post"&gt;
      &lt;div id="ctrl_29" class="radio_container aboveage2"&gt;
          &lt;input type="radio" name="age2" id="opt_29_0" class="radio" value="anfrage" /&gt;
          &lt;label id="lbl_29_0" for="opt_29_0"&gt;radio1&lt;/label&gt;
  
          &lt;input type="radio" name="age2" id="opt_29_1" class="radio" value="rezept" /&gt;
          &lt;label id="lbl_29_1" for="opt_29_1"&gt;radio2&lt;/label&gt;
      &lt;/div&gt;
  &lt;/form&gt;
  
  &lt;div id="parent2"&gt;
      &lt;form action="kontakt.html" id="f1" method="post"&gt;
          &lt;p&gt;Name:&lt;/p&gt; 
          &lt;input type="text" name="Name" id="ctrl_1" class="text mandatory" value="" /&gt;
          &lt;input type="submit" id="ctrl_99" class="submit" value="Absenden" /&gt; 
      &lt;/form&gt;
  &lt;/div&gt;
  
  &lt;div id="parent3"&gt;
      &lt;form action="kontakt.html" id="f5" method="post"&gt;
          &lt;p&gt;E-Mail:&lt;/p&gt; 
          &lt;input type="text" name="Email" id="ctrl_56" class="text mandatory" value="" /&gt;&lt;br /&gt;
          &lt;input type="submit" id="ctrl_63" class="submit" value="Absenden" /&gt;
      &lt;/form&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>I fould some similar questions here on Stack Overflow but I couldn't figure it out.</p>
  
  <p>Any ideas would be great, thanks!</p>