jQuery   发布时间:2022-03-30  发布网站:大佬教程  code.js-code.com
大佬教程收集整理的这篇文章主要介绍了jquery-ui – jQuery滑块onChange自动提交表单大佬教程大佬觉得挺不错的,现在分享给大家,也给大家做个参考。
我正在使用jQuery滑块作为表单中的价格范围选择器.
我希望在其中一个值发生更改时自动提交表单.我使用了几个我在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 &#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>

这是显示滑块值的代码,并更新我用于存储价格的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] + ' &euro;');
            $( "#pricetolabel" ).html(ui.values[1] + ' &euro;');
        }
            });
        return false;
        });

</script>

我已经尝试将此代码以及data-autosubmit =“true”属性添加到div但没有结果.

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

我也试过在滑块上添加一个$.post()事件,但我对jQuery不是很好,所以我可能做错了.任何帮助将不胜感激.

解决方法

jquery-ui滑块上有一个更改事件.

试试这个 :

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

大佬总结

以上是大佬教程为你收集整理的jquery-ui – jQuery滑块onChange自动提交表单全部内容,希望文章能够帮你解决jquery-ui – jQuery滑块onChange自动提交表单所遇到的程序开发问题。

如果觉得大佬教程网站内容还不错,欢迎将大佬教程推荐给程序员好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。
标签:ui