Skip to main content
Mejoro respuesta.
Origen Enlace
Luis S. Romero
  • 3.2k
  • 1
  • 5
  • 14
<!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>
      <link rel="stylesheet" href="css/main.css">
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  </head>
  <body>
    <div class="centrarFormulario">
      <form id="formulario">
        <label for="nombre">Nombre:</label>
        <input id="nombre" type="text" placeholder="Ingrese su nombre" />
        <label for="apellido">Apellido:</label>
        <input id="apellido" type="text" placeholder="Ingrese su apellido" />
        <label for="email">email:</label>
        <input id="email" type="email" placeholder="Ingrese su email" />
        <label for="edad">Edad:</label>
        <input id="edad" type="number" placeholder="Ingrese su Edad" />
        <label for="id">Id:</label>
        <input
          id="id"
          type="number"
          placeholder="Ingrese su n° de cliente en orden"
        />
        <label for="dni">dni:</label>
        <input id="dni" type="number" placeholder="Ingrese su DNI" />
        <label for="telefono">Telefono:</label>
        <input id="telefono" type="number" placeholder="Ingrese su Telefono" />
        <label for="calle">Dirección:</label>
        <input id="Dirección" type="text" placeholder="Ingrese su Dirección" />
        <h3>Ingrese los datos del pedido</h3>
        <label for="asistencia">Cantidad de ingresantes:</label>
        <input id="ingresantes" type="text" placeholder="Ingrese la cantidad" />
        <label for="aplicantes">cantidad de ancianos y menores:</label>
        <input id="aplicantes" type="text" placeholder="Ingrese la cantidad" />
        <button id="btnLoad" type="submit">Enviar</button>
        <button type="reset">Restablecer</button>
        <button type="button" id="btnDeleteStorage">Borrar Storage</button>
      </form>
    </div>
    <table>
      <thead id="tableHead">
        <tr>
          <th>Id</th>
          <th>Nombre</th>
          <th>Apellido</th>
          <th>Email</th>
          <th>Edad</th>
          <th>DNI</th>
          <th>Teléfono</th>
        </tr>
      </thead>
      <tbody id="tableBody"></tbody>
    </table>
    <script src="appsrc="js/main.js"></script>
  </body>
</html>
<!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>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  </head>
  <body>
    <div class="centrarFormulario">
      <form id="formulario">
        <label for="nombre">Nombre:</label>
        <input id="nombre" type="text" placeholder="Ingrese su nombre" />
        <label for="apellido">Apellido:</label>
        <input id="apellido" type="text" placeholder="Ingrese su apellido" />
        <label for="email">email:</label>
        <input id="email" type="email" placeholder="Ingrese su email" />
        <label for="edad">Edad:</label>
        <input id="edad" type="number" placeholder="Ingrese su Edad" />
        <label for="id">Id:</label>
        <input
          id="id"
          type="number"
          placeholder="Ingrese su n° de cliente en orden"
        />
        <label for="dni">dni:</label>
        <input id="dni" type="number" placeholder="Ingrese su DNI" />
        <label for="telefono">Telefono:</label>
        <input id="telefono" type="number" placeholder="Ingrese su Telefono" />
        <label for="calle">Dirección:</label>
        <input id="Dirección" type="text" placeholder="Ingrese su Dirección" />
        <h3>Ingrese los datos del pedido</h3>
        <label for="asistencia">Cantidad de ingresantes:</label>
        <input id="ingresantes" type="text" placeholder="Ingrese la cantidad" />
        <label for="aplicantes">cantidad de ancianos y menores:</label>
        <input id="aplicantes" type="text" placeholder="Ingrese la cantidad" />
        <button id="btnLoad" type="submit">Enviar</button>
        <button type="reset">Restablecer</button>
        <button type="button" id="btnDeleteStorage">Borrar Storage</button>
      </form>
    </div>
    <table>
      <thead id="tableHead">
        <tr>
          <th>Id</th>
          <th>Nombre</th>
          <th>Apellido</th>
          <th>Email</th>
          <th>Edad</th>
          <th>DNI</th>
          <th>Teléfono</th>
        </tr>
      </thead>
      <tbody id="tableBody"></tbody>
    </table>
    <script src="app.js"></script>
  </body>
</html>
<!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>
      <link rel="stylesheet" href="css/main.css">
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  </head>
  <body>
    <div class="centrarFormulario">
      <form id="formulario">
        <label for="nombre">Nombre:</label>
        <input id="nombre" type="text" placeholder="Ingrese su nombre" />
        <label for="apellido">Apellido:</label>
        <input id="apellido" type="text" placeholder="Ingrese su apellido" />
        <label for="email">email:</label>
        <input id="email" type="email" placeholder="Ingrese su email" />
        <label for="edad">Edad:</label>
        <input id="edad" type="number" placeholder="Ingrese su Edad" />
        <label for="id">Id:</label>
        <input
          id="id"
          type="number"
          placeholder="Ingrese su n° de cliente en orden"
        />
        <label for="dni">dni:</label>
        <input id="dni" type="number" placeholder="Ingrese su DNI" />
        <label for="telefono">Telefono:</label>
        <input id="telefono" type="number" placeholder="Ingrese su Telefono" />
        <label for="calle">Dirección:</label>
        <input id="Dirección" type="text" placeholder="Ingrese su Dirección" />
        <h3>Ingrese los datos del pedido</h3>
        <label for="asistencia">Cantidad de ingresantes:</label>
        <input id="ingresantes" type="text" placeholder="Ingrese la cantidad" />
        <label for="aplicantes">cantidad de ancianos y menores:</label>
        <input id="aplicantes" type="text" placeholder="Ingrese la cantidad" />
        <button id="btnLoad" type="submit">Enviar</button>
        <button type="reset">Restablecer</button>
        <button type="button" id="btnDeleteStorage">Borrar Storage</button>
      </form>
    </div>
    <table>
      <thead id="tableHead">
        <tr>
          <th>Id</th>
          <th>Nombre</th>
          <th>Apellido</th>
          <th>Email</th>
          <th>Edad</th>
          <th>DNI</th>
          <th>Teléfono</th>
        </tr>
      </thead>
      <tbody id="tableBody"></tbody>
    </table>
    <script src="js/main.js"></script>
  </body>
</html>
Mejoro respuesta.
Origen Enlace
Luis S. Romero
  • 3.2k
  • 1
  • 5
  • 14
<!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>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  </head>
  <body>
    <div class="centrarFormulario">
      <form id="formulario">
        <label for="nombre">Nombre:</label>
        <input id="nombre" type="text" placeholder="Ingrese su nombre" />
        <label for="apellido">Apellido:</label>
        <input id="apellido" type="text" placeholder="Ingrese su apellido" />
        <label for="email">email:</label>
        <input id="email" type="email" placeholder="Ingrese su email" />
        <label for="edad">Edad:</label>
        <input id="edad" type="number" placeholder="Ingrese su Edad" />
        <label for="id">Id:</label>
        <input
          id="id"
          type="number"
          placeholder="Ingrese su n° de cliente en orden"
        />
        <label for="dni">dni:</label>
        <input id="dni" type="number" placeholder="Ingrese su DNI" />
        <label for="telefono">Telefono:</label>
        <input id="telefono" type="number" placeholder="Ingrese su Telefono" />
        <label for="calle">Dirección:</label>
        <input id="Dirección" type="text" placeholder="Ingrese su Dirección" />
        <h3>Ingrese los datos del pedido</h3>
        <label for="asistencia">Cantidad de ingresantes:</label>
        <input id="ingresantes" type="text" placeholder="Ingrese la cantidad" />
        <label for="aplicantes">cantidad de ancianos y menores:</label>
        <input id="aplicantes" type="text" placeholder="Ingrese la cantidad" />
        <button id="btnLoad" type="submit">Enviar</button>
        <button type="reset">Restablecer</button>
        <button type="button" id="btnDeleteStorage">Borrar Storage</button>
      </form>
    </div>
    <table>
      <thead id="tableHead">
        <tr>
          <th>Id</th>
          <th>Nombre</th>
          <th>Apellido</th>
          <th>Email</th>
          <th>Edad</th>
          <th>DNI</th>
          <th>Teléfono</th>
        </tr>
      </thead>
      <tbody id="tableBody"></tbody>
    </table>
    <script src="app.js"></script>
  </body>
</html>
    $(document).ready(function () {
  const tableBody = $("#tableBody");
  const tableHead = $("#tableHead");
  if (getUserFromStorage("users")) {
    drawTable();
  } else {
    tableHead.hide();
  }

  console.log($("#nombre").val());
  console.log($("#apellido").val());
  console.log($("#email").val());
  console.log($("#edad").val());
  console.log($("#id").val());
  console.log($("#dni").val());
  console.log($("#telefono").val());
  console.log($("#ingresantes").val());
  console.log($("#aplicantes").val());

  const form = $("#formulario");
  const inputName = $("#nombre");
  const inputSurname = $("#apellido");
  const inputEmail = $("#email");
  const inputAge = $("#edad");
  const inputId = $("#id");
  const inputDni = $("#dni");
  const inputPhone = $("#telefono");
  const allInputs = document.querySelectorAll("input");
  const btnDeleteStorage = $("#btnDeleteStorage"); //Capturo boton reset Storage
  // pronto usare esto para dar resultados sobre la compra de boletos
  // const inputIncoming = $("#ingresantes");
  // const inputApplicants = $("#aplicantes");
  //---------------------------------------------------------------
  function User(id, nombre, apellido, email, edad, dni, telefono) {
    this.id = id;
    this.nombre = nombre;
    this.apellido = apellido;
    this.email = email;
    this.edad = edad;
    this.id = id;
    this.dni = dni;
    this.telefono = telefono;
  }

  let listUser = [];

  if (getUserFromStorage("users")) {
    listUser = getUserFromStorage("users");
  }

  function saveToStorage(key, user) {
    listUser.push(user);
    localStorage.setItem(key, JSON.stringify(listUser));
  }

  function getUserFromStorage(key) {
    if (localStorage.getItem(key)) {
      return JSON.parse(localStorage.getItem(key));
    }
  }

  function drawTable() {
    for (const user of getUserFromStorage("users")) {
      tableHead.show();
      tableBody.append(`<tr>
      <td>${user.id}</td>
      <td>${user.nombre}</td>
      <td>${user.apellido}</td>
      <td>${user.email}</td>
      <td>${user.edad}</td>
      <td>${user.dni}</td>
      <td>${user.telefono}</td>
      </tr>`);
    }
  }

  form.submit(function (event) {
    event.preventDefault();

    const id = inputId.val();
    const nombre = inputName.val();
    const apellido = inputSurname.val();
    const email = inputEmail.val();
    const edad = inputAge.val();
    const dni = inputDni.val();
    const telefono = inputPhone.val();

    const user = new User(id, nombre, apellido, email, edad, dni, telefono);

    saveToStorage("users", user); //Guardo user en storage
    tableBody.empty(); //Borro el tbody de la tabla
    drawTable(); //Dibujo tabla actualizada

    //Pongo todos los input en blanco tras agregar a la tabla y storage.
    for (const input of allInputs) {
      input.value = "";
    }
  });
  //Al presionar botón se borra Storage y se recarga la página para borrar tabla
  btnDeleteStorage.click(() => {
    localStorage.clear();
    location.reload();
  });
});
<!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>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  </head>
  <body>
    <div class="centrarFormulario">
      <form id="formulario">
        <label for="nombre">Nombre:</label>
        <input id="nombre" type="text" placeholder="Ingrese su nombre" />
        <label for="apellido">Apellido:</label>
        <input id="apellido" type="text" placeholder="Ingrese su apellido" />
        <label for="email">email:</label>
        <input id="email" type="email" placeholder="Ingrese su email" />
        <label for="edad">Edad:</label>
        <input id="edad" type="number" placeholder="Ingrese su Edad" />
        <label for="id">Id:</label>
        <input
          id="id"
          type="number"
          placeholder="Ingrese su n° de cliente en orden"
        />
        <label for="dni">dni:</label>
        <input id="dni" type="number" placeholder="Ingrese su DNI" />
        <label for="telefono">Telefono:</label>
        <input id="telefono" type="number" placeholder="Ingrese su Telefono" />
        <label for="calle">Dirección:</label>
        <input id="Dirección" type="text" placeholder="Ingrese su Dirección" />
        <h3>Ingrese los datos del pedido</h3>
        <label for="asistencia">Cantidad de ingresantes:</label>
        <input id="ingresantes" type="text" placeholder="Ingrese la cantidad" />
        <label for="aplicantes">cantidad de ancianos y menores:</label>
        <input id="aplicantes" type="text" placeholder="Ingrese la cantidad" />
        <button id="btnLoad" type="submit">Enviar</button>
        <button type="reset">Restablecer</button>
      </form>
    </div>
    <table>
      <thead id="tableHead">
        <tr>
          <th>Id</th>
          <th>Nombre</th>
          <th>Apellido</th>
          <th>Email</th>
          <th>Edad</th>
          <th>DNI</th>
          <th>Teléfono</th>
        </tr>
      </thead>
      <tbody id="tableBody"></tbody>
    </table>
    <script src="app.js"></script>
  </body>
</html>
$(document).ready(function () {
  const tableBody = $("#tableBody");
  const tableHead = $("#tableHead");
  if (getUserFromStorage("users")) {
    drawTable();
  } else {
    tableHead.hide();
  }

  console.log($("#nombre").val());
  console.log($("#apellido").val());
  console.log($("#email").val());
  console.log($("#edad").val());
  console.log($("#id").val());
  console.log($("#dni").val());
  console.log($("#telefono").val());
  console.log($("#ingresantes").val());
  console.log($("#aplicantes").val());

  const form = $("#formulario");
  const inputName = $("#nombre");
  const inputSurname = $("#apellido");
  const inputEmail = $("#email");
  const inputAge = $("#edad");
  const inputId = $("#id");
  const inputDni = $("#dni");
  const inputPhone = $("#telefono");
  const allInputs = document.querySelectorAll("input");
  // pronto usare esto para dar resultados sobre la compra de boletos
  // const inputIncoming = $("#ingresantes");
  // const inputApplicants = $("#aplicantes");
  //---------------------------------------------------------------
  function User(id, nombre, apellido, email, edad, dni, telefono) {
    this.id = id;
    this.nombre = nombre;
    this.apellido = apellido;
    this.email = email;
    this.edad = edad;
    this.id = id;
    this.dni = dni;
    this.telefono = telefono;
  }

  let listUser = [];

  if (getUserFromStorage("users")) {
    listUser = getUserFromStorage("users");
  }

  function saveToStorage(key, user) {
    listUser.push(user);
    localStorage.setItem(key, JSON.stringify(listUser));
  }

  function getUserFromStorage(key) {
    if (localStorage.getItem(key)) {
      return JSON.parse(localStorage.getItem(key));
    }
  }

  function drawTable() {
    for (const user of getUserFromStorage("users")) {
      tableHead.show();
      tableBody.append(`<tr>
      <td>${user.id}</td>
      <td>${user.nombre}</td>
      <td>${user.apellido}</td>
      <td>${user.email}</td>
      <td>${user.edad}</td>
      <td>${user.dni}</td>
      <td>${user.telefono}</td>
      </tr>`);
    }
  }

  form.submit(function (event) {
    event.preventDefault();

    const id = inputId.val();
    const nombre = inputName.val();
    const apellido = inputSurname.val();
    const email = inputEmail.val();
    const edad = inputAge.val();
    const dni = inputDni.val();
    const telefono = inputPhone.val();

    const user = new User(id, nombre, apellido, email, edad, dni, telefono);

    saveToStorage("users", user); //Guardo user en storage
    tableBody.empty(); //Borro el tbody de la tabla
    drawTable(); //Dibujo tabla actualizada

    //Pongo todos los input en blanco tras agregar a la tabla y storage.
    for (const input of allInputs) {
      input.value = "";
    }
  });
});
<!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>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  </head>
  <body>
    <div class="centrarFormulario">
      <form id="formulario">
        <label for="nombre">Nombre:</label>
        <input id="nombre" type="text" placeholder="Ingrese su nombre" />
        <label for="apellido">Apellido:</label>
        <input id="apellido" type="text" placeholder="Ingrese su apellido" />
        <label for="email">email:</label>
        <input id="email" type="email" placeholder="Ingrese su email" />
        <label for="edad">Edad:</label>
        <input id="edad" type="number" placeholder="Ingrese su Edad" />
        <label for="id">Id:</label>
        <input
          id="id"
          type="number"
          placeholder="Ingrese su n° de cliente en orden"
        />
        <label for="dni">dni:</label>
        <input id="dni" type="number" placeholder="Ingrese su DNI" />
        <label for="telefono">Telefono:</label>
        <input id="telefono" type="number" placeholder="Ingrese su Telefono" />
        <label for="calle">Dirección:</label>
        <input id="Dirección" type="text" placeholder="Ingrese su Dirección" />
        <h3>Ingrese los datos del pedido</h3>
        <label for="asistencia">Cantidad de ingresantes:</label>
        <input id="ingresantes" type="text" placeholder="Ingrese la cantidad" />
        <label for="aplicantes">cantidad de ancianos y menores:</label>
        <input id="aplicantes" type="text" placeholder="Ingrese la cantidad" />
        <button id="btnLoad" type="submit">Enviar</button>
        <button type="reset">Restablecer</button>
        <button type="button" id="btnDeleteStorage">Borrar Storage</button>
      </form>
    </div>
    <table>
      <thead id="tableHead">
        <tr>
          <th>Id</th>
          <th>Nombre</th>
          <th>Apellido</th>
          <th>Email</th>
          <th>Edad</th>
          <th>DNI</th>
          <th>Teléfono</th>
        </tr>
      </thead>
      <tbody id="tableBody"></tbody>
    </table>
    <script src="app.js"></script>
  </body>
</html>
    $(document).ready(function () {
  const tableBody = $("#tableBody");
  const tableHead = $("#tableHead");
  if (getUserFromStorage("users")) {
    drawTable();
  } else {
    tableHead.hide();
  }

  console.log($("#nombre").val());
  console.log($("#apellido").val());
  console.log($("#email").val());
  console.log($("#edad").val());
  console.log($("#id").val());
  console.log($("#dni").val());
  console.log($("#telefono").val());
  console.log($("#ingresantes").val());
  console.log($("#aplicantes").val());

  const form = $("#formulario");
  const inputName = $("#nombre");
  const inputSurname = $("#apellido");
  const inputEmail = $("#email");
  const inputAge = $("#edad");
  const inputId = $("#id");
  const inputDni = $("#dni");
  const inputPhone = $("#telefono");
  const allInputs = document.querySelectorAll("input");
  const btnDeleteStorage = $("#btnDeleteStorage"); //Capturo boton reset Storage
  // pronto usare esto para dar resultados sobre la compra de boletos
  // const inputIncoming = $("#ingresantes");
  // const inputApplicants = $("#aplicantes");
  //---------------------------------------------------------------
  function User(id, nombre, apellido, email, edad, dni, telefono) {
    this.id = id;
    this.nombre = nombre;
    this.apellido = apellido;
    this.email = email;
    this.edad = edad;
    this.id = id;
    this.dni = dni;
    this.telefono = telefono;
  }

  let listUser = [];

  if (getUserFromStorage("users")) {
    listUser = getUserFromStorage("users");
  }

  function saveToStorage(key, user) {
    listUser.push(user);
    localStorage.setItem(key, JSON.stringify(listUser));
  }

  function getUserFromStorage(key) {
    if (localStorage.getItem(key)) {
      return JSON.parse(localStorage.getItem(key));
    }
  }

  function drawTable() {
    for (const user of getUserFromStorage("users")) {
      tableHead.show();
      tableBody.append(`<tr>
      <td>${user.id}</td>
      <td>${user.nombre}</td>
      <td>${user.apellido}</td>
      <td>${user.email}</td>
      <td>${user.edad}</td>
      <td>${user.dni}</td>
      <td>${user.telefono}</td>
      </tr>`);
    }
  }

  form.submit(function (event) {
    event.preventDefault();

    const id = inputId.val();
    const nombre = inputName.val();
    const apellido = inputSurname.val();
    const email = inputEmail.val();
    const edad = inputAge.val();
    const dni = inputDni.val();
    const telefono = inputPhone.val();

    const user = new User(id, nombre, apellido, email, edad, dni, telefono);

    saveToStorage("users", user); //Guardo user en storage
    tableBody.empty(); //Borro el tbody de la tabla
    drawTable(); //Dibujo tabla actualizada

    //Pongo todos los input en blanco tras agregar a la tabla y storage.
    for (const input of allInputs) {
      input.value = "";
    }
  });
  //Al presionar botón se borra Storage y se recarga la página para borrar tabla
  btnDeleteStorage.click(() => {
    localStorage.clear();
    location.reload();
  });
});
corrijo error de tipeo.
Origen Enlace
Luis S. Romero
  • 3.2k
  • 1
  • 5
  • 14
$(document).ready(function () {
  const tableBody = $("#tableBody");
  const tableHead = $("#tableHead");
  if (getUserFromStorage("users")) {
    drawTable();
  } else {
    tableHead.hide();
  }

  console.log($("#nombre").val());
  console.log($("#apellido").val());
  console.log($("#email").val());
  console.log($("#edad").val());
  console.log($("#id").val());
  console.log($("#dni").val());
  console.log($("#telefono").val());
  console.log($("#ingresantes").val());
  console.log($("#aplicantes").val());

  const form = $("#formulario");
  const inputName = $("#nombre");
  const inputSurname = $("#apellido");
  const inputEmail = $("#email");
  const inputAge = $("#edad");
  const inputId = $("#id");
  const inputDni = $("#dni");
  const inputPhone = $("#telefono");
  const allInputs = document.querySelectorAll("input");
  // pronto usare esto para dar resultados sobre la compra de boletos
  // const inputIncoming = $("#ingresantes");
  // const inputApplicants = $("#aplicantes");
  //---------------------------------------------------------------
  function User(id, nombre, apellido, email, edad, dni, telefono) {
    this.id = id;
    this.nombre = nombre;
    this.apellido = apellido;
    this.email = email;
    this.edad = edad;
    this.id = id;
    this.dni = dni;
    this.telefono = telefono;
  }

  let listUser = [];

  if (getUserFromStorage("users")) {
    listUser = getUserFromStorage("users");
  }

  function saveToStorage(key, user) {
    listUser.push(user);
    localStorage.setItem(key, JSON.stringify(listUser));
  }

  function getUserFromStorage(key) {
    if (localStorage.getItem(key)) {
      return JSON.parse(localStorage.getItem(key));
    }
  }

  function drawTable() {
    for (const user of getUserFromStorage("users")) {
      tableHead.show();
      tableBody.append(`<tr>
      <td>${user.id}</td>
      <td>${user.nombre}</td>
      <td>${user.apellido}</td>
      <td>${user.email}</td>
      <td>${user.edad}</td>
      <td>${user.dni}</td>
      <td>${user.telefono}</td>
      </tr>`);
    }
  }

  form.submit(function (event) {
    event.preventDefault();

    const id = inputId.val();
    const nombre = inputName.val();
    const apellido = inputSurname.val();
    const email = inputEmail.val();
    const edad = inputAge.val();
    const dni = inputDni.val();
    const telefono = inputPhone.val();

    const user = new User(id, nombre, apellido, email, edad, dni, telefono);

    saveToStorage("users", user); //Guardo user en storage
    tableBody.empty(); //Borro el tbody de la tabla
    drawTable(); //Dibujo tabla actualizada

    //Pongo todos los input en blanco tras agregar a la tabla y storage.
    for (const input of allInputs) {
      input.value = "";
    }
  });
});
$(document).ready(function () {
  const tableBody = $("#tableBody");
  const tableHead = $("#tableHead");
  if (getUserFromStorage("users")) {
    drawTable();
  } else {
    tableHead.hide();
  }

  console.log($("#nombre").val());
  console.log($("#apellido").val());
  console.log($("#email").val());
  console.log($("#edad").val());
  console.log($("#id").val());
  console.log($("#dni").val());
  console.log($("#telefono").val());
  console.log($("#ingresantes").val());
  console.log($("#aplicantes").val());

  const form = $("#formulario");
  const inputName = $("#nombre");
  const inputSurname = $("#apellido");
  const inputEmail = $("#email");
  const inputAge = $("#edad");
  const inputId = $("#id");
  const inputDni = $("#dni");
  const inputPhone = $("#telefono");
  allInputs = document.querySelectorAll("input");
  // pronto usare esto para dar resultados sobre la compra de boletos
  // const inputIncoming = $("#ingresantes");
  // const inputApplicants = $("#aplicantes");
  //---------------------------------------------------------------
  function User(id, nombre, apellido, email, edad, dni, telefono) {
    this.id = id;
    this.nombre = nombre;
    this.apellido = apellido;
    this.email = email;
    this.edad = edad;
    this.id = id;
    this.dni = dni;
    this.telefono = telefono;
  }

  let listUser = [];

  if (getUserFromStorage("users")) {
    listUser = getUserFromStorage("users");
  }

  function saveToStorage(key, user) {
    listUser.push(user);
    localStorage.setItem(key, JSON.stringify(listUser));
  }

  function getUserFromStorage(key) {
    if (localStorage.getItem(key)) {
      return JSON.parse(localStorage.getItem(key));
    }
  }

  function drawTable() {
    for (const user of getUserFromStorage("users")) {
      tableHead.show();
      tableBody.append(`<tr>
      <td>${user.id}</td>
      <td>${user.nombre}</td>
      <td>${user.apellido}</td>
      <td>${user.email}</td>
      <td>${user.edad}</td>
      <td>${user.dni}</td>
      <td>${user.telefono}</td>
      </tr>`);
    }
  }

  form.submit(function (event) {
    event.preventDefault();

    const id = inputId.val();
    const nombre = inputName.val();
    const apellido = inputSurname.val();
    const email = inputEmail.val();
    const edad = inputAge.val();
    const dni = inputDni.val();
    const telefono = inputPhone.val();

    const user = new User(id, nombre, apellido, email, edad, dni, telefono);

    saveToStorage("users", user); //Guardo user en storage
    tableBody.empty(); //Borro el tbody de la tabla
    drawTable(); //Dibujo tabla actualizada

    //Pongo todos los input en blanco tras agregar a la tabla y storage.
    for (const input of allInputs) {
      input.value = "";
    }
  });
});
$(document).ready(function () {
  const tableBody = $("#tableBody");
  const tableHead = $("#tableHead");
  if (getUserFromStorage("users")) {
    drawTable();
  } else {
    tableHead.hide();
  }

  console.log($("#nombre").val());
  console.log($("#apellido").val());
  console.log($("#email").val());
  console.log($("#edad").val());
  console.log($("#id").val());
  console.log($("#dni").val());
  console.log($("#telefono").val());
  console.log($("#ingresantes").val());
  console.log($("#aplicantes").val());

  const form = $("#formulario");
  const inputName = $("#nombre");
  const inputSurname = $("#apellido");
  const inputEmail = $("#email");
  const inputAge = $("#edad");
  const inputId = $("#id");
  const inputDni = $("#dni");
  const inputPhone = $("#telefono");
  const allInputs = document.querySelectorAll("input");
  // pronto usare esto para dar resultados sobre la compra de boletos
  // const inputIncoming = $("#ingresantes");
  // const inputApplicants = $("#aplicantes");
  //---------------------------------------------------------------
  function User(id, nombre, apellido, email, edad, dni, telefono) {
    this.id = id;
    this.nombre = nombre;
    this.apellido = apellido;
    this.email = email;
    this.edad = edad;
    this.id = id;
    this.dni = dni;
    this.telefono = telefono;
  }

  let listUser = [];

  if (getUserFromStorage("users")) {
    listUser = getUserFromStorage("users");
  }

  function saveToStorage(key, user) {
    listUser.push(user);
    localStorage.setItem(key, JSON.stringify(listUser));
  }

  function getUserFromStorage(key) {
    if (localStorage.getItem(key)) {
      return JSON.parse(localStorage.getItem(key));
    }
  }

  function drawTable() {
    for (const user of getUserFromStorage("users")) {
      tableHead.show();
      tableBody.append(`<tr>
      <td>${user.id}</td>
      <td>${user.nombre}</td>
      <td>${user.apellido}</td>
      <td>${user.email}</td>
      <td>${user.edad}</td>
      <td>${user.dni}</td>
      <td>${user.telefono}</td>
      </tr>`);
    }
  }

  form.submit(function (event) {
    event.preventDefault();

    const id = inputId.val();
    const nombre = inputName.val();
    const apellido = inputSurname.val();
    const email = inputEmail.val();
    const edad = inputAge.val();
    const dni = inputDni.val();
    const telefono = inputPhone.val();

    const user = new User(id, nombre, apellido, email, edad, dni, telefono);

    saveToStorage("users", user); //Guardo user en storage
    tableBody.empty(); //Borro el tbody de la tabla
    drawTable(); //Dibujo tabla actualizada

    //Pongo todos los input en blanco tras agregar a la tabla y storage.
    for (const input of allInputs) {
      input.value = "";
    }
  });
});
Agrego información sobre lo realizado.
Origen Enlace
Luis S. Romero
  • 3.2k
  • 1
  • 5
  • 14
Loading
Origen Enlace
Luis S. Romero
  • 3.2k
  • 1
  • 5
  • 14
Loading