Calculate the sum of multiple inputs - jQuery Range Slider

Question

I am attempting to calculate the sum of multiple jQuery range sliders. There are many results on stackoverflow when it comes to this, most are not what I'm trying to accomplish, and others show 2 sliders as an example, when I try to add more it breaks (not sure what I'm doing really)..

Here is what I have, 6 sliders, and then I want it to calculate the overall rating after the last one. http://fasterforms.com/images/111914.png

Here is a working fiddle, but as I said, when I try to either add onto the example it breaks, or it is for a "text" input and when I made it a jQuery "range" input it doesn't work.

http://jsfiddle.net/DULYW/2/

---

Here is the closest one I've got to work with 2 range sliders, but when I try to add more based off the code it doesn't work either.

 <script type="text/javascript"> 
 function calc(A,B,SUM) { 
 var one = Number(A); 
 if (isNaN(one)) { alert('Invalid entry: '+A); one=0; } 
 var two = Number(document.getElementById(B).value);  
 if (isNaN(two)) { alert('Invalid entry: '+B); two=0; } 
 document.getElementById(SUM).value = one + two; 
 } 
 </script> 

Enter a number: 
     <input name="sum1" id="op1" value="" onChange="calc(this.value,'op2','result')" type="range" min="0" max="5" data-highlight="true" /> 
and another number: 
     <input name="sum2" value="" id="op2" onChange="calc(this.value,'op1','result')" type="range" min="0" max="5" data-highlight="true" /> 
Their sum is: 
     <input name="sum" value="" id="result" readonly style="border:0px;"> 

It always seems anything that works normally for me always refuses to work the same way once I add it to my jQuery mobile pages, any help would be awesome.

Answer 1

http://jsfiddle.net/DULYW/60/

Add on change event:

JS:

$('.add').change(function(){
  var sum = 0
  $('.add').each(function(){
    sum += isNaN(this.value) || $.trim(this.value) === '' ? 0 : parseFloat(this.value);
  });

  $('#total').html(sum);
})

HTML:

<input class="add" name="sum1" type="range" min="0" max="5" data-highlight="true" />
<input class="add" name="sum1" type="range" min="0" max="5" data-highlight="true" />
<input class="add" name="sum1" type="range" min="0" max="5" data-highlight="true" />
<input class="add" name="sum1" type="range" min="0" max="5" data-highlight="true" />
<p id="total"></p>

Answer 2

For jQuery mobile you need to make sure that you put your code within an appropriate page event so that the widgets have been created. So if your sliders were within a data-role=page div with an id="page1", you could handle the pagecreate event and within it, run the addAll to get the initial total and then add a change handler to each of the sliders that also runs the addAll function:

$(document).on("pagecreate", "#page1", function () {
    $(".add").on("change", function () {
        addAll();
    });

    addAll();
});

function addAll() {
    var sum = 0
    $('.add').each(function (){        
        sum += isNaN(this.value) || $.trim(this.value) === '' ? 0 : parseFloat(this.value);        
    });
    $('#total').html(sum);
}

DEMO

Answer 3

Both worked for me, but I ultimately switched mine to ezankers coding because it allowed me to have different names and they didnt have to be all the same.

http://jsfiddle.net/ezanker/DULYW/61/

    $(document).on("pagecreate", "#page1", function () {
    $(".add").on("change", function () {
        addAll();
    });

    addAll();
});

function addAll() {
    var sum = 0
    $('.add').each(function (){        
        sum += isNaN(this.value) || $.trim(this.value) === '' ? 0 : parseFloat(this.value);        
    });
    $('#total').html(sum);
}

Thanks for both of your help, you helped me out a lot.