- <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.htmljQuery 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.