Save data to array using JQuery

Navigation
1

Good morning!

I'm trying to create a kind of form.

The thing is that the user clicks on a button and different fields appear to fill in (these fields will be text-type inputs *).

Once filled out, click on a new button that has appeared next to the input text to save.

How do I put these fields in a array ? Do I have to have the array previously created, or can I create it at the moment? The idea would be to have them in array to then access it and take the data that interests me to work / show. 

$(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!

    
asked by NEA 21.12.2017 в 11:34
source

3 answers

1

If you want to access the values of array in any part of the document JS after filling it, then you must create the variable as global, and then using the .push() method you can add all the values you want at 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>

But if you want to access the data even after refreshing the page then you should use 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>

For security reasons the SOes snippet does not allow localStorage but if you do the test in your local environment it should work.

    
answered by 21.12.2017 / 14:21
source
0

It all depends on what you want to do with the array: if you are going to use it at another time, save it in a variable declared outside of the function. If you are going to show it (and maybe send it with AJAX to your server) at this moment and you will not need it again, just declare it in the function and use it.

    
answered by 21.12.2017 в 11:51
0

Good friend, I hope this will help you.

To obtain the data of input we use 

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

and then the only thing we do is add it to objeto 

objeto = {
    titulo1:titulo1,
    titulo2:titulo2
  }

and now we have the values to send.

Functional Example 

$(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>
    
answered by 21.12.2017 в 13:36
adding cells with while in PHP grouped Javascript without extension .js? [closed]