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

【问题标题】：submit form when input text is change jquery输入文本更改jquery时提交表单
【发布时间】：2012-02-29 11:50:53
【问题描述】：

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

图片

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

});

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

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

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

我曾尝试与 keyup 、 keydown 、 onchange 合作，但正在寻找我想要的东西。

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

【问题讨论】：

首先你的表单的 ID 是什么？我看到您为表单指定了名称，但没有指定 ID，您是否在表单中的任何位置使用 type="submit" 的任何输入元素？

标签： jquery forms onchange

【解决方案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

【讨论】：

@Rafee Its not working 描述性不是很好。您可以发布指向“不工作”代码的链接或粘贴一些错误文本吗？
stop : function (event, ui) { $('#range_form').trigger('submit'); } 我给我的表单 ID 为 range_form 但它没有触发
@Rafee 这是一个 JSFiddle，显示我的代码确实可以独立工作：jsfiddle.net/PaBzT。请注意，我在表单标签中添加了一个 ID，这就是问题所在，您没有选择任何内容，因为您选择的 ID 没有元素（表单有名称但没有 ID）。
试试$("#range_form").submit(); 而不是$('#range_form').trigger('submit'); 我也同意@Jasper 你应该给那个表格一个ID...

【解决方案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..
    }
})

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

【讨论】：