26. Autosave - Other Field Types

Fill the form below.



Do you agree to our terms of service?

Pick your favorite super heros.

HTML

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
<p>Fill the form below.</p>
<form class="save-me" id="save-me" autocomplete="off">
  <label class="label" for="name">Name</label>
  <input data-type="input" class="input" type="text" name="name" id="name" autocomplete="off">
  <label class="label" for="address">Address</label>
  <input data-type="input" class="input" type="text" name="address" id="address">
  <label class="label" for="email">Email</label>
  <input data-type="input" class="input" type="email" name="email" id="email">
  <label for="hear-about-us">How did you hear about us?</label>
  <select data-type="input" class="select" name="hear-about-us" id="hear-about-us">
    <option value=""></option>
    <option value="google">Google</option>
    <option value="referral">Referred by a Friend</option>
    <option value="tv">A TV Ad</option>
    <option value="radio">A Radio Ad</option>
  </select>
  <br><br>
  <label class="label" for="more">Additional thoughts?</label>
  <textarea data-type="input" class="textarea" name="more" id="more"></textarea>
  <p><strong>Do you agree to our terms of service?</strong></p>
<label class="label" for="tos">
  <input data-type="input" type="radio" name="tos" value="yes">
  Yes
  <input data-type="input" type="radio" name="tos" value="no">
  No
</label>
<p><strong>Pick your favorite super heros.</strong></p>
<label>
  <input data-type="input" type="checkbox" name="spiderman">
  Spiderman
</label>
<label>
  <input data-type="input" type="checkbox" name="wonderwoman">
  Wonder Woman
</label>
<label>
  <input data-type="input" type="checkbox" name="blackpanther">
  Black Panther
</label>
  <p>
    <button class="button" type="submit">Submit</button>
  </p>
</form>

JavaScript

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
/* In today’s project, we’re going to modify our form saver script
to handle field types beyond text inputs. */

const form = document.querySelector('#save-me');
function saveInputValue(e) {
  let savedInputs = localStorage.getItem('autosave-form-inputs');
  savedInputs = savedInputs ? JSON.parse(savedInputs) : {};
  if (e.target.type === "checkbox") {
    savedInputs[e.target.name] = e.target.checked ? "on" : "off";
  } else {
    savedInputs[e.target.name] = e.target.value;
  }
  localStorage.setItem('autosave-form-inputs', JSON.stringify(savedInputs));
}
function getInputsFromLocalStorage() {
  let inputs = Array.prototype.slice.call(document.querySelectorAll('[data-type="input"]'));
  let savedInputs = localStorage.getItem('autosave-form-inputs');
  savedInputs = savedInputs ? JSON.parse(savedInputs) : {};
  inputs.forEach(function (input) {
    if (!savedInputs[input.name]) return;
    if (input.type === "checkbox") {
      input.checked = savedInputs[input.name] === "on" ? true : false;
    } else if (input.type === "radio") {
      input.checked = savedInputs[input.name] === input.value ? true : false;
    } else {
      input.value = savedInputs[input.name];
    }
  })
}
function clearDataOnSubmit() {
  localStorage.clear();
}
form.addEventListener('input', saveInputValue);
form.addEventListener('submit', clearDataOnSubmit);
getInputsFromLocalStorage();