1

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>
4
  • Tengo una pregunta como identificar el último, por la fecha y hora de registro o porque se le agrega un id auto-incremental o especifica
    – Weizman
    Commented el 7 jun. 2022 a las 0:00
  • Pues bien, analizando tu código lo que veo que en el archivo .html te falta importar el archivo js donde tienes la lógica que hace como controlador y el cdn de sweetalert2, estos se agregan antes de terminar el </body>
    – Weizman
    Commented el 7 jun. 2022 a las 0:02
  • @Weizman Está todo enlazado, no lo copié en el código pegado porque me pareció que no sería necesario. || Por lo demás que me consultas, el localStorage que tengo guarda un solo ingreso, es decir que sólo puedo acceder al último ingreso que se haya hecho del formulario. Commented el 7 jun. 2022 a las 0:08
  • Ah, mucho más fácil
    – Weizman
    Commented el 7 jun. 2022 a las 0:11

1 respuesta 1

0

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. 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

Quedo atento. Un saludo

1
  • Me salvaste el proyecto. Muchísimas gracias por la ayuda, era exactamente lo que estaba necesitando. Se me hacía un entrevero la parte de "volver" a rellenar el array. Me quedó clarísimo junto con tú explicación. Capo, muchas gracias. Commented el 7 jun. 2022 a las 19:10

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.