jQuery滑块onChange自动提交表单 [英] jQuery slider onChange auto submit form

问题描述

我正在使用jQuery滑块作为表单中的价格范围选择器. 我希望其中一个值已更改时自动提交表单.我使用了一些在SO上找到的示例，但它们不适用于我的代码.

I'm using a jQuery slider as a price range selector in a form. I'd like to have the form submit automatically when one of the values has been changed. I used a couple of examples I found on SO but they didn't 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>

这是显示滑块值并更新2个用于保存价格以提交的隐藏表格字段的代码:

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

<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，但没有结果.

I've tried adding this code as well as an data-autosubmit="true" attribute to the div but no result.

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

我也尝试过向滑块添加$ .post()事件，但是我对jQuery不太满意，所以我可能做错了.任何帮助将不胜感激.

I've also tried adding a $.post() event to the slider but I'm not very good with jQuery so I'm probably doing it wrong. Any help will be appreciated.

推荐答案

jquery-ui滑块上发生更改事件.

There is a change event on jquery-ui sliders.

尝试一下:

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

这篇关于jQuery滑块onChange自动提交表单的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！