function setCookie(name, value, days) { let expires = ""; if (days) { const date = new Date(); date.setTime(date.getTime() + (days * 24 * 60 * 60 * 1000)); expires = "; expires=" + date.toUTCString(); } document.cookie = name + "=" + encodeURIComponent(value) + expires + "; path=/"; } function getCookie(name) { const nameEQ = name + "="; const ca = document.cookie.split(';'); for(let i=0; i < ca.length; i++) { let c = ca[i]; while (c.charAt(0)==' ') c = c.substring(1,c.length); if (c.indexOf(nameEQ) == 0) return decodeURIComponent(c.substring(nameEQ.length,c.length)); } return null; } function saveFormToCookie(form) { const formData = new FormData(form); for (let element of form.elements) { if (element.id) { //console.log("Saving " + element.id) if (element.type === 'checkbox') { //console.log("Checkbox " + element.checked) setCookie(element.id, element.checked ? 'true' : 'false', 7); } else if (element.type === 'radio') { if (element.checked) { //console.log("Set cookie " + element.id + " " + element.value) setCookie(element.id, element.value, 7); } else { //console.log("Set cookie " + element.id + " EMPTY") setCookie(element.id, "", 7) } } else { setCookie(element.id, element.value, 7); } } } } function saveFormToCookieEvent(evt) { //console.log("save form to cookie: " + evt.target) form = evt.target saveFormToCookie(form) } function loadFormFromCookie(form) { //console.log("Load form from cookie") if (!form) { return } let updated = false for (let element of form.elements) { if (element.id) { const value = getCookie(element.id); //console.log("Loading " + element.id + " value: " + value) if (value !== null) { if (element.type === 'checkbox') { let newvalue = value === "true" if (element.checked != newvalue) { element.checked = newvalue updated = true } } else if (element.type === 'radio') { let newvalue = element.value === value if (element.checked != newvalue) { element.checked = newvalue; updated = true } } else { if (element.value != value) { element.value = value; updated = true } } } } } if (updated) { htmx.trigger(form, 'formdataloaded') } } function getPersistentForms() { return document.getElementsByClassName("persistent-form"); } function loadFormsFromCookie() { let forms = getPersistentForms(); for (let i = 0; i < forms.length; i++) { loadFormFromCookie(forms[i]) } } // Most likely not needed. /* ( () => { let forms = getPersistentForms() for (let i = 0; i < forms.length; i++) { forms[i].addEventListener('change', function() { saveFormToCookie(form) }) } })() */ htmx.on('htmx:load', function(event) { //console.log("htmx:load") loadFormsFromCookie(); }); htmx.on('htmx:afterSettle', function(event) { //console.log("htmx:afterSettle") loadFormsFromCookie(); }); // when hx-boost=false // Load form data from cookie on page load //document.addEventListener('DOMContentLoaded', loadFormFromCookie);