I have a web form that allows users to enter details for creating a shipping consignment for 1 more more items. They enter the address from/to fields and then there's a table where they can enter 1 or more rows for items to be included on the shipment.
One of the table columns is for the Product ID, which is a value that is returned from a database query performed when entering a code in another table cell. We don't want users entering/editing this so we're including this as a hidden input but we would also like to display this to the user.
Here's what one of the table rows looks like:
<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>When the user enters the Product Code value an AJAX request is performed to do the database query and I then use the following to update the other cells:
$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);
The last two are updating correctly (hidden productID input value) and the description, but the value for the Product ID cell is remaining empty. I'm assuming I can have a hidden input value and a non input value for the same table cell at the same time and update both separately?
$this.closest('tr').children('.form-control.productID').html(productID);
This attempts to set the HTML of your inputs (all of them in the row). But text and hidden inputs have no HTML, only a value.
I think you're actually trying to set the HTML of the table cells, which you can do like so:
$this.closest('tr').find('td').html(productID);
Note that (like your existing code) this will match every td; judging by the table headers you really only want to match the first one:
$this.closest('tr').find('td').first().html(productID);
Note 2 that this is a bit fragile, and will break if your table structure changes. It would be safer to add a class to the cell you want to update, eg <td class='product_id'>, and target that with your 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>