Skip to main content
observación de método obtenerDatos() para ejecutarse al cargar la página
Origen Enlace
Weizman
  • 364
  • 1
  • 10

y cencillamente obtenemos la información en la posición 0 porque es un array el que guardó a menos que lo guarde como objeto y ponemos los valores en su respectivo input. Por cierto al no coincidir los nombres de las variables en el localstarage y las variables de entorno no es muy recomendable. Al final llamamos la función obtenerDatos() para que al cargar la página se llene el form con lo que hay guardado en el localstorage

y cencillamente obtenemos la información en la posición 0 porque es un array el que guardó a menos que lo guarde como objeto y ponemos los valores en su respectivo input. Por cierto al no coincidir los nombres de las variables en el localstarage y las variables de entorno no es muy recomendable.

y cencillamente obtenemos la información en la posición 0 porque es un array el que guardó a menos que lo guarde como objeto y ponemos los valores en su respectivo input. Por cierto al no coincidir los nombres de las variables en el localstarage y las variables de entorno no es muy recomendable. Al final llamamos la función obtenerDatos() para que al cargar la página se llene el form con lo que hay guardado en el localstorage

Origen Enlace
Weizman
  • 364
  • 1
  • 10

Se estructuró el html des esta manera

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>

El js lo reestructuramos asi. 2 funciones:

  1. Para obtener valores getData
  2. Para setear valores setData

y cencillamente obtenemos la información en la posición 0 porque es un array el que guardó a menos que lo guarde como objeto y ponemos los valores en su respectivo input. Por cierto al no coincidir los nombres de las variables en el localstarage y las variables de entorno no es muy recomendable.

Quedo atento. Un saludo