1

Hi people i have a dynamic table (add rows from ajax requests) and i need sum and multiply values always (without a trigger event).

i have already a functions that make it with the event (blur) but i don't wanna make it by using the blur trigger.

There is a way for do it?

My code:

$.fn.sumValues = function() {
  var sum = 0;
  this.each(function() {
    if ($(this).is(':input')) {
      var val = $(this).val();
    } else {
      var val = $(this).text();
    }
    sum += parseFloat(('0' + val).replace(/[^0-9-\.]/g, ''), 10);
  });
  return sum;
};

function totaliza() {
  var total_recep = $('input[name^="costot"]').sumValues();
  $('#total_art').val(total_recep);
}
var counter = 0;
$(document).on('click', '#bt_add', function(e) {
  counter++;
  var tr = '<tr id="art_' + counter + '">';
  tr = tr + '<td><button name="del_art' + counter + '" id="del_art' + counter + '" class="btn btn-default btn-xs del_art" type="button">DEL</button></td>';
  tr = tr + '<td><input name="cbarra' + counter + '" id="cbarra' + counter + '" class="form-control" value="02020202" readonly></td>';
  tr = tr + '<td><input name="art' + counter + '" id="art' + counter + '" class="form-control" value="ARTICULO" readonly></td>';
  tr = tr + '<td><select name="und' + counter + '" id="und' + counter + '" class="form-control list"></select></td>';
  tr = tr + '<td><input name="cal' + counter + '" id="cant' + counter + '" class="form-control numeric cal" value="0"></td>';
  tr = tr + '<td><input name="cal' + counter + '" id="costou' + counter + '" class="form-control numeric cal" value="0"></td>';
  tr = tr + '<td><input name="costot' + counter + '" id="costot' + counter + '" class="form-control cal" readonly value="0"></td>';
  tr = tr + '</tr>';
  $("#inv_recep_det tbody").append(tr);
  $('.form-control').change(function() {
    var number = this.name.replace('cal', '');
    var costot = ($('#cant' + number).val() * $('#costou' + number).val())
    $('input[name^="costot' + number + '"]').val(costot);
    totaliza();
  });
  $('.del_art').click(function() {
    var number = this.name.replace('del_art', '');
    $('#art_' + number).remove();
    totaliza();
  });
});

https://jsfiddle.net/JuJoGuAl/kpLs9zcg/

Something like that? http://jsfiddle.net/JuJoGuAl/0vx64u2y/

JuJoGuAl
  • 117
  • 1
  • 15
  • you can create custom triggers -- when do you want it to occur? If not on blur or focus or change? You can cause custom triggers to be called at any time. Have you read https://learn.jquery.com/events/introduction-to-custom-events/ – Snowmonkey Jan 25 '17 at 16:03
  • I'm thinking of doing it using LIVEQUERY, I want to avoid for all reasons errors that can be created by "user error" @Snowmonkey – JuJoGuAl Jan 25 '17 at 16:11
  • What custom Trigger i can do for make it work? @Snowmonkey – JuJoGuAl Jan 25 '17 at 16:11
  • Ok, so you don't want it with the blur event -- what about the "input" trigger? That happens any time any input element receives input. – Snowmonkey Jan 25 '17 at 16:16
  • Can you teach me? i don't have any idea how about use input trigger (i'm google it right now) @Snowmonkey – JuJoGuAl Jan 25 '17 at 16:26
  • Well, right now, you're using the $(".form-control").change() event -- is this not doing what you want? Any time any form element changes, it recalculates. – Snowmonkey Jan 25 '17 at 16:31

1 Answers1

1

Rather than continuing in comments, I thought an answer might be of better use. Currently, you use:

 $(".form-control).change(...)

to trigger the update. Some browsers may force you to lose the focus on an element to actually trigger that. Instead, change that line to:

$(".form-control").on("input", function(){ ... })

This has been discussed here: What is the difference between "change" and "input" event for an INPUT element

Other than that, I've made no changes to your fiddle: https://jsfiddle.net/snowMonkey/kpLs9zcg/5/

Community
  • 1
  • 1
Snowmonkey
  • 3,716
  • 1
  • 16
  • 16