Skip to content

Instantly share code, notes, and snippets.

@rosemulazada
Last active April 7, 2024 05:32
Show Gist options
  • Star 6 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save rosemulazada/29379f3e0586491f235e0eb39d108aa5 to your computer and use it in GitHub Desktop.
Save rosemulazada/29379f3e0586491f235e0eb39d108aa5 to your computer and use it in GitHub Desktop.
SCALABLE: Save form data to localStorage and auto-complete on refresh
// 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 formValidation() {}
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);
});
});
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment