Search jQuery

jQuery Forum

POST slider values to php script

in jQuery Mobile • 9 years ago

Hi all!

I had a nice functioning set of sliders that would pass their values using POST. Ever since I included jQuery mobile libs, my sliders would not pass their values anymore :(

Can anyone help me here ? Thankyou !

Fred

This is my code so far:

<html>

<head>

<title>Vragenlijst</title>

$(function(){

$('#slider1').slider({

slide: function( event, ui ) {

$(this).prev().val(ui.value)

}

})

$('#slider2').slider({

slide: function( event, ui ) {

$(this).prev().val(ui.value)

}

})

</script>

</head>

<body>

Rate this 1:<br>

Rate this 2:<br>

</form>

</body>

</html>

Replies(2)

bagman

Re: POST slider values to php script

9 years ago

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js">

This has nothing to do with your problem, but jQuery 1.8.3 is not officially supported with JQM 1.2.0. So, you're running it at your own risk if you choose to use an uncertified version of jQuery. From the documentation at http://jquerymobile.com/demos/1.2.0/docs/about/getting-started.html

jQuery Mobile 1.2 (1.2.0) works with versions of jQuery core from 1.7.0 to 1.8.2.

Specific to your question, why wouldn't you just use the standard range input type and just allow the standard form functionality to submit the selected value? This just submits the range values as standard form input fields without the need for hidden input fields or any JavaScript event handlers.

<label for="slider1">Rate this 1:</label>
<input type="range" name="slider1" id="slider1" value="60" min="0" max="100"/>

See http://jsbin.com/uloxin as an example.

If you really need to attach an event handler to an input type of range (note that I'm NOT talking about a DIV element with the 'slider' class applied) below is how you would do so. Please note that I'm showing using the standard range input element here, not a custom-styled DIV element. This example demonstrates capturing the range value and setting that value to a separate input field (a text field in this case so you can actually see the current value) on the current page.

$(":jqmData(role='page')").one("pageinit", function(event) {
$(".arbitratry-slider-class").on('change', { currentPage: $(this) }, function(e) {
$(":text[name='" + $(this).attr('id') + "']", e.data.currentPage).val($(this).val());
});
});

See http://jsbin.com/ubereq as an example.

dredfyl