I have a text input as follows:
<td><input type="text" class="form-control assetID" autocomplete="off" placeholder="Asset ID" name="assetID[]"></td>
and a script that runs when the first input field is modified. I would like to update the value of the 2nd input when this script runs:
$this.closest('tr').children('.form-control.assetID').val(assetID);
with the value of the asset variable. I can't get the form input to update here when this script runs and can't see the issue here? I will have a series of similar inputs that are added dynamically so I'm not using an id for these but targeting them by the class.
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> When I change the first column I would like the values in the other columns to be updated.
Not this
.children('.form-control assetID')
But this
.children('.form-control.assetID')
Explanation: Selecting element with 2 classes requires to not keep space between both classes , also prefixing both classes by .
Collected from the Internet
Please contact [email protected] to delete if infringement.
Comments