Set Table Cell Value and Hidden Input-CodePudding

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" >

  <thead>
    <th  scope="col" width="15%">Product ID</th>
    <th  scope="col" width="15%">Product Code</th>
    <th  scope="col" width="10%">Qty</th>
    <th  scope="col" width="55%">Description</th>
    <th  scope="col" width="5%"></th>
  </thead>
  <tbody>

    <tr>
      <td><input type="hidden"  name="productID[]" value=""></td>
      <td><input type="text"  autocomplete="off" placeholder="Product Code" name="productCode[]" value=""></td>
      <td><input type="text"  autocomplete="off" placeholder="Qty" name="qty[]" value=""></td>
      <td ></td>
      <td ><span ></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?

CodePudding user response：

$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"  name="productID[]" value=""></td>
      <td><input type="text"  autocomplete="off" placeholder="Product Code" name="productCode[]" value=""></td>
      <td><input type="text"  autocomplete="off" placeholder="Qty" name="qty[]" value=""></td>
      <td ></td>
    </tr>