Javascript, get input value in prev td

Question

I have a table with two inputs per row and I am trying to calculate the difference between each input for that row and display it in the 3rd column.

I have looked around and tried answers from Here, here, here and here as well as others and none seem to work for me.

$(".calibration_input_lin").blur(function(){
  var input = $(this)
  var val = input.val()
  var row = input.parents('tr').eq(0)

  var req = input.closest('td').prev().val()
  var res = $(".resolution").data("resolution")


  var diff = difference = val - req
  var diff = diff.toFixed(res)

  $.ajax({
    url: "<%= customer_asset_calibration_header_path(@customer,@asset,@calibration_header) %>",
    data: { value: val }

  }).done(function( response ) {
    row.find(".calibration_lin_input_diff").text(diff)
    window.alert(req);
  });

  // or you can run some JS code here to calculate difference
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="table table-hover table-sm linearity">
        <thead>
          <tr>
            <th>Weights</th>
            <th>Required</th>
            <th>Actual</th>
            <th>Difference</th>
            <th></th>
            </tr>
        </thead>

        <tbody>
            <tr>
              <td></td>
              <td class="calibration_input_req"><input step="any" required="required" value="0.000" class="form-control calibration_input_lin" type="number" name="result_id[2677][required]" id="result_id_2677_required" /></td>
              <td><input step="any" required="required" id="linearity_actual" class="form-control calibration_input_lin" type="number" name="result_id[2677][actual]" /></td>  
              <td> class ="calibration_lin_input_diff"></td>

            </tr>
            <tr>
              <td></td>
              <td class="calibration_input_req"><input step="any" required="required" value="0.005" class="form-control calibration_input_lin" type="number" name="result_id[2678][required]" id="result_id_2678_required" /></td>
              <td><input step="any" required="required" id="linearity_actual" class="form-control calibration_input_lin" type="number" name="result_id[2678][actual]" /></td>  
              <td> class ="calibration_lin_input_diff"></td>

            </tr>
            <tr>
              <td></td>
              <td class="calibration_input_req"><input step="any" required="required" value="0.050" class="form-control calibration_input_lin" type="number" name="result_id[2679][required]" id="result_id_2679_required" /></td>
              <td><input step="any" required="required" id="linearity_actual" class="form-control calibration_input_lin" type="number" name="result_id[2679][actual]" /></td>  
              <td> class ="calibration_lin_input_diff"></td>

            </tr>
        </tbody>
        <table>

I use the same script elsewhere and it works fine when the req variable is static accross all table rows. I just can't seem to get it to pick up the input in td 2.

Any help would be appreciated.

Hi why do you use `$(".calibration_input_lin").blur`? As I understand do you need to iterate through all rows and calculate the difference between first 2 fields in the row? — Kirill Novikov, Oct 23 '18 at 13:10
Hi @KirillNovikov that was provided to me in a suggestion by someone else. I do not need to iterate through all rows, just the row that is being updated, — Chris Nash, Oct 23 '18 at 13:12
@mplungjan when I replace my `var row = input.parents('tr').eq(0)` with ` var row = input.closest('tr')` it still doesn't recognise the input of the 2nd td (class calibration_input_req). — Chris Nash, Oct 23 '18 at 13:20
I changed the line `var req = input.parents('td').siblings('td').find('input').val();` to `var req = input.parents('td').prev().find('input').val();` and it works - get in! Thank you. — Chris Nash, Oct 23 '18 at 14:03

Mamun · Accepted Answer · 2018-10-23T15:31:12.163

Instead of using blur you can use input. You can target the parent to get the prev() td's input value on each input change.

You have to set initial value as 0 when there is no value exist in the input. You can do so by using ternary operator.

There is no element with .resolution in the HTML whose data is used in toFixed().

You can try the following way:

$(".calibration_input_lin").on('input', function(){
  var input = $(this)
  var val = input.val()? input.val() : 0;
  var row = input.parents('tr').eq(0)

  var req = input.parents('td').prev('td').find('input').val();
  req = req ? req : 0;
  //var res = $(".resolution").data("resolution")

  var diff = val - req;
  var diff = diff.toFixed(2);

  $(this).parents('tr').find('.calibration_lin_input_diff').text(diff);

  // or you can run some JS code here to calculate difference
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table class="table table-hover table-sm linearity">
        <thead>
          <tr>
            <th>Weights</th>
            <th>Required</th>
            <th>Actual</th>
            <th>Difference</th>
            <th></th>
            </tr>
        </thead>

        <tbody>
            <tr>
              <td></td>
              <td class="calibration_input_req"><input step="any" required="required" value="0.000" class="form-control calibration_input_lin" type="number" name="result_id[2677][required]" id="result_id_2677_required" /></td>
              <td><input step="any" required="required" id="linearity_actual" class="form-control calibration_input_lin" type="number" name="result_id[2677][actual]" /></td>  
              <td class ="calibration_lin_input_diff"></td>
              <td>
            </tr>
            <tr>
              <td></td>
              <td class="calibration_input_req"><input step="any" required="required" value="0.005" class="form-control calibration_input_lin" type="number" name="result_id[2678][required]" id="result_id_2678_required" /></td>
              <td><input step="any" required="required" id="linearity_actual" class="form-control calibration_input_lin" type="number" name="result_id[2678][actual]" /></td>  
              <td class ="calibration_lin_input_diff"></td>
              <td>
            </tr>
            <tr>
              <td></td>
              <td class="calibration_input_req"><input step="any" required="required" value="0.050" class="form-control calibration_input_lin" type="number" name="result_id[2679][required]" id="result_id_2679_required" /></td>
              <td><input step="any" required="required" id="linearity_actual" class="form-control calibration_input_lin" type="number" name="result_id[2679][actual]" /></td>  
              <td class ="calibration_lin_input_diff"></td>
              <td>
            </tr>
        </tbody>
        <table>

When I add the line ` ` to my page it knocks out the formatting for chosen selector which resides in the 1st td - have you seen that? Also in the first TD is also an input will that impact your answer? — Chris Nash, Oct 23 '18 at 13:48
Yes becuase it was a large amount of code repeated I took it out, but on my page there is an selector input in that td with about 100 options to choose from. — Chris Nash, Oct 23 '18 at 13:58
@ChrisNash, without seeing the full context it is really difficult to answer precisely..... — Mamun, Oct 23 '18 at 14:09
@mplungjan, `.next()` is not working when changing the first input ....that simply replaces the second input element with the value. Though `.text()` is the good one....should have thought before......updated with that. Thanks. — Mamun, Oct 23 '18 at 15:37

Javascript, get input value in prev td

1 Answers1