0

Tengo este array en javascript y quiero elejir la propiedad "id" del elemento prenda que es un campo input para asi poder asir la peticion ajax y consultar con la hoja php.

detalle de la salida

function agregarDetalle(idarticulo,articulo,precio_venta)
  {
    var cantidad=1;
    var descuento=0;
    var prenda='';

    if (idarticulo!="")
    {
        var subtotal=cantidad*precio_venta;
        var fila='<tr class="filas" id="fila'+cont+'">'+
        '<td><button type="button" class="btn btn-danger" onclick="eliminarDetalle('+cont+')">X</button></td>'+
        '<td><input type="hidden" name="idarticulo[]" value="'+idarticulo+'">'+articulo+'</td>'+
        '<td><input type="text" style="width:80px;" id="prenda'+cont+'" name="prenda[]">'+prenda+' <button type="button" onclick="revisarDespacho('+document.getElementById('prenda'+cont+).value()+','+idarticulo+')" class="btn btn-info"> <i class="fa fa-check"></i> </button></td>'+
        '<td><input type="number" name="cantidad[]" id="cantidad[]" value="'+cantidad+'"></td>'+
        '<td><input type="number" name="precio_venta[]" id="precio_venta[]" value="'+precio_venta+'"></td>'+
        '<td><input type="number" name="descuento[]" value="'+descuento+'"></td>'+
        '<td><span name="subtotal" id="subtotal'+cont+'">'+subtotal+'</span></td>'+
        '<td><button type="button" onclick="modificarSubototales()" class="btn btn-info"><i class="fa fa-refresh"></i></button></td>'+
        '</tr>';
        cont++;
        detalles=detalles+1;
        $('#detalles').append(fila);
        modificarSubototales();
        //document.getElementById("prenda[]").onchange = function() {revisarDespacho(idarticulo)}
        console.log (idarticulo)
    }
    else
    {
        alert("Error al ingresar el detalle, revisar los datos del artículo");
    }
  }

peticion ajax:

    function revisarDespacho(prenda,idventa)
{       
            $.post("../ajax/despacho.php?op=consultar", {prenda, idventa}, function(data){
                bootbox.alert(data);
                //tabla.ajax.reload();
                console.log(data);
                console.log(prenda,idventa);
            }); 
}

requerimiento al utilizar el evento onclick no me captura el document.getElementById('prenda'+cont+).value() que es el id del input prenda con su contador de filas, agradezco su valiosa colaboracion es algo importante para mi y no se como resolverlo

2
  • 1
    Atento con esta linea amigo , <input type="text" style="width:80px;" id="prenda'+cont+'" name="prenda[]"> recuerda que si lees el value de un input cuando lo generes debes integrearlo en tu código --- <input type="text" style="width:80px;" id="prenda'+cont+'" name="prenda[]" value="tu valor">
    – frank_ivan
    Commented el 20 ene. 2021 a las 1:38
  • amigo estuvo bien esa pero aun me arroja error de ')' en... document.getElementById('prenda'+cont+).value()... y ya revise pero no encuentro la solucion Commented el 20 ene. 2021 a las 3:37

2 respuestas 2

0

Dices que te da error ')' en

document.getElementById('prenda'+cont+).value()

si te fijas tienes un error de sintaxis en ('prenda'+cont+) o bien añades dos comillas después del '+' o quitas el '+'

Resultado:

document.getElementById('prenda'+cont).value()
0

Resumiendo: tienes una tabla, y en esa tabla filas, y cada fila tiene asociado un índice indexFila y un idArticulo (tú le pusiste cont en vez de indexFila pero me tomaré esa licencia), con los cuales vas armando el name o el id de distintos inputs/controles que se dibujan en la fila.

La tercera columna tiene un campo de texto con id prenda<indexFila> o sea tendrás prenda1, prenda2, prenda3, etc. Y tiene un botón cuyo click llama a una funcion revisarDespacho que se ejecutará tomando como argumentos el valor del mentado campo de texto y el idArticulo asociado a la fila. Supongamos que es la fila 7 y el artículo 3, lo que insertas tiene en simple la forma

'<input type="text" id="prenda7" name="prenda[]">'+
'<button type="button" onclick="revisarDespacho('+document.getElementById('prenda7').value()+','+3+')"></button>'

Fíjate en la declaración de este handler:

onclick="revisarDespacho('+document.getElementById('prenda7').value()+','+3+')"

Está generando dos problemas: primero, getElementById retorna un Element, de entre los cuales un input no tiene un método value como jQuery sino un atributo value

 console.log( document.getElementById('prenda7').value() ); // mal
 Uncaught TypeError: document.getElementById(...).value is not a function

 console.log( document.getElementById('prenda7').value ); // bien

segundo y más importante, estás concatenando en el html el valor del input prenda7 (que todavía no existe) y no una referencia textual. Dado que document.getElementById('prenda7') es null y null no tiene un atributo value debieras estar viendo un error en tu consola.

El handler debiera ser:

onclick="revisarDespacho(document.getElementById('prenda7').value, 3)"

Como gran parte de la confusión te está pasando por la mezcla de comillas dobles y simples, te recomiendo familiarizarte con el uso de template literals que te permite usar comillas dobles y simples sin escapar, saltos de línea e interpolación de variables y fórmulas. En esa celda, por ejemplo, teniendo prenda (hoy vacío), indexFila y un idProducto, se escribiría como

let celda = `<td>
    <input type="text" style="width:80px;" id="prenda${indexFila}" name="prenda[]">${prenda} 
    <button type="button" onclick="revisarDespacho(document.getElementById('prenda${indexFila}').value,${idarticulo})" class="btn btn-info"> 
    <i class="fa fa-check"></i> 
    </button>
</td>`;

Te dejo un ejemplo funcionando en donde separé las modificaciones al dom (añadir tr y a cada tr sus td) de la función que genera las celdas propiamente tales, las cuales de paso manejé como array para romper en piezas manejables el texto tan extenso.

let cont = 0,
  detalles = 0;
const tabla = document.querySelector('#detalles');

function getCeldas(idarticulo, articulo, precio_venta, indexFila, cantidad = 1) {
  let descuento = 0,
    prenda = '',
    subtotal = cantidad * precio_venta;

  return [`<td>
  <button type="button" class="btn btn-danger" onclick="eliminarDetalle(${indexFila})">X</button>
  </td>`,
    `<td>
    <input type="hidden" name="idarticulo[]" value="${idarticulo}">${articulo}
    </td>`,
    `<td>
    <input type="text" style="width:80px;" id="prenda${indexFila}" name="prenda[]" value="ejemplo ${indexFila}" >${prenda} 
        <button type="button" onclick="revisarDespacho(document.getElementById('prenda${indexFila}').value,${idarticulo})" class="btn btn-info"> 
        <i class="fa fa-check"></i> 
        </button>
    </td>`,
    `<td class="numeric">
    <input type="number" name="cantidad[]" id="cantidad[]" value="${cantidad}"></td>`,
    `<td class="numeric">
    <input type="number" name="precio_venta[]" id="precio_venta[]" value="${precio_venta}"></td>`,
    `<td class="numeric">
    <input type="number" name="descuento[]" value="${descuento}">
    </td>`,
    `<td>
    <span name="subtotal" id="subtotal${indexFila}">${subtotal}</span>
    </td>`,
    `<td>
    <button type="button" onclick="modificarSubototales()" class="btn btn-info">
    <i class="fa fa-refresh"></i></button>
    </td>`
  ];
}

function revisarDespacho(prendas, idArticulo) {
  console.log({
    prendas,
    idArticulo
  });
}

function modificarSubototales() {
  console.log('no sé qué hace esto');
}

function agregarDetalle(idarticulo, articulo, precio_venta, cantidad = 1) {
  let fila = document.createElement('tr'),
    celdas = getCeldas(idarticulo, articulo, precio_venta, cont, cantidad);
  fila.id = `fila${cont}`;
  fila.className = 'filas';
  celdas.forEach(celda => {
    $(fila).append(celda);
  })
  tabla.appendChild(fila);
  cont++;
  detalles = detalles + 1;
}

$(document).ready(function() {
  agregarDetalle(1, 'Camiseta', 99, 2);
  agregarDetalle(2, 'Pantalón', 230);
});
#detalles {
  min-width: 300px;
}

#detalles .filas {
  height: 1em;
  min-width: 50px;
}

#detalles th {
  font-size: 0.95em
}

#detalles th,
#detalles td {
  border: 1px solid #ccc;
}

td.numeric input {
  width: 60px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://kit.fontawesome.com/7cfb5e92f4.js" crossorigin="anonymous"></script>

<table id="detalles">
  <thead>
    <th>Quitar</th>
    <th>Articulo</th>
    <th>Prenda</th>
    <th>Cantidad</th>
    <th>Precio</th>
    <th>Descuento</th>
    <th>Subtotal</th>
    <th>Actualizar</th>
  </thead>
  <tbody></tbody>
</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.