2017-12-01 25 views
0

チェックボックスの値が2つありますが、常に1つはfalseです。私はローカルストレージを作成し、どこにチェックボックスの値を格納しました。私はローカルストレージから自分のフォームに値を戻したい。誰か助けてもらえますか?チェックボックスの値をローカル記憶域からフォームに戻す

$(document).ready(function() { 
 
    InitalizeCache(GetKey()); 
 
}); 
 

 

 

 
function GetKey() { 
 
    var key = "local"; 
 
    return key; 
 
} 
 

 
function CacheSpikeData() { 
 
    var form = $("#application-form").serializeArray(); 
 
    CacheData(form, GetKey()); 
 
} 
 

 

 

 

 
function InitalizeCache(key) { 
 
    window.onload = function() { 
 
    RecoverFormFromLocalStorage(key); 
 
    } 
 
} 
 

 

 

 
function RecoverFormFromLocalStorage(key) { 
 
    if (localStorage.getItem(key) !== null) { 
 
    var recover = confirm("You have some unsaved changes. Do you want to continue from where you left? "); 
 
    if (recover == true) { 
 
     RecoverFormFromLocalStorage2(key); 
 
     return true; 
 
    } else { 
 
     clearLocalStorage(key); 
 
     return false; 
 
    } 
 
    } 
 
} 
 

 
function ShowSpikeData() { 
 
    alert(localStorage.getItem(GetKey())); 
 
} 
 

 
function LoadSpikeData() { 
 
    RecoverFormFromLocalStorage2(GetKey()); 
 
} 
 

 

 

 

 
function clearLocalStorage(key) { 
 
    localStorage.removeItem(key); 
 
} 
 

 

 
function CacheData(jsoNform, key) { 
 
    localStorage.setItem(key, JSON.stringify(jsoNform)); 
 
} 
 

 
function RecoverFormFromLocalStorage2(key) { 
 
    var cache = localStorage.getItem(key); 
 
    var record = JSON.parse(localStorage.getItem(key)); 
 

 

 
    if (cache !== null) { 
 
    $("#application-form *").filter(':input').each(function() { 
 
     if (this.type != "hidden") { 
 

 
     var cache = localStorage.getItem(key); 
 
     var record = JSON.parse(localStorage.getItem(key)); 
 
     var cacheValue = $(record).find("Name=MyStringValue"); 
 
     this.value = cacheValue; 
 
     alert(this.name + this.hidden); 
 
     } 
 
    }); 
 

 

 
    } 
 

 
}
<html><head> 
 
    <meta charset="utf-8"> 
 
    <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
 
    <title>View - NumberFormattingSample</title> 
 

 
    
 
     <link rel="stylesheet" href="/lib/bootstrap/dist/css/bootstrap.css"> 
 
     <link rel="stylesheet" href="/css/site.css"> 
 
    
 
    
 
    
 
</head> 
 
<body> 
 
    
 
    <div class="container body-content"> 
 
     
 
<h2>View</h2> 
 

 
<form id="application-form" action="/Test/EditCheckbox" method="post" novalidate="novalidate"> 
 
    <div class="form-horizontal"> 
 
     <h4>TestClass</h4> 
 
     <hr> 
 
    <div class="form-group"> 
 
     <label class="col-md-2 control-label" for="MyStringValue">MyStringValue</label>  
 
     <div class="col-md-10"> 
 
      
 
       <input id="MyStringValue" name="MyStringValue" value="" aria-invalid="false" class="valid" type="text">   
 
      
 
     </div> 
 
    </div> 
 
     <div class="form-group"> 
 
      <label class="col-md-2 control-label" for="MyValue4">MyValue4</label>  
 
      <div class="col-md-10"> 
 
      <div class="checkbox"> 
 
        <input data-val="true" data-val-required="The MyValue4 field is required." id="MyValue4" name="MyValue4" value="true" type="checkbox">   
 
      </div> 
 
     </div> 
 
     </div> 
 
     <div class="form-group"> 
 
      <label class="col-md-2 control-label" for="MyValue5">MyValue5</label> 
 
      
 
      <div class="col-md-10"> 
 
       <div class="checkbox"> 
 
        <input checked="checked" data-val="true" data-val-required="The MyValue5 field is required." id="MyValue5" name="MyValue5" value="true" type="checkbox">   
 
       </div> 
 
      </div> 
 
     </div> 
 
     
 
<select> 
 
    <option>Option</option> 
 
    <option>Option1</option> 
 
    </select> 
 
     <div class="form-group"> 
 
      <div class="col-md-offset-2 col-md-10"> 
 
       <input value="Cache" type=button class="btn btn-default valid" onclick="CacheSpikeData()" aria-invalid="false"> 
 
      </div> 
 
     </div> 
 
     <div class="form-group"> 
 
      <div class="col-md-offset-2 col-md-10"> 
 
       <input value="Show" type=button class="btn btn-default valid" onclick="ShowSpikeData()" aria-invalid="false"> 
 
      </div> 
 
     </div> 
 
     <div class="form-group"> 
 
      <div class="col-md-offset-2 col-md-10"> 
 
       <input value="Load" type=button class="btn btn-default valid" onclick="LoadSpikeData()" aria-invalid="false"> 
 
      </div> 
 
     </div> 
 
    
 
    </div> 
 
<input name="__RequestVerificationToken" value="CfDJ8PubzbxcXzVMruNKDy4pjvN4hXQ65h4QOkv7uDsWo6fZ2L-XoEq_2ECU5X_vbG2E-06P5vqKof167EUuW9eWazRso-6D-lG8e74rUHikoOhsA_BVeWl4vx3OeutanaJtjbzs8RIpp4WuS74wbuf-5E0" type="hidden"><input name="MyValue4" value="false" type="hidden"><input name="MyValue5" value="false" type="hidden"></form> 
 

 
<div> 
 
    <a href="/Test">Back to List</a> 
 
</div> 
 

 

 
     <hr> 
 
     <footer> 
 
      <p>© 2017 - NumberFormattingSample</p> 
 
     </footer> 
 
    </div> 
 

 
    
 
     <script src="/lib/jquery/dist/jquery.js"></script> 
 
     <script src="/lib/bootstrap/dist/js/bootstrap.js"></script> 
 
     <script src="/js/site.js?v=EWaMeWsJBYWmL2g_KkgXZQ5nPe-a3Ichp0LEgzXczKo"></script> 
 
    
 
    
 

 
    
 

 
    <script src="/lib/jquery-validation/dist/jquery.validate.js"></script> 
 
    <script src="/lib/jquery-validation-unobtrusive/jquery.validate.unobtrusive.js"></script> 
 

 

 
    <script src="/js/Caching.js"></script> 
 

 

 

 
</body></html>

私は単にチェックボックスの隠された値を削除せずに戻ってフォームに値を挿入しようとしているが、現在の値を拾っています。

enter image description here

+0

になるはずです。隠されたタイプの入力を見つけることができませんか? – woodykiddy

+0

"私は単純に、チェックボックスの隠し値を削除せずに値をフォームに挿入しようとしていますが、現在の値を取得しています。"私はこの部分を理解していません。あなたは隠しボックスが常に隠されていると言っています(なぜあなたはそれを最初に持っているのか疑問を抱いています)が、隠れた値を削除することと再投入するデータは何が関係していますか? – zfrisch

+0

隠された値を持つ画像を追加しました....コードではありませんが、チェックボックスのために表示されます – Tina

答えて

1

populateDataFromLocalStorageRecoverFormFromLocalStorage2の名前を変更し、populateDataFromLocalStorage

正しい関数名を呼び出すために更新 LoadSpikeData()この

function populateDataFromLocalStorage(key) { 
    var cache = localStorage.getItem(key); 

    if (cache !== null) { 
    var formJson = JSON.parse(cache); 
    $("#application-form *").filter(':input').each(function() { 
     var name = $(this).attr('name'); 

     var formRecord = formJson.find(function(record) { 
     return name === record.name; 
     }) || {}; 

     if (this.type === "text") { 
     $(this).val(formRecord.value); 
     } 

     if (this.type === "checkbox") { 
     $(this).prop('checked', formRecord.value === 'true'); 
     } 
    }); 
    } 
} 

に変更するには、この

function InitalizeCache(key) { 
    RecoverFormFromLocalStorage(key); 
} 

InitalizeCacheを変更してみてください

また、最後の入力はtype="button"

+0

ありがとうございました。それは働いた。 – Tina

関連する問題