1

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

$(document).ready(function() {

  // JS para crear rutinas estilo POWER

  $('#Anyadir-Rutina-btn').click(function() {

    // Hacemos aparecer la ventana modal donde rellenamos formulario.
    $('#Modal-Escribir-Rutina').css({
      'display': 'flex',
      'height': 'auto',
      'width': '80%'
    });

    // Creamos las variables donde se describen todos los elementos del formulario
    var titulo1 = '<input type="text" placeholder="Titulo 1" id="Titulo1" />';
    var titulo2 = '<input type="text" placeholder="Título 2" id="Titulo2" />';
    var guardarModalBtn = '<input type="button" value="Guardar" id="Guardar-modal-btn" />';

    // Insertamos los elementos para que el usuario rellene el formulario
    $('#Modal-Escribir-Rutina').append(titulo1);
    $('#Modal-Escribir-Rutina').append(titulo2);
    $('#Modal-Escribir-Rutina').append(guardarModalBtn);


    // Botón guardar. Guarda y muestra los datos escritos en el formulario.
    $('#Guardar-modal-btn').click(function() {

      alert("Ahora debería guardar");

    });

  });

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

Kiitos!

3 respuestas 3

1

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:

$(document).ready(function() {

  // JS para crear rutinas estilo POWER
  var valores = []; //Declaramos el Array

  $('#Anyadir-Rutina-btn').click(function() {

    // Hacemos aparecer la ventana modal donde rellenamos formulario.
    $('#Modal-Escribir-Rutina').css({
      'display': 'flex',
      'flex-direction':'column',
      'height': 'auto',
      'width': '80%'
    });

    // Creamos las variables donde se describen todos los elementos del formulario
    var titulo1 = '<input type="text" placeholder="Titulo 1" id="Titulo1" class="form-control"/>';
    var titulo2 = '<input type="text" placeholder="Título 2" id="Titulo2" class="form-control"/>';
    var guardarModalBtn = '<input type="button" value="Guardar" id="Guardar-modal-btn" class="btn btn-primary"/>';

    // Insertamos los elementos para que el usuario rellene el formulario
    $('#Modal-Escribir-Rutina').append(titulo1);
    $('#Modal-Escribir-Rutina').append(titulo2);
    $('#Modal-Escribir-Rutina').append(guardarModalBtn);


    // Botón guardar. Guarda y muestra los datos escritos en el formulario.
    $('#Guardar-modal-btn').click(function() {

      var Titulo1 = $("#Titulo1").val();
      var Titulo2 = $("#Titulo2").val();
      
      valores.push(Titulo1, Titulo2); // Llenamos el array con los datos
      
      console.log(valores);

    });

  });

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

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

<button id="Anyadir-Rutina-btn" class="btn btn-primary">Añadir rutina</button>

<div id="Modal-Escribir-Rutina"></div>

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

$(document).ready(function() {

  // JS para crear rutinas estilo POWER
  $('#Anyadir-Rutina-btn').click(function() {

    // Hacemos aparecer la ventana modal donde rellenamos formulario.
    $('#Modal-Escribir-Rutina').css({
      'display': 'flex',
      'flex-direction':'column',
      'height': 'auto',
      'width': '80%'
    });

    // Creamos las variables donde se describen todos los elementos del formulario
    var titulo1 = '<input type="text" placeholder="Titulo 1" id="Titulo1" class="form-control"/>';
    var titulo2 = '<input type="text" placeholder="Título 2" id="Titulo2" class="form-control"/>';
    var guardarModalBtn = '<input type="button" value="Guardar" id="Guardar-modal-btn" class="btn btn-primary"/>';

    // Insertamos los elementos para que el usuario rellene el formulario
    $('#Modal-Escribir-Rutina').append(titulo1);
    $('#Modal-Escribir-Rutina').append(titulo2);
    $('#Modal-Escribir-Rutina').append(guardarModalBtn);


    // Botón guardar. Guarda y muestra los datos escritos en el formulario.
    $('#Guardar-modal-btn').click(function() {

      var Titulo1 = $("#Titulo1").val();
      var Titulo2 = $("#Titulo2").val();
      
      localStorage.setItem('Titulo1', Titulo1); // Seteamos los items
      localStorage.setItem('Titulo2', Titulo2); // Seteamos los items
      
      console.log(localStorage.getItem('Titulo1')); // Obtenemos los items antes creados
      console.log(localStorage.getItem('Titulo2')); // Obtenemos los items antes creados
      
    });

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

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

<button id="Anyadir-Rutina-btn" class="btn btn-primary">Añadir rutina</button>

<div id="Modal-Escribir-Rutina"></div>

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.

0

Todo depende de qué quieras hacer con el array: si lo vas a usar en otro momento, guárdalo en una variable declarada fuera de la función. Si lo vas a mostrar (y quizá enviarlo con AJAX a tu servidor) en este instante y no lo vas a volver a necesitar, basta con declararlo en la función y usarlo.

3
  • Pues la cosa es básicamente después mostrarlo en pantalla. Pero había pensado en guardarlos en un array porque esta página se emplea como un "diario", quiero decir que mañana tiene que aparecer lo que apunte mañana pero también recordar el contenido de hoy, y así sucesivamente. Otra idea sería escribir esto en un fichero externo e ir accediendo a él. ¿no? La verdad es que no se como afrontarlo.
    – Lleims
    el 21 dic. 2017 a las 10:56
  • Almacenarlo para sucesivas visitas... O usas localstorage (developer.mozilla.org/es/docs/Web/API/Window/localStorage), que almacena los datos en una memoria no perecedera gestionada por el navegador, o mejor, los almacenas en un servidor, en una base de datos, lo cual también es un problema completamente distinto.
    – delCano
    el 21 dic. 2017 a las 11:35
  • Cada vez que abandonas la página, las variables se borran. O usas el localStorage o lo guardas en el servidor el 21 dic. 2017 a las 11:47
0

Buenas amigo espero esto te ayude saludos.

Para obtener los datos de los input usamos

var titulo1 = $("#titulo1").val()
var titulo2 = $("#titulo2").val()

y después lo único que hacemos es agregarlo al objeto

objeto = {
    titulo1:titulo1,
    titulo2:titulo2
  }

y listo ya tenemos los valores a enviar.

Ejemplo Funcional

$(document).ready(function() {

  // JS para crear rutinas estilo POWER

  $('#Anyadir-Rutina-btn').click(function() {
    // Hacemos aparecer la ventana modal donde rellenamos formulario.
    $('#Modal-Escribir-Rutina').css({
      'display': 'flex',
    });

    // Creamos las variables donde se describen todos los elementos del formulario
    var titulo1 = '<input id="titulo1" type="text" placeholder="Titulo 1" id="Titulo1" />';
    var titulo2 = '<input id="titulo2" type="text" placeholder="Título 2" id="Titulo2" />';
    var guardarModalBtn = '<input type="button" value="Guardar" id="Guardar-modal-btn" />';

    // Insertamos los elementos para que el usuario rellene el formulario
    $('#Modal-Escribir-Rutina').append(titulo1);
    $('#Modal-Escribir-Rutina').append(titulo2);
    $('#Modal-Escribir-Rutina').append(guardarModalBtn);


    // Botón guardar. Guarda y muestra los datos escritos en el formulario.
    objeto = {}
    $('#Guardar-modal-btn').click(function() {
    alert("Ahora debería guardar");
      var titulo1 = $("#titulo1").val()
      var titulo2 = $("#titulo2").val()
      objeto = {
        titulo1:titulo1,
        titulo2:titulo2
      }
      
      console.log(objeto)
    });

  });

});
#Modal-Escribir-Rutina {
  z-index;200;
  background:#fff;
  width:100%;
  height:100%;
  position:fixed;
  display:none;
  top:0px;
  left:0px;
  overflow:hidden;
  flex-direction: column;
    align-items: center;
    justify-content: center;
}
#Modal-Escribir-Rutina input {
  padding:10px;
  margin:5px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="Anyadir-Rutina-btn" type="button" name="button">Abrir Modal</button>
<div id="Modal-Escribir-Rutina">
</div>

Tu Respuesta

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

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