Guardar datos en array mediante JQuery

publicado por: Anonymous

¡Buenas!

Estoy intentando crear una especie de formulario.

La cosa es que el usuario hace click sobre un botón y le aparecen diferentes campos a rellenar (estos campos serán inputs de tipo texto* ).

Una vez rellenado, hace click sobre un nuevo botón que ha aparecido junto a los input text para guardar.

¿Como hago para meter estos campos en un array?¿He de tener el array creado previamente, o lo puedo crear al momento? La idea sería tenerlos en un array para luego acceder a este y coger los datos que me interesen trabajar/mostrar.

_x000D_

_x000D_

$(document).ready(function() {_x000D_
_x000D_
  // JS para crear rutinas estilo POWER_x000D_
_x000D_
  $('#Anyadir-Rutina-btn').click(function() {_x000D_
_x000D_
    // Hacemos aparecer la ventana modal donde rellenamos formulario._x000D_
    $('#Modal-Escribir-Rutina').css({_x000D_
      'display': 'flex',_x000D_
      'height': 'auto',_x000D_
      'width': '80%'_x000D_
    });_x000D_
_x000D_
    // Creamos las variables donde se describen todos los elementos del formulario_x000D_
    var titulo1 = '<input type="text" placeholder="Titulo 1" id="Titulo1" />';_x000D_
    var titulo2 = '<input type="text" placeholder="Título 2" id="Titulo2" />';_x000D_
    var guardarModalBtn = '<input type="button" value="Guardar" id="Guardar-modal-btn" />';_x000D_
_x000D_
    // Insertamos los elementos para que el usuario rellene el formulario_x000D_
    $('#Modal-Escribir-Rutina').append(titulo1);_x000D_
    $('#Modal-Escribir-Rutina').append(titulo2);_x000D_
    $('#Modal-Escribir-Rutina').append(guardarModalBtn);_x000D_
_x000D_
_x000D_
    // Botón guardar. Guarda y muestra los datos escritos en el formulario._x000D_
    $('#Guardar-modal-btn').click(function() {_x000D_
_x000D_
      alert("Ahora debería guardar");_x000D_
_x000D_
    });_x000D_
_x000D_
  });_x000D_
_x000D_
});

_x000D_

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

_x000D_

_x000D_

_x000D_

Kiitos!

solución

Si quieres acceder a los valores del array en cualquier parte del documento JS después de haberlo llenado entonces debes crear la variable como global, y luego por medio del método .push() podrás añadir todos los valores que quieras al array:

_x000D_

_x000D_

$(document).ready(function() {_x000D_
_x000D_
  // JS para crear rutinas estilo POWER_x000D_
  var valores = []; //Declaramos el Array_x000D_
_x000D_
  $('#Anyadir-Rutina-btn').click(function() {_x000D_
_x000D_
    // Hacemos aparecer la ventana modal donde rellenamos formulario._x000D_
    $('#Modal-Escribir-Rutina').css({_x000D_
      'display': 'flex',_x000D_
      'flex-direction':'column',_x000D_
      'height': 'auto',_x000D_
      'width': '80%'_x000D_
    });_x000D_
_x000D_
    // Creamos las variables donde se describen todos los elementos del formulario_x000D_
    var titulo1 = '<input type="text" placeholder="Titulo 1" id="Titulo1" class="form-control"/>';_x000D_
    var titulo2 = '<input type="text" placeholder="Título 2" id="Titulo2" class="form-control"/>';_x000D_
    var guardarModalBtn = '<input type="button" value="Guardar" id="Guardar-modal-btn" class="btn btn-primary"/>';_x000D_
_x000D_
    // Insertamos los elementos para que el usuario rellene el formulario_x000D_
    $('#Modal-Escribir-Rutina').append(titulo1);_x000D_
    $('#Modal-Escribir-Rutina').append(titulo2);_x000D_
    $('#Modal-Escribir-Rutina').append(guardarModalBtn);_x000D_
_x000D_
_x000D_
    // Botón guardar. Guarda y muestra los datos escritos en el formulario._x000D_
    $('#Guardar-modal-btn').click(function() {_x000D_
_x000D_
      var Titulo1 = $("#Titulo1").val();_x000D_
      var Titulo2 = $("#Titulo2").val();_x000D_
      _x000D_
      valores.push(Titulo1, Titulo2); // Llenamos el array con los datos_x000D_
      _x000D_
      console.log(valores);_x000D_
_x000D_
    });_x000D_
_x000D_
  });_x000D_
_x000D_
});

_x000D_

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>_x000D_
_x000D_
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">_x000D_
_x000D_
<button id="Anyadir-Rutina-btn" class="btn btn-primary">Añadir rutina</button>_x000D_
_x000D_
<div id="Modal-Escribir-Rutina"></div>

_x000D_

_x000D_

_x000D_

Pero si lo que quieres es acceder a los datos aún después de refrescar la página entonces deberías usar localStorage:

_x000D_

_x000D_

$(document).ready(function() {_x000D_
_x000D_
  // JS para crear rutinas estilo POWER_x000D_
  $('#Anyadir-Rutina-btn').click(function() {_x000D_
_x000D_
    // Hacemos aparecer la ventana modal donde rellenamos formulario._x000D_
    $('#Modal-Escribir-Rutina').css({_x000D_
      'display': 'flex',_x000D_
      'flex-direction':'column',_x000D_
      'height': 'auto',_x000D_
      'width': '80%'_x000D_
    });_x000D_
_x000D_
    // Creamos las variables donde se describen todos los elementos del formulario_x000D_
    var titulo1 = '<input type="text" placeholder="Titulo 1" id="Titulo1" class="form-control"/>';_x000D_
    var titulo2 = '<input type="text" placeholder="Título 2" id="Titulo2" class="form-control"/>';_x000D_
    var guardarModalBtn = '<input type="button" value="Guardar" id="Guardar-modal-btn" class="btn btn-primary"/>';_x000D_
_x000D_
    // Insertamos los elementos para que el usuario rellene el formulario_x000D_
    $('#Modal-Escribir-Rutina').append(titulo1);_x000D_
    $('#Modal-Escribir-Rutina').append(titulo2);_x000D_
    $('#Modal-Escribir-Rutina').append(guardarModalBtn);_x000D_
_x000D_
_x000D_
    // Botón guardar. Guarda y muestra los datos escritos en el formulario._x000D_
    $('#Guardar-modal-btn').click(function() {_x000D_
_x000D_
      var Titulo1 = $("#Titulo1").val();_x000D_
      var Titulo2 = $("#Titulo2").val();_x000D_
      _x000D_
      localStorage.setItem('Titulo1', Titulo1); // Seteamos los items_x000D_
      localStorage.setItem('Titulo2', Titulo2); // Seteamos los items_x000D_
      _x000D_
      console.log(localStorage.getItem('Titulo1')); // Obtenemos los items antes creados_x000D_
      console.log(localStorage.getItem('Titulo2')); // Obtenemos los items antes creados_x000D_
      _x000D_
    });_x000D_
_x000D_
  });_x000D_
});

_x000D_

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>_x000D_
_x000D_
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">_x000D_
_x000D_
<button id="Anyadir-Rutina-btn" class="btn btn-primary">Añadir rutina</button>_x000D_
_x000D_
<div id="Modal-Escribir-Rutina"></div>

_x000D_

_x000D_

_x000D_

Por razones de seguridad el snippet de SOes no permite ejecutar el localStorage pero si haces la prueba en tu entorno local debería de funcionarte.

Respondido por: Anonymous

Leave a Reply

Your email address will not be published. Required fields are marked *