[Hidden-tech] capturing jquery multiple slider data in a form submit?

[Gyepi SAM]

On Wed, Oct 24, 2012 at 11:27:03PM -0400, Jenny Katz Brandoli wrote:
> $(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);
> 		}
> 	});
> 	
> });
> 
> ******
> 
> How do I name the five input types?
> 
> <input type="hidden" name="slider1" value="ui.value">???
> 
> What does "value" have to equal? 

You can name the inputs any legal html name you want.
I would suggest naming them according to their purpose in the data gathering
effort; goals, difficulty, etc.
That way, they'll make more sense when you see the results in the email:

    goals=50
    difficulty=20

etc.

You'll also need to add 'id' attributes to each hidden input so you can
reference them in the javascript. In this case, it's best to use a consistent
numerical system, slider_value1, slider_value2, etc.

You don't set the value of the hidden inputs; that's done by the function
during in the event handler.

You'll need to create a function to hook up each slider and its
associated hidden input. Here's the first
one:

$(function(){
    $("#slider1).slider({ 
        range: "min",
        value:37,
        min:1,
        max: 500,
        slide: function(event, ui) {
            $("#slider_value1").value(ui.value);
        }
    });
});

Since you're a 'noob' you'll probably do best to copy, paste, and modify this example to create
the others. However, you'll end up with five copies of the same code, each
slightly different, which is kind of a nightmare once you gain more
understanding.

The right way to do it is something like the following where you extract out all the
fiddly parts into an array of hashes and iterate through the array to hook up all the pieces.
The nice thing here is that once the loop code is written, you won't have to
modify it just to add or update a slider. Also, when you do need to modify it,
your changes will be reflected across all sliders.


// Replace "..." with more hashes to configure sliders 2 through 5 (or
// whatever the number is
var slider_config = [{range:"min", value:37, min:1, max:500},...];

// This does not need to change
for(var i = 0; i < slider_config.length; i++) {
    var config = slider_config[i];
    // arrays have 0 offset, but slider and inputs have 1 offset
    // need to remap
    var pos = i + 1;
    config["slide"] = function(event, ui) { $("#slider_value" + pos).value(ui.value) };
    $(function(){ $("#slider" + pos).slider(config) });
}


Hope you found this helpful.

-Gyepi