|
// With the help of Jeremy Keith, I was able to create a fully scalable code sample that you can copy-paste into your project. |
|
// It will save the user input value on blur, this includes radio buttons, checkboxes and date inputs besides regular text/number inputs. |
|
// The only condition is that you give the form element on your page a data-attribute of data-form-topic="foo". |
|
// This code snippet saves the data-attribute as the key to the localStorage, and the value of it will be an object with key/value pairs of the respective inputs name and value. |
|
// Please refer to this gist somewhere in your code if you use it :) |
|
// Happy coding! |
|
|
|
// VARIABLE DECLARATIONS |
|
// objects |
|
let savedData = {}; |
|
let autocompletedData; |
|
|
|
// HTML elements |
|
const inputs = document.getElementsByTagName("input"); |
|
|
|
document.addEventListener("DOMContentLoaded", () => { |
|
const form = document.querySelector("form"); |
|
|
|
if (window.localStorage) { |
|
if (!form) { |
|
return; |
|
} |
|
|
|
if (!form.dataset.formTopic) { |
|
return; |
|
} |
|
|
|
let getFormTopic = localStorage.getItem(form.dataset.formTopic); |
|
if (!getFormTopic) { |
|
return; |
|
} |
|
autocompletedData = JSON.parse(getFormTopic); |
|
|
|
var formTopic = form.dataset.formTopic; |
|
console.log(formTopic); |
|
|
|
function getKeyValue() { |
|
for (const dataKey in autocompletedData) { |
|
let value = autocompletedData[dataKey]; |
|
|
|
let formField = document.querySelector( |
|
"[name = " + dataKey + "]" |
|
); |
|
|
|
switch (formField.type) { |
|
case "radio": |
|
formField = document.querySelector( |
|
`input[name = '${dataKey}'][value = '${value}']` |
|
); |
|
formField.setAttribute("checked", "checked"); |
|
break; |
|
case "checkbox": |
|
formField.setAttribute("checked", "checked"); |
|
break; |
|
case "file": |
|
break; |
|
default: |
|
formField.value = value; |
|
} |
|
} |
|
} |
|
|
|
getKeyValue(); |
|
} |
|
}); |
|
|
|
if (window.localStorage) { |
|
function saveFormDataToLocalStorage(e) { |
|
const form = e.target.closest("form"); |
|
let submitData = new FormData(form); |
|
|
|
for (let [dataKey, value] of submitData.entries()) { |
|
savedData[dataKey] = value; |
|
console.log(dataKey, value); |
|
} |
|
|
|
window.localStorage.setItem( |
|
form.dataset.formTopic, |
|
JSON.stringify(savedData) |
|
); |
|
} |
|
|
|
Array.prototype.forEach.call(inputs, function (input) { |
|
switch (input.type) { |
|
} |
|
|
|
input.addEventListener("blur", function (e) { |
|
e.preventDefault(); |
|
|
|
saveFormDataToLocalStorage(e); |
|
}); |
|
}); |
|
} |