0

I try to make it as simple as possible: I have six jQuery UI sliders, I need to take their values if they're value is different from 0, and display an average, and is driving me crazy so far.

Basically I have six of these (their names go from pm_rating_c1, pm_rating_c2, etc..):

<input type="hidden" name="pm_rating_c1" value="60">

I need to output the average in "real time" in this input field:

<input type="text" class="rwmb-text" name="pm_overall_score" id="pm_overall_score" value="" size="30">
Cœur
  • 37,241
  • 25
  • 195
  • 267
djwd
  • 315
  • 2
  • 5
  • 15

1 Answers1

2

Check this out I made a class so it would be easier to loop through

http://jsfiddle.net/6SftR/

JS CODE 

var sum = 0 ; 
 var nums = 0;
$('.slider').bind({

    slidechange : function(event,ui) {
      sum = 0;
      nums  = 0;
    $('.slider').each(function(){

        var value = $( this ).slider( "option", "value" );
        if(value > 0 ) 
         {
            sum += value ; 
            nums++;
          }

        }); 
       var avg = sum / nums ; 
       $('.average').val(Math.floor(avg));
       console.log(avg); 
    }
}).slider();

HTML CODE 

<div class="slider"></div>
<div class="slider"></div>
<div class="slider"></div>
<div class="slider"></div>
<div class="slider"></div>
<div class="slider"></div>


    <input type="text" class="average" name="pm_overall_score" id="pm_overall_score" value="" size="30">

I hope this will help

Seder
  • 2,735
  • 2
  • 22
  • 43
  • Thank you very much Sedz, we're pretty close. Although calculations are wrong, anytime you click on a slider it sums its value again creating huge numbers (check your jfiddle). Also I think that "sum / 6" shouldn't be hardcoded as it should depend on how many sliders I move. Hope it makes sense. – djwd Jan 31 '13 at 09:00
  • I would also like to round up the output to the closest integer, eg: **76.66666454 > 76** but this could be a next step – djwd Jan 31 '13 at 09:10
  • 1
    Use Math.floor(x) And zero the sum before each & accept the answer please – Seder Jan 31 '13 at 12:07
  • Thanks, the round up is a minor problem now, thanks for the tip. I'll surely accept the answer once I can edit it to make it calculate the average correctly. Thanks for your help – djwd Jan 31 '13 at 12:18
  • 1
    Before $('.slider').each put sum = 0 – Seder Jan 31 '13 at 12:26
  • Ok great, done. Now the only problem remains that I need to calculate the average only of the sliders different from 0. Eg: If I move only two sliders the value bust be divided by 2, not 6 – djwd Jan 31 '13 at 12:47
  • 1
    Check it now , its as you asked – Seder Jan 31 '13 at 14:15
  • Thank you sir you've been awesome, works as expected now. Unfortunately still something weird happens when I save the values, on page refresh the value inside "pm_overall_score" shows a huge number I don't understand where it's coming from, nor the math behind it. Ex: First Slider > 5, Second Slider > 15 Saves the correct average (10) but on the input field shows 257. Now if I move the third slider to 10, the number becomes 17170. I need to move back all the slider to 0 to make it work again. Hard to explain. Any Idea? – djwd Jan 31 '13 at 15:54
  • Sorry about formatting, line breaks doesn't work as described. Anyway I'll just accept the answer before you kill me :) Thank you very much indeed. – djwd Jan 31 '13 at 15:55
  • I will check it for you we are here to help each other – Seder Jan 31 '13 at 21:52