En un sitio web de wordpress, quiero que cuando alguien complete un formulario de producto (seleccione atributos, etc.) y haga clic en comprar ahora, si no ha iniciado sesión, será redirigido al formulario de inicio de sesión. En el inicio de sesión exitoso, quiero obtener el contenido del formulario enviado desde localstorage , completar el formulario y luego enviarlo automáticamente.
¿Es eso posible?
Descubrí que puedo almacenar el formulario enviado de esta manera (pero, ¿cómo puedo rellenar el formulario automáticamente?):
$(document).ready(function() { $('form').submit(function(e) { e.preventDefault(); var formFields = $(this).serialize(); localStorage.setItem('myForm', formFields); //data = localStorage.getItem('myForm'); //retrieve it later }); });Debería poder recuperar datos de localStorage, obtener sus campos de formulario usando selectores DOM y completar sus valores usando los datos de localStorage.
En Vanilla JS, probablemente puedas hacer lo siguiente:
document.addEventListener('load', () => { // check if user is logged in according to your usecase if(isLoggedIn()) { try { const formData = JSON.parse(localStorage.getItem('myForm')); // get input fields. If you have some unique id associated to them, you can use document.querySelector(`#${inputId}`); const inputFields = document.querySelectorAll('input'); for(let i = 0; i<inputFields.length; i++) { const inputId = inputFields[i].getAttribute('data-id'); // fallback to empty string in case it is not found in localStorage object inputFields[i].value = formData[inputId] || ''; } } catch(e) { // handle error } // Now you have the form input fields pre-filled, add custom logic from here .. } }) /* --- Sample DOM ---- <input data-id="name" /> <input data-id="city" /> ---- Form fields saved in localStorage --- { name : 'Naruto', city: 'Leaf Village' } */