Set another element value in each function jquery

Question

I want to set another element value in element each function. my script (JS):

function getTotal() { $(':input[id^="barang_qty[]"]').keyup(function() {
var total = 0;
var $inputs = $(':input[id^="barang_qty[]"]');
$inputs.each(function (index) { total += parseFloat($(this).val()) *  parseFloat($(this).attr('data-price'));
         $("#barang_total[]").val(total); 
     });  
$('#total').val(total); 
});

HTML :

<td class="price">
                    <input type="text" name="barang_unit_price[]" readonly id="barang_unit_price[]" class="form-control">
                    </td>
                    <td>
                    <input type="text" name="barang_qty[]" id="barang_qty[]" onkeyup="getTotal()" class="form-control" >
                    </td>
                    <td>
                    <input type="text" name="barang_total[]" class="sum form-control" >
                    </td>

but element barang_total still empty.

Regards, Thank You

Arun P Johny · Accepted Answer · 2015-12-22 09:30:38Z

1

The problem is you are adding a keyup handler in the getTotal method, so the first key up does not do any calculation.

Instead either you can do the calculation in the getTotal() method, with a inline call

function getTotal() {
  var total = 0;
  var $inputs = $('input[name="barang_qty[]"]');
  $inputs.each(function(index) {
    var sum = parseFloat($(this).val()) * parseFloat($(this).attr('data-price')) || 0;
    total += sum;
    $(this).closest('tr').find('[name="barang_total[]"]').val(sum);
  });
  $('#total').val(total);
}

Or use dom ready handler to register the event handler instead of using inline event handlers.

<input type="text" name="barang_qty[]" id="barang_qty[]" class="form-control" >

then

jQuery(function() {
  $('input[name="barang_qty[]"]').keyup(function() {
    var total = 0;
    var $inputs = $('input[name="barang_qty[]"]');
    $inputs.each(function(index) {
      var sum = parseFloat($(this).val()) * parseFloat($(this).attr('data-price')) || 0;
      total += sum;
      $(this).closest('tr').find('[name="barang_total[]"]').val(sum);
    });
    $('#total').val(total);
  });
})

Note: If you are dealing with dynamic elements then you will have to use event delegation

Demo: Fiddle

edited Dec 22, 2015 at 9:30

answered Dec 22, 2015 at 4:45

Arun P Johny

389k68 gold badges532 silver badges532 bronze badges

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

3 Comments

reefman Over a year ago

thanks, but still not work for barang_total value. it still empty. i'll check more detail for this barang_total

Arun P Johny Over a year ago

@reefman the fiddle seems to be working... can you try to recreate the issue

reefman Over a year ago

it seems result for one barang_total only, if there is two or more barang_total row, value wiil be same

DarrelAbello · Accepted Answer · 2015-12-22 04:46:53Z

1

try this

    function getTotal() { $(':input[id^="barang_qty[]"]').keyup(function() {
      var total = 0;
      var $inputs = $(':input[id^="barang_qty[]"]');
      $inputs.each(function (index) { total += parseFloat($(this).val()) * parseFloat($(this).attr('data-price'));
        (function (total) {
            $("#barang_total[]").val(total); 
        })(total);
     });  
     $('#total').val(total); 
});

answered Dec 22, 2015 at 4:46

DarrelAbello

92 silver badges9 bronze badges

Comments

Vuong · Accepted Answer · 2015-12-22 05:23:45Z

1

You're missed the id for input has name barang_total[].

Try this, (i've tested in jsbin, it's worked)

<td class="price">
  <input type="text" name="barang_unit_price[]" readonly id="barang_unit_price[]" class="form-control" value="100">
  </td>
  <td>
    <input type="text" name="barang_qty[]" data-price="100" id="barang_qty[]" onkeyup="getTotal()" class="form-control" value="2">
  </td>
  <td>
    <input type="text" name="barang_total[]" id="barang_total[]" class="sum form-control" >
  </td>

JS

function getTotal() { 
  $(':input[id^="barang_qty[]"]').keyup(function() {
  var total = 0;
  var $inputs = $(':input[id^="barang_qty[]"]');
  $inputs.each(function (index) {
    total += parseFloat($(this).val()) *  parseFloat($(this).attr('data-price'));
    $(':input[id^="barang_total[]"]').val(total); //edited this line
  });  
  $('#total').val(total); 
  }); 
}

Demo: http://jsbin.com/kijifisinu/edit?html,js,output

edited Dec 22, 2015 at 5:23

answered Dec 22, 2015 at 5:08

Vuong

64711 silver badges28 bronze badges

2 Comments

Vuong Over a year ago

Please access demo link to see result. If you have any question, you need a demo to show your code. Anyone can help when they reviewed it. :)

reefman Over a year ago

thank you it is my fault ,, yes i missed the id for input has name barang_total[].

Collectives™ on Stack Overflow

Set another element value in each function jquery

3 Answers 3

3 Comments

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related