In this video I will show you how to keep form values when navigating between pages.
To follow this tutorial you will need Elementor Pro:
https://wickydesign.com/get-elementor
How to Pass Form Data to Another Page Video:
https://www.youtube.com/watch?v=dNJ24LGsFPo
Timestamps:
- 0:00 Introduction
- 0:59 Tutorial Begins
- 3:43 Chrome – View Session Storage
JavaScript Session Storage Code:
<script>
// Retrieve form data from sessionStorage if it exists
if (sessionStorage.getItem('formData')) {
const formData = JSON.parse(sessionStorage.getItem('formData'));
document.getElementById('form-field-firstname').value = formData.firstname;
document.getElementById('form-field-lastname').value = formData.lastname;
}
// Save form data to sessionStorage when user navigates away from the page
window.addEventListener('beforeunload', () => {
const formData = {
firstname: document.getElementById('form-field-firstname').value,
lastname: document.getElementById('form-field-lastname').value,
};
sessionStorage.setItem('formData', JSON.stringify(formData));
});
</script>
JavaScript Go Back Code:
<button onclick="goBack()">Go Back</button>
<script>
function goBack() {
window.history.back();
}
</script>
