Question

我正在使用价格范围，即jquery范围滑块。我在图像下面有两个文本字段和价格范围滑块

图像

enter image description here

HTML代码

<form name="range_form" method="post">
INR <input type="text" id="amount1" name="amount1" >
- INR <input type="text" id="amount2" name="amount2" >
</form>
<div id="slider-range"></div>

jQuery代码

$(function() {
    $( "#slider-range" ).slider({
        range: true,
        min: 0,
        max: 99999,
        values: [ 75, 300 ], 
        slide: function( event, ui ) {
            $( "#amount1" ).val(ui.values[ 0 ]);            
            $( "#amount2" ).val(ui.values[ 1 ]);            
        }
    });

    $("#amount1").val($( "#slider-range" ).slider( "values", 0 ));
    $("#amount2").val($( "#slider-range" ).slider( "values", 1 ));

});

以上代码是显示价格范围是两个文本字段。

现在我的问题从这里开始......

如果form字段发生变化，我如何提交input text。

我尝试使用keyup，keydown，onchange但正在寻找我正在寻找的工作。

我没有在键盘的text字段中插入值，它从slider ranges获取值..所以我可以在文本字段更改时提交。

Answer 1

您可以向滑块小部件添加stop事件处理程序，以便在用户停止滑动时提交表单：

$( "#slider-range" ).slider({
    range: true,
    min: 0,
    max: 99999,
    values: [ 75, 300 ], 
    slide: function( event, ui ) {
        $( "#amount1" ).val(ui.values[ 0 ]);            
        $( "#amount2" ).val(ui.values[ 1 ]);            
    },
    stop : function (event, ui) {
        $('#range_form').trigger('submit');
    }
});

这将在滑块小部件的父窗体上触发submit事件。请注意，我按ID选择了表单，因此您必须在表单中添加ID，或者将表单的选择更改为：$('[name="range_form"]')（这样效率要低得多）。

stop活动的文档：http://jqueryui.com/demos/slider/#event-stop

Answer 2

您可以使用滑块http://jqueryui.com/demos/slider/#events

的change事件

$( "#slider-range" ).slider({
    range: true,
    min: 0,
    max: 99999,
    values: [ 75, 300 ], 
    slide: function( event, ui ) {
        $( "#amount1" ).val(ui.values[ 0 ]);            
        $( "#amount2" ).val(ui.values[ 1 ]);            
    },
    change: function(event, ui){
        // do what you want.. a change has occured to the slider..
    }
})

每当您停止使用滑块时，或者只要以编程方式更改滑块，它就会被触发..

输入文本更改时提交表单jquery

2 个答案: