Streets to Creeks - Local Storage
HTML
<div style="padding:2em;">
<div class="step-one">
<strong>Checkboxes</strong><br><br>
As you get out and explore...<br>
<input name="binoculars" type="checkbox" id="binoculars" class="scavenger-item mr-3"/> Binoculars<br>
<input name="compass" type="checkbox" id="compass" class="scavenger-item mr-3"/> Compass<br>
<input name="water" type="checkbox" id="water" class="scavenger-item mr-3"/> Water
</div>
<br>
<strong>Text Fields</strong><br><br>
<input id="text" class="scavenger-item"/><br/><br/>
<br>
<strong>Images</strong><br><br>
<img width="100px" style="background:#0082CA;padding:1em" class="scavenger-item" id="image" src="//www.streetstocreeks.org/wp-content/themes/streetstocreeks/images/logo.svg"/>
<img width="100px" style="" class="scavenger-item" id="trash" src="https://cdn.printablesigns.net/samples/Trash.png"/>
<br><br>
<strong>Forms</strong>
<form method="post" enctype="multipart/form-data" id="gform_1" action="/contact-us/" _lpchecked="1">
<div class="gform_body">
<ul id="gform_fields_1" class="gform_fields top_label form_sublabel_below description_below">
<li id="field_1_2" class="gfield text field_sublabel_below field_description_below gfield_visibility_visible">
<label class="gfield_label" for="input_1_2">Email</label>
<div class="ginput_container ginput_container_email">
<input name="input_2" id="input_1_2" type="text" value="" class="large" aria-invalid="false">
</div>
</li>
<li id="field_1_5" class="gfield field_sublabel_below field_description_below gfield_visibility_visible">
<div class="ginput_container ginput_container_checkbox">
<ul class="gfield_checkbox" id="input_1_5">
<li class="gchoice_1_5_1">
<input name="input_5.1" type="checkbox" value="First Choice" id="choice_1_5_1">
<label for="choice_1_5_1" id="label_1_5_1">Binoculars</label>
</li>
<li class="gchoice_1_5_2">
<input name="input_5.2" type="checkbox" value="Second Choice" id="choice_1_5_2">
<label for="choice_1_5_2" id="label_1_5_2">Compass</label>
</li><li class="gchoice_1_5_3">
<input name="input_5.3" type="checkbox" value="Third Choice" id="choice_1_5_3">
<label for="choice_1_5_3" id="label_1_5_3">Water</label>
</li>
</ul>
</div>
</li>
<img width="100px" style="background:#0082CA;padding:1em" class="scavenger-item" id="image" src="//www.streetstocreeks.org/wp-content/themes/streetstocreeks/images/logo.svg"/>
<img width="100px" style="" class="scavenger-item" id="trash" src="https://cdn.printablesigns.net/samples/Trash.png"/>
</ul>
</div>
<div class="gform_footer top_label"> <input type="submit" id="gform_submit_button_1" class="gform_button button" value="Submit" onclick="if(window["gf_submitting_1"]){return false;} window["gf_submitting_1"]=true; " onkeypress="if( event.keyCode == 13 ){ if(window["gf_submitting_1"]){return false;} window["gf_submitting_1"]=true; jQuery("#gform_1").trigger("submit",[true]); }">
</div>
</form>
</div>
CSS
img.selected {
outline: 2px solid red;
outline-offset: -2px;
}
JAVASCRIPT
// Action Items
$(document).on("click change", ".scavenger-item", function () {
console.log(this);
if( $(this).is(":checkbox") ){
// Checkboxes
console.log('box');
if(this.checked){
console.log('true');
localStorage.setItem(this.id, this.checked);
} else {
localStorage.setItem(this.id, '');
}
} else if( $(this).is('img') ) {
// Images
console.log('Image');
$(this).toggleClass('selected');
if( $(this).hasClass('selected') ) {
localStorage.setItem(this.id, 'true');
} else {
localStorage.setItem(this.id, '');
}
} else {
// Text Fields
localStorage.setItem(this.id, this.value);
}
});
// Load Items
$('.scavenger-item').each( function(){
$(this).val(function() {
status = localStorage.getItem(this.id);
if( status == "true" ){
if( $(this).is(":checkbox") ){
$(this).prop('checked', true);
} else if( $(this).is('img') ) {
$(this).addClass('selected')
}
console.log(this.id + ' ' + status);
} else {
}
return localStorage.getItem(this.id)
});
});
