失敗したフォームにJQuery CSS設定を保存する

Question

私は作成しましたが、ドロップダウンを使用して3つの隠しフォームのうちの1つをJQuery経由で表示しています。

最初の問題は、フォームが無効な場合（フィールドが見つからない、メールが悪いなど）、フォームがドロップダウンからフォームを再度選択するまで表示されなくなるようにページをリセットします。

2番目はフォームがプラグインなので、私はサブミット操作に直接アクセスすることはできません。プラグインのファイルに入ると、近いうちに更新によって上書きされる可能性があります。

HTML：

<div class="ginput_container ginput_container_select"> 
<select id="app_pick" class="medium gfield_select"> 
    <option value="">Choose Here</option> 
    <option value="Greek_Dance">Greek Dance</option> 
    <option value="Greek_School">Greek School</option> 
    <option value="Youth_Group">Youth Group</option> 
</select></div> 

のjQuery：デフォルトではなし：

jQuery(document).ready(function($){ 

     $('#gform_wrapper_3').hide(); 


    $('#app_pick').on('change', function() { 
    if (this.value == ''){ 
    $('.f1').css('display', 'none'); 
    $('.f2').css('display', 'none'); 
     $('.f3').css('display', 'none'); 
    } 
    else if (this.value == 'Greek_Dance'){ 
    $('.f1').css('display', 'block'); 
    $('.f2').css('display', 'none'); 
     $('.f3').css('display', 'none'); 
    } 
    else if (this.value == 'Greek_School'){ 
    $('.f1').css('display', 'none'); 
    $('.f2').css('display', 'block'); 
     $('.f3').css('display', 'none'); 
    } 
else if (this.value == 'Youth_Group'){ 
    $('.f1').css('display', 'none'); 
    $('.f2').css('display', 'none'); 
     $('.f3').css('display', 'block'); 
    } 
else { 
    $('.f1').css('display', 'none'); 
    $('.f2').css('display', 'none'); 
     $('.f3').css('display', 'none'); 
    } 

}); 

    }); 

F1、F2、F3は、表示されたそれぞれの形態です。

私の目標は、ドロップダウンで選択したフォームを表示することです。提出が行われた後

Answer 1

私は少しif-else構造を取り除くためにあなたのソリューションをリファクタリング：

var form = localStorage.getItem('showForm'); 
if (form) { 
    $('.' + form).show(); 
    $('#app_pick').val(localStorage.getItem('option')) 
} 

$('#app_pick').on('change', function() { 
    var showForm; 

    $('.f1, .f2, .f3').hide(); 

    switch (this.value) { 
    case 'Greek_Dance': 
     $('.f1').show(); 
     showForm = 'f1'; 
     break; 
    case 'Greek_School': 
     $('.f2').show(); 
     showForm = 'f2'; 
     break; 
    case 'Youth_Group': 
     $('.f3').show(); 
     showForm = 'f3'; 
     break; 
    } 
    localStorage.setItem('showForm', showForm); 
    localStorage.setItem('option', this.value); 
}); 

私はここでやっていることと、ページをリロードそれを使用するlocalStorageに選択した値とそれに付随するフォームを保存しています。

---

Example