2

¿Cómo puedo obtener los valores de mi tabla llenada con un for en Twig?

Mi tabla HTML:

     {% for vs in detalle %}
       <tr id="fila{{cont}}">
            <td><input name="cantidad_ingreso[]" value="{{vs.cantidad}}" style="width: 40%;"></td>
            <td><input name="precio_compra[]" value="{{vs.precioventa}}" style="width: 40%;"></td>
            <td><input name="articulo[]" value="{{vs.articulo}}"></td> 
       </tr>
     {% endfor %}
             

Sí, los name funcionan ya los capturar los valores con un post y PHP y funciona de la siguiente forma:

Controlador PHP:

    $cantidad_venta=$request->get('cantidad_ingreso'); //array
    $precio_venta=$request->get('precio_compra');  //array  
    $art=$request->get('articulo'); 

Pero trato de capturar los valores con JavaScript y me tira error:

Código JavaScript:

function cosas()
{
    ci = $("#cantidad_ingreso").val();
    console.log(ci);
}

Error en la consola:

Captura de pantalla de la excepción JavaScript

¿Es posible hacer lo que deseo?

1
  • ¿Pudiste comprobar si mi respuesta solucionó tu problema? Commented el 26 oct. 2021 a las 6:50

1 respuesta 1

2

El problema que tienes es que estás buscando un elemento por su id y, en tu caso, dicho id no existe:

<input name="cantidad_ingreso[]" value="{{vs.cantidad}}" style="width: 40%;">

Tienes dos soluciones:

  • Usar el selector adecuado (input[name="cantidad_ingreso"]).
  • Poner un id al elemento.

La segunda solución no es adecuada cuando vas a tener múltiples elementos iguales, uno por cada registro de la base de datos.

En ese caso te queda la primera opción y, además, no obtendrás un único valor, si no un valor por cada registro de la base de datos, por lo que tendrás que iterar por cada elemento.

Aquí tienes un ejemplo:

/* Obtenemos todos los "input" que deseamos */
const cantidad_ingreso = document.querySelectorAll(
    'input[name="cantidad_ingreso[]"]'
);

/* Iteramos cada uno de ellos */
cantidad_ingreso.forEach((elemento) => {
  /* Mostramos el "id" del <tr> superior y el valor del elemento */
  console.log(
    elemento.parentNode.parentNode.id,
    elemento.value
  );
});
<table border="1">
  <tr id="fila1">
    <td><input name="cantidad_ingreso[]" value="2" style="width: 40%;"></td>
    <td><input name="precio_compra[]" value="30" style="width: 40%;"></td>
    <td><input name="articulo[]" value="Artículo 1"></td> 
  </tr>
  <tr id="fila2">
    <td><input name="cantidad_ingreso[]" value="12" style="width: 40%;"></td>
    <td><input name="precio_compra[]" value="20" style="width: 40%;"></td>
    <td><input name="articulo[]" value="Artículo 2"></td> 
  </tr>
  <tr id="fila3">
    <td><input name="cantidad_ingreso[]" value="8" style="width: 40%;"></td>
    <td><input name="precio_compra[]" value="50" style="width: 40%;"></td>
    <td><input name="articulo[]" value="Artículo 3"></td> 
  </tr>
</table>

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.