1

con el siguiente código permito la creación o eliminación dinamicamente de input text

$(document).ready(function () {
    var itemNumero = 0;

    $('#btn-creaAcceso').click(function () {
        if (itemNumero <= 100) {
            itemNumero = itemNumero + 1;
            var acceso = document.getElementById("acceso");
            var input_item = document.createElement("input");
            input_item.type = 'text';
            $(input_item).addClass('form-control');
            $(input_item).attr('required', true);
            $(input_item).prop('id', 'item' + itemNumero);
            
        }
        acceso.appendChild(input_acceso);
        
    });
        $('#btn-eliminaAcceso').click(function () {
        if (itemNumero != 0) {
            $('#acceso' + itemNumero).remove();
             itemNumero = itemNumero - 1;
        }
    });

Necesito crear y recopilar en una variable todos los input creados dando como nombre el id que se agrego en su creación.

Algo como esto

var infoCliente = 'item1=' + $('#item1').val() +
                  '&item2=' + $('#item2').val() +
                  '&item3=' + $('#item3').val();

Pero no encuentro como verificar el numero de input creados y como tomarlos para crear dinamicamente las variables

5 respuestas 5

1

Te dejo el siguiente ejemplo, si te fijas al momento de crear cada input adicional a la clase form-control tambien se le agrega la clase input-item de este modo se puede obtener todos los input creados:

$(document).ready(function () {
  var itemNumero = 0;

  $('#btn-creaAcceso').click(function () {
    if (itemNumero <= 100) {
      itemNumero = itemNumero + 1;
      var acceso = document.getElementById("acceso");
      var input_item = document.createElement("input");
      input_item.type = 'text';
      $(input_item).addClass('form-control input-item');
      $(input_item).attr('required', true);
      $(input_item).prop('id', 'item' + itemNumero);
    }
    
    acceso.appendChild(input_item);
  });

  $('#btn-eliminaAcceso').click(function () {
    if (itemNumero != 0) {
      $('#item' + itemNumero).remove();
      itemNumero = itemNumero - 1;
    }
  });

  $('#btn-infoCliente').click(function () {
    var arrayItem = [];
    var infoCliente = "";
    
    $('.input-item').each(function() {
      arrayItem.push($(this).attr("id") + "=" + $(this).val());
    });
    
    infoCliente = arrayItem.join("&");
    console.log(infoCliente);
  });
});
<!DOCTYPE html>
 
<html lang="es">
  <head>
  <title>Test</title>
  <meta charset="utf-8" />
</head>
 
<body>
    <button id="btn-creaAcceso">Crear</button>
    <button id="btn-eliminaAcceso">Eliminar</button>
    <button id="btn-infoCliente">Info Cliente</button>
    <div id="acceso"></div>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</body>
</html>

Como se puede apreciar se ha creado un boton con el id btn-infoCliente el cual en su evento click obtiene todo los input con clase input-item y son recorridos por un foreach. Dentro del foreach se extrae el id con la funcion attr y el valor, formando una cadena id=val, la misma se agrega a un array arrayItem y al finalizar se unen todos los item con la funcion join.

Dejo en resumida el click del boton:

$('#btn-infoCliente').click(function () {
    var arrayItem = [];
    var infoCliente = "";

    $('.input-item').each(function() {
      arrayItem.push($(this).attr("id") + "=" + $(this).val());
    });

    infoCliente = arrayItem.join("&");
    console.log(infoCliente);
});

.join(): El método join() une todos los elementos de una matriz (o un objeto similar a una matriz) en una cadena y devuelve esta cadena.

.each(): El método each() está diseñado para que las construcciones de bucles DOM sean concisas y menos propensas a errores. Cuando se le llama itera sobre los elementos DOM que forman parte del objeto jQuery. Lo que es más importante, la devolución de llamada se activa en el contexto del elemento DOM actual, por lo que la palabra clave se refiere al elemento.

1
  • Gracias, al implementarlo a mi código obtuve el resultado que necesitaba.
    – car-onte
    Commented el 9 ene. 2019 a las 14:34
0

Puedes agregar una clase extra a los inputs y luego concatenar los valores con .each() asi:

$(document).ready(function () {
    var itemNumero = 0;
    
    $('#btn-creaAcceso').click(function () {        
        if (itemNumero <= 100) {
            itemNumero = itemNumero + 1;
            var acceso = document.getElementById("acceso");
            var input_item = document.createElement("input");
            input_item.type = 'text';
            $(input_item).addClass('form-control');
            $(input_item).addClass('input-acceso');
            $(input_item).attr('required', true);
            $(input_item).prop('id', 'item' + itemNumero);
            
        }
        acceso.appendChild(input_item);
        
    });
    
    $('#btn-verValor').click(function () {
        var infoCliente = "";
        $(".input-acceso").each(function(i,input) {
          infoCliente += 'item' + (i + 1) + '=' + $('#item' + (i + 1)).val() + '&';
        });
        console.log(infoCliente);
    });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button id="btn-creaAcceso">Crear</button>
<button id="btn-verValor">Ver</button>
<div id="acceso"></div>

0

No puedes crear variables diatónicamente como pretendes. Lo que puedes hacer es ir guardando en un array tus inpus. Aunque me parece que con guardar solo el "id" sería suficiente. Pero te dejo un ejemplo maso menos respetando tu idea. Luego puedes consultar la cantidad de inputs con tu array usando por ejemplo listInputs.length. En este caso estoy guardando el "id" con la key id y el elemento(input) con la key "elem". Saludos!

var totalInputs= 5;
var contenedor = document.getElementById("contenedor");
var listInputs =[];
for(i=0; i<totalInputs; i++){
  let input = document.createElement("input");
  input.setAttribute("id","myInput-"+i);
  input.setAttribute("placeholder","id = myInput-"+i);
  contenedor.appendChild(input);
  let array = {id:"myInput-"+i, elem:input};
  listInputs.push(array);
}
console.log(listInputs);
<div id="contenedor"></div>

0

Simplemente crea un objeto en el top y almacena allí los ids de los inputs.

Map

Puedes usar objetos más complejos como Map. Para esto creas una instancia de Map en el top de tu código:

document.addEventListener('DOMContentLoaded', () => {
  const inputsHistory = new Map()
  // resto de código
})

Añadir:

inputsHistory.set(inputId, input)

Eliminar:

inputsHistory.delete(inputId)

Contar:

const inputsCount = inputsHistory.size

Object

Si prefieres algo más sencillo, puedes usar un objeto literal para llevar la cuenta. Por ejemplo:

const inputsHistory = {}

Añadir:

inputsHistory[inputId] = input

Eliminar:

delete inputsHistory[inputId]

Contar:

const inputsCount = Object.keys(inputsHistory).length

La ventaja de usar un objeto, es que no solo puedes guardar la referencia del HTMLInputElement; también puedes poner una bandera en caso quieras hacer un [soft delete]:

const deleteInputFromHistory = (inputId) => {
  for (let [key, value] of Object.entries(inputsHistory) {
     if (key === inputId) {
       value.deleted = true
     }
  }
}

Así mismo, podrías contar también solo los inputs eliminados:

const countDeleteInputs = () => (
  Object.entries(inputsHistory).filter(info => info.deleted).length
)
0

Podrías crear un array:

var infoCliente = []

y luego agregar cada elemento nuevo con push:

item = 'item'+n
cliente = {};
cliente[item] = $('#'+item).val();
infoCliente.push(cliente)
n++;

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.