4

フォームの価格帯セレクターとして jQuery スライダーを使用しています。値の 1 つが変更されたときに、フォームを自動的に送信したいと考えています。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 があまり得意ではないので、おそらく間違っています。どんな助けでも大歓迎です。

4

1 に答える 1

5

jquery-ui スライダーには変更イベントがあります。

これを試して ：

$(document).ready(function() {
    $("#slider-range" ).slider({
        // options
        start: function (event, ui) {
            // code
        },
        slide: function( event, ui ) {
            // code
        },
        change: function(event, ui) {
            $("#priceform").submit();
        }
    });
});
于 2012-11-16T10:57:55.753 に答える