Reveal/enable/hide fields with when retrieving checkbox state from localstorage

Question

Working with localstorage have a solution implemented for my site. However, despite checkboxes remaining checked on page refresh their accompanying functions like revealing or enabling an input field do not occur.

How can I make it so that hidden sections remain revealed appropriately and disabled fields are enabled when accompanying checkbox remains clicked on page refresh?

Here's a mockup of what I'm working with in jsfiddle: https://jsfiddle.net/bpmnruhg/

JS:

$(document).ready(function(){
    $('#sub-check').change(function(){
        if(!this.checked)
    $('#submitter').fadeOut('slow');
        else
    $('#submitter').fadeIn('slow');
    });
});


$(document).ready(function () {
          function init() {
              if (localStorage["pi-name"]) {
                 $('#pi-name').val(localStorage["pi-name"]);
              }
              if (localStorage["pi-jhed"]) {
                 $('#pi-jhed').val(localStorage["pi-jhed"]);
              }
              if (localStorage["pi-email"]) {
                 $('#pi-email').val(localStorage["pi-email"]);
              }
              if (localStorage["sub-name"]) {
                  $('#sub-name').val(localStorage["sub-name"]);
              }
              if (localStorage["sub-jhed"]) {
                 $('#sub-jhed').val(localStorage["sub-jhed"]);
              }
              if (localStorage["sub-email"]) {
                 $('#sub-email').val(localStorage["sub-email"]);
              }
           }
             init();
           });
                     $('.stored').keyup(function () {
               localStorage[$(this).attr('name')] = $(this).val();
           });


    var checkboxValues = JSON.parse(localStorage.getItem('checkboxValues')) || {},
        $checkboxes = $("input:checkbox");

    $checkboxes.on("change", function(){
        $checkboxes.each(function(){
            checkboxValues[this.id] = this.checked;
    });

    localStorage.setItem("checkboxValues", JSON.stringify(checkboxValues));
    });

// On page load
    $.each(checkboxValues, function(key, value) {
        $("#" + key).prop('checked', value);
    });

HTML: Name:

  <label for="pi-jhed">JHED ID: </label>
  <input class="stored" name="pi-jhed" id="pi-jhed" type="text" required />

  <label for="pi-email">Email: </label>
  <input class="stored" name="pi-email" id="pi-email" placeholder="you@example.com" type="email" required /> 

  <label for="sub-check" style="display:inline">Is the person making the submission different from the PI? </label>
  <input type="checkbox" class="stored" name="sub-check" id="sub-check" onchange="document.getElementById('sub-name').disabled = !this.checked; document.getElementById('sub-jhed').disabled = !this.checked; document.getElementById('sub-email').disabled = !this.checked;" />
<br />
<div class='hidden' id="submitter">
  Submitter:
  <label for="sub-name">Name: </label>
  <input class="stored" name="sub-name" id="sub-name" placeholder="Last Name, First Name" type="text" required disabled />

  <label for="sub-jhed">JHED ID: </label>
  <input class="stored" name="sub-jhed" id="sub-jhed" type="text" required disabled />

  <label for="sub-email">Email: </label>
  <input class="stored" name="sub-email" id="sub-email" placeholder="you@example.com" type="email" required disabled />
</div>

CSS:

.hidden {
  display:none;
}

score 0 · Answer 1 · answered Jul 14 '17 at 18:20

0

Fire the onchange event and it will do everything it does during a normal change event.

$.each(checkboxValues, function(key, value) {
    $("#" + key).prop('checked', value);
    document.getElementById(key).onchange();
});

answered Jul 14 '17 at 18:20

SimplyComplexable

1,116
11
19

Thanks for the help. I really do appreciate it! I tried adding your lines to my jsfiddle: https://jsfiddle.net/bpmnruhg/2/ However, it didn't produce any noticeable change. Perhaps I'm missing something? – Neph Jul 14 '17 at 18:47

Ken Verhaegen · Answer 2 · 2017-07-14T20:56:14.297

0

To trigger the event, with jQuery, you can chain the change() method.

$("#" + key).prop('checked', value).change();

Actually, you could be better off showing and hiding stuff in a form, in this use-case, with pure CSS, but that's just a suggestion:

.certain-checkbox:checked { .. }

You can still check if the value of that checkbox was set to see if you need to take action on the sub-form-group ( submitter fields ).

Note: do not use attributes like required, and validated types like email inside the sub-form-group. This could end up in an error when the browser tries to validate the form on submit when those fields are hidden.

edited Jul 14 '17 at 20:56

answered Jul 14 '17 at 20:47

Ken Verhaegen

148
8

[https://stackoverflow.com/questions/18752134/reveal-and-hide-a-div-on-checkbox-condition-with-css](https://stackoverflow.com/questions/18752134/reveal-and-hide-a-div-on-checkbox-condition-with-css) could resolve how you'd do the CSS type of things. – Ken Verhaegen Jul 14 '17 at 20:48
I see that your script relies on it, resetting the form values. CSS might be simplifying it, but not fixing the problem. Although I changed and tested your fiddle, and that seemed to work on refreshing the preview. – Ken Verhaegen Jul 14 '17 at 20:58
Awesome! Thanks a ton! I will let you know as soon as I've had a chance to try this out. – Neph Jul 18 '17 at 11:07

Reveal/enable/hide fields with when retrieving checkbox state from localstorage

2 Answers2