Form Input Value not updating from script

Question

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> &nbsp; &nbsp;

When I change the first column I would like the values in the other columns to be updated.

I've updated it to $this.closest('tr').children('.form-control.assetID').val(assetID); but the input is not being updated when the script runs. It is updating the other non input table cells and I can see the assetID in the console with the correct value. — user982124
– user982124, Commented Dec 8, 2021 at 4:03
Please post a minimal reproducible example. You can use a Stack Snippet to make it executable. — Barmar
– Barmar, Commented Dec 8, 2021 at 14:46
I've edited the question to include a sample of the table and script — user982124
– user982124, Commented Dec 9, 2021 at 1:12

Spectric · Accepted Answer · 2021-12-08 02:56:52Z

1

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 .

edited Dec 8, 2021 at 2:56

Spectric

32.6k6 gold badges32 silver badges56 bronze badges

answered Dec 8, 2021 at 2:51

Abdennour TOUMI

94.6k42 gold badges271 silver badges274 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

user982124 Over a year ago

I've updated it to $this.closest('tr').children('.form-control.assetID').val(assetID); but the input is not being updated. The other table cells are but they are not inputs. Anything else I can look at here?

Abdennour TOUMI Over a year ago

Run console.log($this.closest('tr')) and check in the console is it the desired element

user982124 Over a year ago

ran that and confirmed that it is the desired element here

Collectives™ on Stack Overflow

Form Input Value not updating from script

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related