JQuery slider onChange auto submit form

Question

I am using the jQuery slider as a price range selector on a form. I would like the form to submit automatically when one of the values ​​has changed. I used a few examples that I found on SO, but they did not work with my code.

<form action="itemlist.php" method="post" enctype="application/x-www-form-urlencoded" name="priceform" id="priceform" target="_self"> <div id="slider-holder"> Prices: From <span id="pricefromlabel">100 &#8364;</span> To <span id="pricetolabel">500 &#8364;</span> <input type="hidden" id="pricefrom" name="pricefrom" value="100" /> <input type="hidden" id="priceto" name="priceto" value="500" /> <div id="slider-range"></div> <input name="Search" type="submit" value="Search" /> </div> </form> 

This is the code that displays the values ​​of the slider and updates the 2 hidden form fields that I use to store prices to send:

 <script> $(function() { $("#slider-range" ).slider({ range: true, min: 0, max: 1000, values: [ <?=$minprice?>, <?=$maxprice?> ], start: function (event, ui) { event.stopPropagation(); }, slide: function( event, ui ) { $( "#pricefrom" ).val(ui.values[0]); $( "#priceto" ).val(ui.values[1]); $( "#pricefromlabel" ).html(ui.values[0] + ' &euro;'); $( "#pricetolabel" ).html(ui.values[1] + ' &euro;'); } }); return false; }); </script> 

I tried to add this code, as well as the data-autosubmit = "true" attribute in the div, but there is no result.

 $(function() { $('[data-autosubmit="true"]').change(function() { parentForm = $(this).('#priceform'); clearTimeout(submitTimeout); submitTimeout = setTimeout(function() { parentForm.submit() }, 100); }); 

I also tried adding the $ .post () event to the slider, but I'm not very good at jQuery, so I'm probably wrong. Any help would be appreciated.

Answer 1

There is a change event on jquery-ui sliders.

Try the following:

 $(document).ready(function() { $("#slider-range" ).slider({ // options start: function (event, ui) { // code }, slide: function( event, ui ) { // code }, change: function(event, ui) { $("#priceform").submit(); } }); });