0

Como he puesto en el título, resulta que tengo una parte de código, en jQuery que al dar click añadir un tr con los inputs y los añado de forma dinámica, hasta aquí bien, pero luego he empezado a tener complicaciones, quiero pasar el valor de la variable incre concatenarlo con la clase de esa forma a la hora de añadir otro tr con inputs no me coge el valor del primer input.

<ul class="nav">
                          <li class="nav-item add_referencia" title="añadir">
                              <a class="nav-link">
                                  <img src="../epanel/imagenes/ventas/add.png" />
                              </a>
                          </li>
                          <li class="nav-item update" title="modificar">
                              <a class="nav-link">
                                  <img src="../epanel/imagenes/ventas/editar.png" />
                              </a>
                          </li>
                          <li class="nav-item" title="eliminar">
                              <a class="nav-link">
                                  <img src="../epanel/imagenes/ventas/eliminar.png" />
                              </a>
                          </li>
                          <li class="nav-item" title="exportar">
                              <a class="nav-link">
                                  <img src="../epanel/imagenes/ventas/datos-adicionales.png" />
                              </a>
                          </li>
                          <li class="nav-item view" title="visualizar">
                              <a class="nav-link">
                                <img src="../epanel/imagenes/ventas/referencia.png" />
                              </a>
                          </li>
                     </ul>
<script type="text/javascript">
     increment = 0;
    $('.add_referencia').click(function(){
        
        RowInput = '<tr><td><input class="referencia_prod_'+ increment+'" type="text" name="referencia"  value="" /></td>' +       
        '<td><input class="erp-table-input descripcion col-md-12" type="text" name="descripcion" value="" /></td>' +
        '<td><input class="erp-table-input col-md-12" type="text" name="iva" value="" /></td>' +
        '<td><input class="erp-table-input col-md-12" type="text" name="cantidad" value="" /></td>'+
        '<td><input class="erp-table-input precio col-md-12" type="text" name="precio" value="" /></td>'+
        '<td><input class="erp-table-input col-md-12" type="text" name="dto_por" value="" /></td>'+
        '<td><input class="erp-table-input col-md-12" type="text" name="dto_lineal" value="" /></td>'+
        '<td><input class="erp-table-input col-md-12" type="text" name="total" value="" /></td>'+
        '</tr>';
        increment++;
        $('.presupuesto').append(RowInput);
    
    });

    $('.presupuesto').on('keyup', '.referencia_prod_'+incre, function(e){
      
        $(this).val();

     });
</script>
No sé por qué, pero no me lo coge, quería decir que es mi primer post, ya se nota, lo digo por si hay alguna forma específica de poner el código o algo, no estaría más saber para más adelante. Espero que alguien me pueda ayudar, ya que no domino muy bien el jQuery y gracias
2
  • Hola, podrías compartir tu HTML?, intento hacer pruebas pero sin el HTML no puedo concluirlo del todo.
    – LB17
    Commented el 20 abr. 2022 a las 15:59
  • De cualquier manera de te dejaré una posible solución en las respuestas.
    – LB17
    Commented el 20 abr. 2022 a las 16:01

2 respuestas 2

0

Intenta con esto:

increment = 0;
$('.add_referencia').click(function(){
    RowInput = '<tr><td><input class="referencia_prod_'+ increment+'" type="text" name="referencia"  value="" /></td>' +       
    '<td><input class="erp-table-input descripcion col-md-12" type="text" name="descripcion" value="" /></td>' +
    '<td><input class="erp-table-input col-md-12" type="text" name="iva" value="" /></td>' +
    '<td><input class="erp-table-input col-md-12" type="text" name="cantidad" value="" /></td>'+
    '<td><input class="erp-table-input precio col-md-12" type="text" name="precio" value="" /></td>'+
    '<td><input class="erp-table-input col-md-12" type="text" name="dto_por" value="" /></td>'+
    '<td><input class="erp-table-input col-md-12" type="text" name="dto_lineal" value="" /></td>'+
    '<td><input class="erp-table-input col-md-12" type="text" name="total" value="" /></td>'+
    '</tr>';
    increment++;
    $('.presupuesto').append(RowInput);

});
<button class="add_referencia">AGREGAR</button>
<div class="presupuesto"></div

Es que el incremento si que lo estabas haciendo, pero, lo almacenabas en la variable incre, y pues esa variable no está definida aún, la defines hasta lo ultimo del código. Con lo que te puse te debería funcionar.

Posible solución 2:

increment = 0;
$('.add_referencia').click(function(){
    RowInput = '<tr><td><input class="referencia_prod_'+ increment+' referenciaPr" type="text" id="referencia_prod_' + increment + '" name="referencia"  value="" /></td>' +       
    '<td><input class="erp-table-input descripcion col-md-12" type="text" name="descripcion" value="" /></td>' +
    '<td><input class="erp-table-input col-md-12" type="text" name="iva" value="" /></td>' +
    '<td><input class="erp-table-input col-md-12" type="text" name="cantidad" value="" /></td>'+
    '<td><input class="erp-table-input precio col-md-12" type="text" name="precio" value="" /></td>'+
    '<td><input class="erp-table-input col-md-12" type="text" name="dto_por" value="" /></td>'+
    '<td><input class="erp-table-input col-md-12" type="text" name="dto_lineal" value="" /></td>'+
    '<td><input class="erp-table-input col-md-12" type="text" name="total" value="" /></td>'+
    '</tr>';
    increment++;
    $('.presupuesto').append(RowInput);

});

 $('.presupuesto').on('keyup', '.referenciaPr', function(){
  
    pres(this.id)

 }); 

function pres(long_id){
  var id = long_id.split("_").slice(-1);
  refer = 
  console.clear()
  $('#referencia_prod_' + id).val()
}
<ul class="nav">
  <li class="nav-item add_referencia" title="añadir">
    <a class="nav-link">
      <img src="https://i.ibb.co/0qjp1RL/Logo.png" />
    </a>
  </li>
  <li class="nav-item update" title="modificar">
    <a class="nav-link">
      <img src="../epanel/imagenes/ventas/editar.png" />
    </a>
  </li>
  <li class="nav-item" title="eliminar">
    <a class="nav-link">
      <img src="../epanel/imagenes/ventas/eliminar.png" />
    </a>
  </li>
  <li class="nav-item" title="exportar">
    <a class="nav-link">
      <img src="../epanel/imagenes/ventas/datos-adicionales.png" />
    </a>
  </li>
  <li class="nav-item view" title="visualizar">
    <a class="nav-link">
      <img src="../epanel/imagenes/ventas/referencia.png" />
    </a>
  </li>
</ul>
<div class="presupuesto"></div

Posible solución 3(Espero sea la última x'D):

increment = 0;
$('.add_referencia').click(function(){
    RowInput = '<tr><td><input class="referencia_prod_'+ increment+' referenciaPr" type="text" id="referencia_prod_' + increment + '" name="referencia"  value="" /></td>' +       
    '<td><input class="erp-table-input descripcion col-md-12" type="text" name="descripcion" value="" /></td>' +
    '<td><input class="erp-table-input col-md-12" type="text" name="iva" value="" /></td>' +
    '<td><input class="erp-table-input col-md-12" type="text" name="cantidad" value="" /></td>'+
    '<td><input class="erp-table-input precio col-md-12" type="text" name="precio" value="" /></td>'+
    '<td><input class="erp-table-input col-md-12" type="text" name="dto_por" value="" /></td>'+
    '<td><input class="erp-table-input col-md-12" type="text" name="dto_lineal" value="" /></td>'+
    '<td><input class="erp-table-input col-md-12" type="text" name="total" value="" /></td>'+
    '</tr>';
    increment++;
    $('.presupuesto').append(RowInput);

});

 $('.presupuesto').on('keyup', '.referenciaPr', function(){
   console.log($(this).val())
 });

10
  • Buenas @LB17, si disculpa como es una imagen que al dar click se genera pues pense que hacia falta, si lo que me comentas me di cuenta y lo tenia bien, creo que no me explicado bien, el problema esta en cuando esta generado y escribo dentro del ('.presupuesto').on(..., me tendria que detectar lo que he escrito pero no lo hace solo detecta el primer campo que se ha creado. pd: el codigo esta en php no se si te sirve para pasartelo
    – moha
    Commented el 20 abr. 2022 a las 16:15
  • Vale, entonces edita tu pregunta con lo que me acabas de comentar y de paso agrega tu código html, así si yo no te puedo ayudar, alguien más lo hace.
    – LB17
    Commented el 20 abr. 2022 a las 16:18
  • perfecto, lo hare y gracias por responder
    – moha
    Commented el 20 abr. 2022 a las 16:21
  • Vale, después de tanto intento e intento:'), logré llegar al resultado que quizá buscas. Dejaré el código en la respuesta y si te sirve y es lo que quieres, entonces me comentas para explicarte que fue lo que hice.
    – LB17
    Commented el 20 abr. 2022 a las 17:14
  • 1
    merci de todas formas, ya lo he conseguido, pondre la respuesta por si le es de ayuda a alguien en alguna ocasion
    – moha
    Commented el 22 abr. 2022 a las 11:55
0

ya que el problema de que no coja el valor de la variable id, hice lo siguiente

codigo:

increment = 0;
$('.add_referencia').on('click', function(){
    
    RowInput = '<tr><td><input class="referencia_prod_'+increment+' referenciaPr" type="text" name="referencia" id="referencia_prod_'+increment+'"  value="" /></td>' +       
    '<td><input class="erp-table-input descripcion_'+increment+' descripcion col-md-12" type="text" name="descripcion" value="" /></td>' +
    '<td><input class="erp-table-input iva_'+increment+' col-md-12" type="text" name="iva" value="" /></td>' +
    '<td><input class="erp-table-input cantidad_'+increment+' col-md-12" type="text" name="cantidad" value="" /></td>'+
    '<td><input class="erp-table-input precio_'+increment+' col-md-12" type="text" name="precio" value="" /></td>'+
    '<td><input class="erp-table-input dto_por_'+increment+' col-md-12" type="text" name="dto_por" value="" /></td>'+
    '<td><input class="erp-table-input dto_lineal_'+increment+' col-md-12" type="text" name="dto_lineal" value="" /></td>'+
    '<td><input class="erp-table-input total_'+increment+' col-md-12" type="text" name="total" value="" /></td>'+
    '</tr>';
    id = increment;
    increment++;
   
  
    $('.presupuesto').append(RowInput);
    
});

 $('.presupuesto').on('click', function(){
 // al pasarle la variable id si que la pasa y coge el campo que se esta escribiendo sin dar conflicto con el anterior
  elementoRef =  $(this).find('.referencia_prod_'+id);

    $('td').on('keyup', ".referencia_prod_"+id, function(e){
    // aqui dontro controlar lo que esribe el usuario y luego lo pasas por ajax o como te guste
    $(elementoRef).val(valor obtenido por ajax);
    
    });

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.