Necesito un poco de ayuda con este proyecto que estoy por entregar.
Tengo el código dónde en un array guardo los datos de un formulario y luego de dar click en cualquier de los botones (guardar o enviar) la info queda guardada en el localStorage. Ahora, yo necesitaría que al refrescar el navegador la última info guardada en el localStorage se cargara automáticamente en el formulario en sus respectivos inputs y selects.
Desde ya muchas gracias.
Dejo js por aquí:
//DECLARO DIFERENTES VARIABLES Y OBJETOS
const formId = "formInscripcion";
const url = location.href;
let form = document.querySelector(`#${formId}`);
const valorDeInput = localStorage.getItem("valores_de_input");
const datosFormulario = [];
const nombreCompleto = document.getElementById("nombreCompleto");
const fechaNacimiento = document.getElementById("fechaNacimiento");
const email = document.getElementById("email");
const telefono = document.getElementById("telefono");
const curso = document.getElementById("curso");
const cuotas = document.getElementById("cuotas");
const paises = document.getElementById("paises");
let precioCurso = "";
let precioCuotas = parseInt("");
const btnguardo = document.getElementById("guardar");
const btnenvio = document.getElementById("enviar");
//SE CREA EL EVENTO DEL BOTÓN GUARDAR, GUARDANDO LOS DATOS EN LOCAL STORAGE
btnguardo.addEventListener("click", (e) => {
e.preventDefault();
if (curso.value === "opOffice") {
precioCurso = 20000;
} else if (curso.value === "prog") {
precioCurso = 21100;
} else {
precioCurso = 25200;
}
if (cuotas.value === "tres") {
precioCuotas = precioCurso / 3;
} else if (cuotas.value === "cinco") {
precioCuotas = precioCurso / 5;
} else {
precioCuotas = precioCurso / 12;
}
const DatosFinales = {
nombre: nombreCompleto.value,
nacimiento: fechaNacimiento.value,
correo: email.value,
telefono: telefono.value,
curso: curso.value,
precio_curso: precioCurso,
cuotas: cuotas.value,
precio_cuota: precioCuotas,
paises: paises.value,
};
datosFormulario.push(DatosFinales);
localStorage.setItem("valores_de_input", JSON.stringify(datosFormulario));
Swal.fire({
position: 'top-end',
icon: 'success',
title: '¡Sus datos han sido guardados!',
showConfirmButton: false,
timer: 1500
})
});
//SE CREA EL EVENTO DEL BOTÓN ENVIAR, GUARDANDO LOS DATOS EN LOCAL STORAGE Y ENVIANDO LOS DATOS POR CORREO ELECTRONICO
btnenvio.addEventListener('click', (event) => {
event.preventDefault();
if (curso.value === "opOffice") {
precioCurso = 20000;
} else if (curso.value === "prog") {
precioCurso = 21100;
} else {
precioCurso = 25200;
}
if (cuotas.value === "tres") {
precioCuotas = precioCurso / 3;
} else if (cuotas.value === "cinco") {
precioCuotas = precioCurso / 5;
} else {
precioCuotas = precioCurso / 12;
}
const DatosFinales = {
nombre: nombreCompleto.value,
nacimiento: fechaNacimiento.value,
correo: email.value,
telefono: telefono.value,
curso: curso.value,
precio_curso: precioCurso,
cuotas: cuotas.value,
precio_cuota: precioCuotas,
paises: paises.value,
};
datosFormulario.push(DatosFinales);
localStorage.setItem("valores_de_input", JSON.stringify(datosFormulario));
let params = {
user_id: 'SAaxbiXrUyQfe-Br7',
service_id: 'service_ot5g91i',
template_id: 'template_szd70mr',
template_params: {
to_email: email.value,
from_name: "Formulario",
to_name: nombreCompleto.value,
message: curso.value,
p_curso: precioCurso,
n_cuotas: cuotas.value,
p_cuota: precioCuotas,
reply_to: "formulario",
f_nacimiento: fechaNacimiento.value,
to_telefono: telefono.value,
to_pais: paises.value,
to_curso: curso.value,
}
};
let headers = {
'Content-type': 'application/json'
};
let options = {
method: 'POST',
headers: headers,
body: JSON.stringify(params)
};
fetch('https://api.emailjs.com/api/v1.0/email/send', options)
.then((httpResponse) => {
if (httpResponse.ok) {
Swal.fire({
position: 'top-end',
icon: 'success',
title: '¡Sus datos han sido enviados!',
showConfirmButton: false,
timer: 1500
})
} else {
return httpResponse.text()
.then(text => Promise.reject(text));
}
})
.catch((error) => {
console.log('Oops... ' + error);
});
});
Y el html para que sepan de dónde sale todo:
<body>
<div class="alert"></div>
<form id="formInscripcion">
<h3>Formulario de inscripción</h3>
<label for="nombreCompleto">Nombre completo</label>
<input type="text" name="full-name" id="nombreCompleto" />
<label for="fechaNacimiento">Fecha de nacimiento</label>
<input type="date" name="dob" id="fechaNacimiento" />
<label for="email">Email</label>
<input type="email" name="email" id="email" />
<label for="telefono">Teléfono</label>
<input type="tel" name="phone" id="telefono" maxlength="11" />
<label for="curso">Curso</label>
<select name="cursos" id="curso" tabindex="0">
<option value="">Seleccione un curso</option>
<option value="OperadorOffice">Operador de Office</option>
<option value="Programacion">Programación</option>
<option value="DisenioGrafico">Diseño Gráfico</option>
</select>
<label for="cuotas">Cuotas</label>
<select name="cuotas" id="cuotas" tabindex="0">
<option value="">Seleccione las cuotas</option>
<option value="tres" name="3">3</option>
<option value="cinco" name="5">5</option>
<option value="doce" name="12">12</option>
</select>
<label for="paises">País</label>
<select name="paises" id="paises" tabindex="0">
<option value="">Seleccione un país</option>
<option value="uruguay" name="Uruguay">Uruguay</option>
<option value="argentina" name="Argentina">Argentina</option>
<option value="chile" name="Chile">Chile</option>
</select>
<br><br>
<button type="submit" id="enviar">Enviar</button>
<button type="submit" id="guardar">Guardar</button>
</form>
</body>