從窗體獲取數據並使用jQuery將數據寫入cookie

Question

位的jQuery noob，但由於使用了StackOverflow而快速學習。

任何人都可以給我代碼，將從表單中獲取數據，並使用jQuery將它寫出到cookie（不是會話cookie）。我從這裏裝載的jQuery插件的cookie：

https://github.com/carhartl/jquery-cookie

我也想知道如果我有我的加載代碼時，DOM就緒，如前面PHP我裝餅乾的第一件事。無法讓我的頭繞DOM。

在此先感謝。

確定這裏是當前的代碼，感謝以下回復。我不能讓cookie工作，但警告在未註釋時工作正常：

  <form id="myform"> 
       <fieldset> 
       <h3>Search</h3> 
       <p> 
        <label>Your search *</label> 
        <input type="text" id="mysearch" pattern="[a-zA-Z ]{5,}" maxlength="30" /> 
       </p> 
       <fieldset> 
        <input type="range" id="range" min="1" max="30" value="10" /> 
        <input type="range" id="range2" min="30" max="9000" value="2000" /> 
       </fieldset> 

       <button id="subbtn" type="submit">Submit form</button> 
       <button type="reset">Reset</button> 
       </fieldset> 
      </form> 


     $(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 }); 
    }); 

任何想法爲什麼我的cookie沒有設置？瀏覽器設置爲接受，我正在用Firebug進行調試。

Answer 1

一個持久的cookie是一樣的會話cookie除了它有一個到期日期，所以它掛起。

這將文字輸入的值寫入，在365天后過期餅乾：

<input id="txt" type="text" value="foo" /> 
    <input id="btn" type="button" value="write cookie" /> 

...

$(document).ready(function() { 
     $("#btn").on("click", function() { 
      $.cookie('myCookie', $("#txt").val(), { expires: 365 }); 
     }); 
    }); 

編輯

每更新的新代碼問題：

$(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 }); 
     }); 

    }); 

Answer 2

我從您的標記中假設您要使用GET提交表單。您可以使用描述爲here的方法來提取URL字符串值。

然後，它只是一個值設置爲cookie的事：

$.cookie('mycookie', getParameterByName('varname'), {expires: 100}); 

您可以檢查cookie的值，像這樣：

console.log($.cookie('mycookie'));