Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<form class="ws-validate" id="requestform" method="post" action="mailto:sample@example.edu" 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="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" />
<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>
  <script src="https://code.jquery.com/jquery-3.1.0.js"></script>
​
 
function subCheck() {
    var checked = $('#sub-check').prop('checked');
    if (checked) {
        $('#submitter').fadeIn('slow');
    } else {
        $('#submitter').fadeOut('slow');
    }
    $('#sub-name').prop('disabled', !checked);
    $('#sub-jhed').prop('disabled', !checked);
    $('#sub-email').prop('disabled', !checked);
}
​
​
$(document).ready(function() {
    function init() {
        subCheck();
        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"]);
        }
    }
  
    $('#sub-check').change(subCheck);
    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);
});
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
andrea.crawfordpro
0viewers