我正在使用jQuery滑块作为表单中的价格范围选择器.
我希望在其中一个值发生更改时自动提交表单.我使用了几个我在SO上找到的例子,但它们不适用于我的代码.
我希望在其中一个值发生更改时自动提交表单.我使用了几个我在SO上找到的例子,但它们不适用于我的代码.
<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 €</span> To <span id="pricetolabel">500 €</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>
这是显示滑块值的代码,并更新我用于存储价格的2个隐藏表单字段以便提交:
<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] + ' €'); $( "#pricetolabel" ).html(ui.values[1] + ' €'); } }); return false; }); </script>
我已经尝试将此代码以及data-autosubmit =“true”属性添加到div但没有结果.
$(function() { $('[data-autosubmit="true"]').change(function() { parentForm = $(this).('#priceform'); clearTimeout(submitTimeout); submitTimeout = setTimeout(function() { parentForm.submit() },100); });
解决方法
jquery-ui滑块上有一个更改事件.
试试这个 :
$(document).ready(function() { $("#slider-range" ).slider({ // options start: function (event,ui) { // code },ui ) { // code },change: function(event,ui) { $("#priceform").submit(); } }); });