title: Get data from form and write to cookie with jQuery
body: <p>bit of a jQuery noob but learning quickly thanks to StackOverflow.</p>
  
  <p>Can anyone give me code that will get data from a form and write it out to a cookie (not a session cookie) using jQuery. I am loading the jQuery cookie plugin from here:</p>
  
  <p><a href="https://github.com/carhartl/jquery-cookie" rel="nofollow">https://github.com/carhartl/jquery-cookie</a></p>
  
  <p>I'd also like to know if I have to load my code when the DOM is ready as previously with php I loaded cookies first thing. Can't get my head round the DOM yet.</p>
  
  <h1>Thanks in advance.</h1>
  
  <p>OK here is the current code, thanks to reply below. I can't get the cookie working though but the alert works fine when uncommented:</p>
  
  <pre><code>           &lt;form id="myform"&gt;
                &lt;fieldset&gt;
                  &lt;h3&gt;Search&lt;/h3&gt;
                  &lt;p&gt;
                    &lt;label&gt;Your search *&lt;/label&gt;
                    &lt;input type="text" id="mysearch" pattern="[a-zA-Z ]{5,}" maxlength="30" /&gt;
                  &lt;/p&gt;
                  &lt;fieldset&gt;
                      &lt;input type="range" id="range" min="1" max="30" value="10"  /&gt;
                      &lt;input type="range" id="range2" min="30" max="9000" value="2000"  /&gt;
                   &lt;/fieldset&gt;
  
                  &lt;button id="subbtn" type="submit"&gt;Submit form&lt;/button&gt;
                  &lt;button type="reset"&gt;Reset&lt;/button&gt;
                &lt;/fieldset&gt;
              &lt;/form&gt;
  
  
          $(function() {
          // initialize tooltip
          $(".imgwrap").tooltip({ 
          //$(".tooltip").tooltip({ effect: 'slide'});
             // tweak the position
             offset: [10, 2],
  
             // use the "slide" effect
             effect: 'slide'
  
          // add dynamic plugin with optional configuration for bottom edge
          }).dynamic({ bottom: { direction: 'down', bounce: true } });
          });
  
          //this one loads the form validator
          $("#myform").validator();
  
          //this one for the slider
          $(":range").rangeinput();
  
      $("#subbtn").on("click", function () {
      // alert("Cookie!");
          $.cookie('Searchitem', $("#mysearch").val(), { expires: 365 });
      });
  </code></pre>
  
  <p>Any ideas why my cookie is not setting? Browser is set to accept and I'm debugging with Firebug.</p>