let database = 'valores_de_input'
//función que obtiene datos del localStorage
const getData = async () => {
const res = await localStorage[database] ? JSON.parse(localStorage[database]) : []
return res
}
//función que llena datos del localStorage
const setData = (data) => {
localStorage[database] = JSON.stringify(data)
}
const formId = "formInscripcion";
const url = location.href;
let form = document.querySelector(`#${formId}`);
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");
const obtenerDatos = async () => {
const datos = await getData()
nombreCompleto.value = datos[0].nombre
fechaNacimiento.value = datos[0].nacimiento
email.value = datos[0].correo
telefono.value = datos[0].telefono
curso.value = datos[0].curso
cuotas.value = datos[0].cuotas
paises.value = datos[0].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
const save = () => {
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));
setData(datosFormulario)
Swal.fire({
position: 'top-end',
icon: 'success',
title: '¡Sus datos han sido guardados!',
showConfirmButton: false,
timer: 1500
})
}
btnguardo.addEventListener("click", (e) => {
e.preventDefault();
save()
});
//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();
save()
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);
});
});
obtenerDatos()
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<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>
<!-- 1 error falta importar el archivo -->
<script src="js.js"></script>
<!-- 2 error falta importar sweetalert2 -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/sweetalert2.all.min.js"></script>
</body>
</html>