0

Buen dia,

tengo problemas al tomar el valor de los input cuando se generan dinamicamente.

lo que intento hacer es lo siguiente:

que cuando yo selecione que quiero 3 inputs se generen dichos inputs, pero cuando yo presione "guardar" los campos articulos y cantidades se guarden en un arreglo. me gustaria que los inputs articulos se guarden en un arreglo y los inputs cantidades se guarden en otro arreglo o no importa que se guarde todo en un arreglo. todo esto utilizando jquery para no recargar la pagina.

$('#cantidad').on('click',function(){

  var contador=$('#cantidad').val();
  var input="";
  for(var i=0; i<contador; i++)
  {
    input+="<br><input type='text' id='nombre' placeholder='Articulo' /> <input type='text' id='cantidad' placeholder='Cantidad'/>";
  }
  input+="<br><button>Guardar</button>";
  $('#content').html(input);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<input type='number' min='0' id='cantidad' />
<div id='content'></div>

1
  • Si eres principiante te recomiiendo que manejes todos los inputs (los generados de forma dinamica) dentro de un form. Luego puedes manipular ese form con javascript. Para que seria el boton guardar? Cuando ingresas algo en un input y das enter lo que escribiste se guarda en el value del input. Puedes entonces usar el evento on change para en el momento que das enter se guarde en un arreglo (push) lo que hay en el value Commented el 14 mar. 2022 a las 22:36

2 respuestas 2

2

No estoy muy seguro si lo que pides es esto:

$('#cantidad').on('click', function() {

  var contador = $('#cantidad').val();
  var input = "";
  for (var i = 0; i < contador; i++) {
    input += "<br><input type='text' id='nombre_" + i + "' placeholder='Articulo' /> <input type='text' id='cantidad_" + i +"' placeholder='Cantidad'/>";
  }
  input += "<br><button id='guardar'>Guardar</button>";
  $('#content').html(input);
});

$('body').on('click', function(event) {
  if (event.target.id == "guardar") {
        let nombres = []
    let cantidades = []
    $('[id*="nombre_"]').each(function(key, value) {
      nombres.push(value.value);
    });
    $('[id*="cantidad_"]').each(function(key, value) {
      cantidades.push(value.value);
    });
    console.log(nombres)
    console.log(cantidades)
  }
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<input type='number' min='0' id='cantidad' />
<div id='content'></div>

Cambios realizados

  1. Se han modificado los id de los inputs de estos:
id='nombre'
id='cantidad'

a estos

id='nombre_" + i + "'
id='cantidad_" + i + "'

porque no deben haber nunca id repetidos.

Y luego se ha agregado la escucha del evento click para que cuando se pulse el botón guardar recorreremos todos esos id y los iremos poniendo en unos arrays que finalmente imprimiremos en consola, de este modo:

    $('body').on('click', function(event) {
      if (event.target.id == "guardar") {
        let nombres = []
        let cantidades = []
        $('[id*="nombre_"]').each(function(key, value) {
          nombres.push(value.value);
        });
        $('[id*="cantidad_"]').each(function(key, value) {
          cantidades.push(value.value);
        });
        console.log(nombres)
        console.log(cantidades)
      }
    })

Debido a que el botón con el id guardar no aparece hasta que se pulsa el botón, estamos poniendo a la escucha todos los clicks del documento, pero solo actuamos cuando se trata del id="guardar" mediante el condicional.

Los arrays finales que creo que pides son nombres y cantidades.

Ya nos diras si eso es lo que buscabas.

2
  • muchas gracias eso es lo que intento hacer... :D
    – Ferns
    Commented el 15 mar. 2022 a las 14:10
  • Perfecto, me alegro, no estoy muy seguro para que lo quieres así, pero funciona :-) Si esta respuesta soluciona tu pregunta deberias aceptarla para que tu pregunta no quede pendiente eternamente, gracias!
    – masterguru
    Commented el 15 mar. 2022 a las 14:13
1

Ya di una respuesta muy parecida aqui,introducir la descripción del enlace aquí en vez de sumar has un push de cada pisición

document.getElementById("formmath").addEventListener("submit",function checkForm(){
event.preventDefault();
var input = document.getElementsByName('unidades[]');
var valueinput = document.getElementsByName('valorUnit[]');

var unidades=0;
var valor=0;
   
            for (var i = 0; i < input.length; i++) {
               unidades=unidades+ parseFloat(input[i].value);
               valor=valor+ parseFloat(valueinput[i].value);
               
            }
            console.log(unidades);
            console.log(valor);
           
            
            
    });
<form id="formmath">
    <input type="text" class="form-control" placeholder="unidades" name="unidades[]">
    <input type="text" class="form-control" placeholder="valor" name="valorUnit[]">
<br><br/>
    <input type="text" class="form-control" placeholder="unidades" name="unidades[]">
    <input type="text" class="form-control" placeholder="valor" name="valorUnit[]">
<input type="submit"/>
</form>

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.