Forums

Thanks for helping me get a calculator function put together for my little app.
​
One problem, however. While it works swimmingly on static html, it tanks hard on the Repeater fields.
​
I can enter numbers in the first field and it shows up in the Sum field just fine. But if I add a field, nothing I type activates the calculate function, which is looking for a keyup. Only when I go back into the original field and hit any key does it re-calculate all available fields. So, the Javascript can see the numbers in the input fields, but it does not recognize the events. Any ideas? How can I alter the following code so it works with an onkeyup="calculateSum();" inserted in the code of each input? It doesn't work as is, likely because of the JQuery dom event. I also want it to work whenever the Remove Field button is clicked too. I presume the same sort of thing - an onclick="calculateSum();" entered into the code of the button. Just not advanced enough in Javascript to riddle this out.
​

function calculateSum() {
  var sum = 0;
  jQuery('input[class^="checkadd"]').each(function() {
    if (!isNaN(this.value) && this.value.length != 0) {
      sum += parseFloat($(this).val());
    }
  });
  jQuery('input[name="totalSum"]').val(sum);
}

jQuery('.checkadd').on('keyup', function() {
  calculateSum();
});

Doing the Snoopy dance. Yeah...creepy, but,
​
I invoked the DOM itself, and it works. Now I just need to get the Remove button to recalculate too.
​

function calculateSum() {
  var sum = 0;
  jQuery('input[class^="checkadd"]').each(function() {
    if (!isNaN(this.value) && this.value.length != 0) {
      sum += parseFloat($(this).val());
    }
  });
  jQuery('input[name="totalSum"]').val(sum);
}

jQuery(document).on('keyup', 'input[class^="checkadd"]', function() {
  calculateSum();
});

I got this to work over at JSFiddle on static code, but it's not working at all on the live code. Perhaps another function has the click event tied up for the Remove button?
​

jQuery(document).on('click', '.recalc', function() {
  calculateSum();
});

I added a second button next to the Add button and labeled it Recalculate and used this code to make it work. But the person entering the checks has to click it whenever a check entry is removed, which may or may not happen. I'd like it to automatically recalculate when the Remove button is clicked.
​

jQuery('.calc').on('click', function() {
  calculateSum();
}); 

Each time you add a repeater entry, you would need to also add another binding to the newly created remove button.

Thanks. I am not sure exactly how to accomplish this in the Repeater way of doing things. I tried to use the same method as I used to get the calculate onkeyup working, accessing a class identifier I gave the button, but it does not seem to see the onclick event.

I've tried these two methods to call the calculateSum() function, adjusting the class name, naturally. The first one works perfectly on the button that is outside the Repeater stack. The second one is modeled after the working keyup method. I have also tried different variations of the second one in hopes of finding something that'd work, with no good results. So, something is different when trying to tie a button in on this:
​

jQuery('.calc').on('click', function() {
  calculateSum();
}); 

jQuery(document).on('click', 'button[class^="recalc"]', function() {
  calculateSum();
});

jQuery('.multiply').on('click', function() {
    calculateSum();   
    jQuery('.remove').on('click', calculateSum); 
});

Each time you add a new row in your repeater you need to bind your calculate function to the new remove button.

Thanks! The way that is written, it totally kills my Repeater. Shows two rows and none of the buttons are responsive and no calculation happening. Will play with it some more - I get what you're saying.