I have a simple table with 2 text inputs and 2 non input cells. I have a script that runs when the first input field is modified which queries a database and then updates the other 3 cells in the same row. It is currently only updating the last 2 non input cells in the row and not the other input field in that row.
Here's an example of my table/scripts:
$(document).ready(function() {
$("#addRow").click(function() {
var markup = "<tr><td><input type=\"text\" class=\"form-control serialNumber\" autocomplete=\"off\" placeholder=\"Serial Number\" name=\"serialNumber[]\" value=\"\"></td><td><input type=\"text\" class=\"form-control assetID\" autocomplete=\"off\" placeholder=\"Asset ID\" name=\"assetID[]\" value=\"\"></td></td><td class=\"productCode\"></td><td class=\"description\"></td><td class=\"text-center deleteRow\"><span class=\"glyphicon glyphicon-trash\"></span></td></tr>";
$("#shipmentItems").append(markup);
});
// Find and remove selected table rows
$("#shipmentItems").on("click", ".deleteRow", function() {
$(this).closest('tr').remove();
});
});
$(document).ready(function() {
$(document).on('change', '.form-control.serialNumber', function() {
var serialNumber = $(this).val();
//console.log( recid );
// Create a reference to $(this) here:
$this = $(this);
ID = 'ABC123';
code = 'PC8765';
description = 'Acme Standard Widget';
$this.closest('tr').children('.form-control.assetID').val(ID);
$this.closest('tr').children('.code').html(code);
$this.closest('tr').children('.description').html(description);
});
});<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="20%">Serial</th>
<th class="text-center" scope="col" width="15%">ID</th>
<th class="text-center" scope="col" width="15%">Code</th>
<th class="text-center" scope="col" width="45%">Description</th>
<th class="text-center" scope="col" width="5%"></th>
</thead>
<tbody>
<tr>
<td><input type="text" class="form-control serialNumber" autocomplete="off" placeholder="Serial Number" name="serialNumber[]" value=""></td>
<td><input type="text" class="form-control assetID" autocomplete="off" placeholder="Asset ID" name="assetID[]" value=""></td>
<td class="code"></td>
<td class="description"></td>
<td class="deleteRow"><span class="glyphicon glyphicon-trash"></span></td>
</tr>
</tbody>
</table>
<button type="button" name="addRow" value="addRow" id="addRow" class="btn btn-primary">Add Asset</button> I've hardcoded the variables to be used in this example so there's no issue of there not being a value to replace for the 2nd input field. For some reason the 2nd input field is not updating here.
.find()instead of.children(). Then it will search anywhere in the TR, not just the direct children.