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!

need an idea what the form html looks like for the hidden inputs. Your current selector will change the value for every hidden input in the page every time any slider is moved — charlietfl, Oct 27 '12 at 22:39

charlietfl · Accepted Answer · 2012-10-27T22:54:21.087

2

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);
        }
    });
});

edited Oct 27 '12 at 22:54

answered Oct 27 '12 at 22:49

charlietfl

170,828
13
121
150

Thanks so much for your reply. The idea of an EACH loop makes sense. When I paste your code, though, the sliders lose their "sliding" functionality… they LOOK all right, but I can't move them. Any thoughts? – user1780000 Oct 28 '12 at 12:35
By the way, each slider appears in HTML like this:
You can see it in action at www.yayforeverything.com/deadlinedom/slider/form.html (And thank you so much again) – user1780000 Oct 28 '12 at 12:37
FYI- you can't repeat ID's in a page... slider and input have same ID – charlietfl Oct 28 '12 at 12:45
Sorry—when I couldn't get your code to work I replaced my original code. Your code is in now, and the silders won't slide. Also, I replaced the IDs in the hidden input fields with "input-slider1", "input-slider2", etc.... but I'm not sure what in your code I should replace to indicate that. Thanks for bearing with me! – user1780000 Oct 28 '12 at 16:17
OK.. with browser console open, as soon as you touch a slider this error gets thrown `currentValue is not defined-line 32` does that help you? Use a console to look at errors – charlietfl Oct 28 '12 at 16:20
Charlie! It works! I added this line back in -- var currentValue = $('#currentValue'); -- and now it works! You're a god! – user1780000 Oct 28 '12 at 16:31
just pointing out how to troubleshoot, what this site is all about. Before you write another line... learn about console tools – charlietfl Oct 28 '12 at 16:33
I will. Thanks for your mentorship. – user1780000 Oct 28 '12 at 16:37

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

1 Answers1