Tengo un formulario web que permite a los usuarios ingresar detalles para crear un envío para 1 artículo más. Ingresan los campos de dirección desde/hasta y luego hay una tabla donde pueden ingresar 1 o más filas para que los artículos se incluyan en el envío.
Una de las columnas de la tabla es para el ID del producto, que es un valor que se devuelve de una consulta de la base de datos realizada al ingresar un código en otra celda de la tabla. No queremos que los usuarios ingresen o editen esto, por lo que lo incluiremos como una entrada oculta, pero también nos gustaría mostrárselo al usuario.
Así es como se ve una de las filas de la tabla:
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" /> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> <table id="shipmentItems" class="table table-condensed table-striped table-bordered"> <thead> <th class="text-center" scope="col" width="15%">Product ID</th> <th class="text-center" scope="col" width="15%">Product Code</th> <th class="text-center" scope="col" width="10%">Qty</th> <th class="text-center" scope="col" width="55%">Description</th> <th class="text-center" scope="col" width="5%"></th> </thead> <tbody> <tr> <td><input type="hidden" class="form-control productID" name="productID[]" value=""></td> <td><input type="text" class="form-control productCode" autocomplete="off" placeholder="Product Code" name="productCode[]" value=""></td> <td><input type="text" class="form-control qty" autocomplete="off" placeholder="Qty" name="qty[]" value=""></td> <td class="description"></td> <td class="text-center deleteRow"><span class="glyphicon glyphicon-trash"></span></td> </tr>Cuando el usuario ingresa el valor del Código de producto, se realiza una solicitud AJAX para realizar la consulta de la base de datos y luego uso lo siguiente para actualizar las otras celdas:
$this.closest('tr').children('.form-control.productID').html(productID); $this.closest('tr').find('.form-control.productID').val(productID); $this.closest('tr').children('.description').html(description);Los dos últimos se están actualizando correctamente (valor de entrada de ID de producto oculto) y la descripción, pero el valor de la celda de ID de producto permanece vacío. Supongo que puedo tener un valor de entrada oculto y un valor que no es de entrada para la misma celda de la tabla al mismo tiempo y actualizar ambos por separado.
$this.closest('tr').children('.form-control.productID').html(productID); Esto intenta establecer el HTML de sus entradas (todas ellas en la fila). Pero text y las entradas hidden no tienen HTML, solo un value .
Creo que en realidad estás tratando de configurar el HTML de las celdas de la tabla, lo que puedes hacer así:
$this.closest('tr').find('td').html(productID); Tenga en cuenta que (como su código existente) esto coincidirá con cada td ; a juzgar por los encabezados de la tabla, realmente solo desea hacer coincidir el primero:
$this.closest('tr').find('td').first().html(productID); Tenga en cuenta 2 que esto es un poco frágil y se romperá si cambia la estructura de su tabla. Sería más seguro agregar una clase a la celda que desea actualizar, por ejemplo, <td class='product_id'> , y seleccionarla con su selector.
$('.productCode').on('keyup', function() { let productID = 42; $(this).closest('tr').find('td').first().html(productID); }); <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <p>Type a letter in product code field to simulate your AJAX call:</p> <table border=1> <thead> <th>Product ID</th> <th>Product Code</th> <th>Qty</th> <th>Description</th> </thead> <tbody> <tr> <td><input type="hidden" class="form-control productID" name="productID[]" value=""></td> <td><input type="text" class="form-control productCode" autocomplete="off" placeholder="Product Code" name="productCode[]" value=""></td> <td><input type="text" class="form-control qty" autocomplete="off" placeholder="Qty" name="qty[]" value=""></td> <td class="description"></td> </tr>