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

Question

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

图片

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 ));

}); 

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

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

当输入文本字段发生更改时，如何提交表单。

我尝试过使用 keyup 、 keydown 、 onchange 但工作是我想要的。

因为我没有从键盘在text字段中插入值，它从 slider 范围获取值..所以当文本字段更改时我如何提交。

Answer 1

您可以向 slider 小部件添加一个 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');
    }
});

这将在 slider 小部件的父窗体上触发 submit 事件。请注意，我通过 ID 选择了表单，因此您必须向表单添加 ID，或将表单的选择更改为:$('[name="range_form"]')(此效率低得多)。

stop 事件的文档:http://jqueryui.com/demos/slider/#event-stop