form with jquery ui multiple sliders… only one value being submitted for all

Question

I've been schooling myself through stackoverflow and elsewhere and have learned a lot, but am still very new to this. I'm setting up a form with 5 sliders, the values of which will then post to a PHP page. Everything's working fine... except that the form submits the value of the final slider for EVERY slider. I think I need to use the this attribute or the each function, but I'm not sure how...

Here's my JS:

$(function(){

    var currentValue = $('#currentValue');

    $("#slider1,#slider2,#slider3,#slider4,#slider5").slider({ 
        range: "min",
        value:37,
        min:1,
        max: 500,
        slide: function(event, ui) {
            currentValue.html(ui.value);
            $("input:hidden").val(ui.value);
        }
    });

});

and here's my HTML:

<input type=hidden name="slider1" id="slider1" class="slider-input" value="ui.value" />
<input type=hidden name="slider2" id="slider2" class="slider-input" value="ui.value" />
<input type=hidden name="slider3" id="slider3" class="slider-input" value="ui.value" />
<input type=hidden name="slider4" id="slider4" class="slider-input" value="ui.value" />
<input type=hidden name="slider5" id="slider5" class="slider-input" value="ui.value" />

Any suggestions? I'm stumped!

Answer 1

For lack of better understanding of structure of inputs in the form I will assume that the only hidden fields in form match each slider so they can be indexed.

SOmetimes it is easier to implement a plugin within an each loop so you can have simple access to each element of a collection within a javscript closure. jQuery UI can give you access to the individual elements within the events , however not all plugins do so this pattern can be very helpful sometimes.

var $sliders=$("#slider1,#slider2,#slider3,#slider4,#slider5")

$sliders.each(function(){
    /* now have access to individual slider eleemnt*/
   var $slide=$(this);
      /* match input index to index of this slider*/
    var $input= $("input:hidden").eq(  $sliders.index($slide) );
    /* initiate slider on this element*/
     $slide.slider({ 
        range: "min",
        value:37,
        min:1,
        max: 500,
        slide: function(event, ui) {
            currentValue.html(ui.value);
            /* assign value to correct input */
            $input.val(ui.value);
        }
    });
});