Hi guys im working on codeigniter project and on ane of my form i am using localstorage to store selected values and display after page load. But somehow its not working for all my fields. Sometimes first value get works sometimes last value works. I have total 4 fields and all values should be stored in localstorage.
Html part:
<div class="control-group">
<label class="control-label">Select Month</label>
<div class="controls">
<select id="month" name="month">
<option value="">--Select Option--</option>
<option value="1">January</option>
<option value="2">February</option>
<option value="3">March</option>
<option value="4">April</option>
<option value="5">May</option>
<option value="6">June</option>
<option value="7">July</option>
<option value="8">August</option>
<option value="9">September</option>
<option value="10">October</option>
<option value="11">November</option>
<option value="12">December</option>
</select>
</div>
</div>
<div class="control-group">
<label class="control-label">Select Year</label>
<div class="controls">
<select id="year" name="year">
<option value="">--Select Option--</option>
<option>2017</option>
<option>2016</option>
<option>2015</option>
<option>2014</option>
<option>2013</option>
<option>2012</option>
<option>2011</option>
</select>
</div>
</div>
<div class="control-group">
<label class="control-label">Select Employee</label>
<div class="controls">
<select id="employee" name="employee_name">
<option value="">--Select Option--</option>
<?php
foreach ($salary as $row) {?>
<option value='<?php echo $row->EMPLOYEE_ID;?>'><?php echo $row->EMPLOYEE_NAME;}?></option>
</select>
</div>
</div>
<div class="control-group">
<label class="control-label">Select Country</label>
<div class="controls">
<select id="country" name="org_id">
<option value="">--Select Option--</option>
<option value="40">UK</option>
<option value="41">INDIA</option>
<option value="47">POLAND</option>
<option value="57">GERMANY</option>
</select>
</div>
</div>
Till now only first field that is months is working.On form load only its selected value is stored in localstorage. Rest of all shows blank space in dropdown. Javascript code:
<script type="text/javascript">
var editingArea = document.getElementById("month");
var editingArea1 = document.getElementById("year");
var editingArea2 = document.getElementById("employee");
var editingArea3 = document.getElementById("country");
var KEY = "storageKey";
var text = localStorage.getItem(KEY);
if(text !== null){
editingArea.value = text;
}
var KEY = "storageKey";
var text1 = localStorage.getItem(KEY);
if(text1 !== null){
editingArea1.value = text1;
}
var KEY = "storageKey";
var text2 = localStorage.getItem(KEY);
if(text2 !== null){
editingArea2value = text2;
}
var KEY = "storageKey";
var text3 = localStorage.getItem(KEY);
if(text3 !== null){
editingArea3.value = text3;
}
// whenever the textarea is updated, store the contents also into the storage
editingArea.addEventListener("click", function(event){
localStorage.setItem(KEY,editingArea.value);
},false);
editingArea1.addEventListener("click", function(event){
localStorage.setItem(KEY,editingArea1.value);
},false);
editingArea2.addEventListener("click", function(event){
localStorage.setItem(KEY,editingArea2.value);
},false);
editingArea3.addEventListener("click", function(event){
localStorage.setItem(KEY,editingArea3.value);
},false);
var resetButton = document.getElementById("reset");
resetButton.addEventListener("click", function(event){
localStorage.setItem(KEY,"");
editingArea.value = "";
editingArea1.value = "";
editingArea2.value = "";
editingArea3.value = "";
},false);
</script>
You are using same var KEY = "storageKey";
for all the fields. Use different keys
for individual fields.