Sample2

sample2

by nephandys

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form class="ws-validate" id="requestform" method="post" action="mailto:[email protected]" enctype="text/plain">
  <label for="pi-name">Name: </label>
  <input class="stored" name="pi-name" id="pi-name" placeholder="Last Name First Name" type="text" required />
  
  <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="[email protected]" 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="[email protected]" type="email" required disabled />
</div>

CSS

.hidden {
  display:none;
}

JavaScript

$(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);
	});