сохранить поля формы после обновления страницы

Question

У меня есть форма с 3 скрыть поля. При нажатии кнопки

<div class="buttons"> 
    <button id="but-1">1</button> 
    <button id="but-2">2</button> 
    <button id="but-3">3</button> 
    <button id="but-4">4</button> 
</div> 

некоторые поля скрыть Некоторые показывают

моя форма

<div class="form"> 
    <div class="pass-1 form_pass">  
    <p><span>Pass1:</span><input id="catalogs_pass_1" name="catalogs[pass_1]" type="text" /></p> 
    </div> 
    <div class="pass-2 form_pass" style="display: none;"> 
    <p><span>Pass2:</span><input id="catalogs_pass_2" name="catalogs[pass_2]" type="text" /></p> 
    </div> 
    <div class="pass-3 form_pass" style="display:none;"> 
    <p><span>Pass3:</span><input id="catalogs_pass_3" name="catalogs[pass_3]" type="text" /></p> 
    </div> 
    <div class="pass-4 form_pass" style="display:none;"> 
    <p><span>Pass4:</span><input id="catalogs_pass_4" name="catalogs[pass_4]" type="text" /></p> 
    </div> 
    <div class="form_pass"> 
    <p><span>Phone:</span><input id="catalogs_phone" name="catalogs[phone]" type="text" /></p> 
    <p><span>Email:</span><input id="catalogs_email" name="catalogs[email]" type="text" /></p> 
    <p><input class="submit-rez" id="catalogs_submit" name="commit" type="submit" value="submit" /><p> 
    </div> 

Все отлично работает, но когда пользователи не проходят проверку на то, что в области обновления страницы и все отображаемые поля исчезают. Как сохранить все отображаемые поля?

http://jsfiddle.net/dVFaV/98/

Я использовал печенье плагин и создать, кроме полей только для одной кнопки. Как создать сохранение cookie для других трех кнопок?

Спасибо за консультацию!

Answer 1

Попробуйте

$(document).ready(function() { 
    $('#but-1').click(function() { 
     $('.pass-1').fadeIn(300); 
     $('.pass-2').fadeOut(100); 
     $('.pass-3').fadeOut(100); 
     $('.pass-4').fadeOut(100); 
     $.cookie('content1', 1); 
    }); 

    $("#but-2").click(function() { 
     $(".pass-2").show(); 
     $(".pass-3").hide(); 
     $(".pass-4").hide(); 
     $.cookie('content1', 2) 
    }); 
    $("#but-3").click(function() { 
     $(".pass-2").show(); 
     $(".pass-3").show(); 
     $(".pass-4").hide(); 
     $.cookie('content1', 3) 
    }); 
    $("#but-4").click(function() { 
     $(".pass-2").show(); 
     $(".pass-3").show(); 
     $(".pass-4").show(); 
     $.cookie('content1', 4) 
    }); 

    if ($.cookie('content1')) { 
     var pass = parseInt($.cookie('content1')); 
     for(var i = 1; i <= pass; i++) { 
      var str = "pass-"+i; 
      $("."+str).show(); 
     } 
    }; 
}); 

Fiddle

Примечание: Я также chnaged в jquery.cookies URL. Не загружайте из github. Это даст вам простой текстовый файл.