CODEWITHSUNDEEP
javascriptjqueryhtml
Dj Genexxe
Dj Genexxe

Reputation: 27

Change value of the next element

I have three text fields per row in my table.

<tr>
    <td><input type="text" data-type="number" name="qty[]" /></td>
    <td><input type="text" data-type="number" name="ucost[]" /></td>
    <td><input type="text" data-type="number" name="total[]" readonly /></td>
</tr>
<tr>
    <td><input type="text" data-type="number" name="qty[]" /></td>
    <td><input type="text" data-type="number" name="ucost[]" /></td>
    <td><input type="text" data-type="number" name="total[]" readonly /></td>
</tr>

The value of the text field named total[] per row must be (qty * ucost). If the user input value to the qty field, the corresponding total field must be changed.

How to do it using the name attribute? I tried this code,

$(document).on('keyup', "input[name='qty[]']", function(e) {
    if (e.which >= 37 && e.which <= 40) {
        e.preventDefault();
    }
    $("input[name='total[]']").val() = ($("input[name='ucost[]']").val() * $("input[name=qty[]']").val());
});

But it is not working.

Upvotes: 0

Views: 175

Answers (3)

AtheistP3ace
AtheistP3ace

Reputation: 9691

One issue is .val() takes a value as a input to set a value not assigns one. And you can check each name attribute against what it starts with like this:

Fiddle: https://jsfiddle.net/oss16La2/4/

$(document).on('keyup', "input[name^=qty], input[name^=ucost]", function(e) {
    if (e.which >= 37 && e.which <= 40) {
        e.preventDefault();
    }

    // Find only fields in same row
    var row = $(this).closest('tr');
    var ucost = parseInt(row.find("input[name^=ucost]").val());
    var qty = parseInt(row.find("input[name^=qty]").val());

    // Check that both fields have a valid numerical value
    if (isNaN(ucost) || isNaN(qty)) {
        return;
    }

    // Calc product and update field in the same row
    var product = ucost * qty;
    row.find("input[name^=total]").val(product);
});

EDIT: Update to handle both fields, not having a value in a field and only updating fields in same row. The way you are selecting fields will select all the fields. You want to make sure you are only dealing with fields in the same row.

Upvotes: 0

Ibrahim Khan
Ibrahim Khan

Reputation: 20740

You are using val() method incorrectly. You can use closest() and find() methods like following.

$(document).on('keyup', "input[name='qty[]'], input[name='ucost[]']", function(e) {
  if (e.which >= 37 && e.which <= 40) {
    e.preventDefault();
  }

  var qty = $(this).closest('tr').find('input[name="qty[]"]').val();
  var cost = $(this).closest('tr').find('input[name="ucost[]"]').val();
  var total = $(this).closest('tr').find('input[name="total[]"]');

  total.val(qty * cost);
});


$(document).on('keyup', "input[name='qty[]'], input[name='ucost[]']", function(e) {
  if (e.which >= 37 && e.which <= 40) {
    e.preventDefault();
  }

  var qty = $(this).closest('tr').find('input[name="qty[]"]').val();
  var cost = $(this).closest('tr').find('input[name="ucost[]"]').val();
  var total = $(this).closest('tr').find('input[name="total[]"]');

  total.val(qty * cost);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
  <tr>
    <td>
      <input type="text" data-type="number" name="qty[]" />
    </td>
    <td>
      <input type="text" data-type="number" name="ucost[]" />
    </td>
    <td>
      <input type="text" data-type="number" name="total[]" readonly />
    </td>
  </tr>
  <tr>
    <td>
      <input type="text" data-type="number" name="qty[]" />
    </td>
    <td>
      <input type="text" data-type="number" name="ucost[]" />
    </td>
    <td>
      <input type="text" data-type="number" name="total[]" readonly />
    </td>
  </tr>
</table>

Upvotes: 1

Mohit Bhardwaj
Mohit Bhardwaj

Reputation: 10083

It would be much better if you add common classes e.g. total-fields, quantity-fields etc. and then bind those events using classes.

<tr>
    <td><input type="text" class="quantity-fields" data-type="number" name="qty[]" /></td>
    <td><input type="text" class="cost-fields" data-type="number" name="ucost[]" /></td>
    <td><input type="text" class="total-fields" data-type="number" name="total[]" readonly /></td>
</tr>
<tr>
    <td><input type="text" class="quantity-fields" data-type="number" name="qty[]" /></td>
    <td><input type="text" class="cost-fields" data-type="number" name="ucost[]" /></td>
    <td><input type="text" class="total-fields" data-type="number" name="total[]" readonly /></td>
</tr>


$(document).on('change', ".total-fields, .quantity-fields", function(e){
  var quantity = parseFloat( $(this).parent().find('.quantity-fields').val() );
  var cost = parseFloat( $(this).parent().find('.cost-fields').val() );
  var total = cost * quantity;
  $(this).parent().find('.total-fields').val( total );
});//change

Upvotes: 0

Related Questions