2012-02-29 53 views
3

我使用的價格範圍,即jQuery範圍滑塊。 和我有兩個文本字段和下面圖象的價格範圍內滑塊當輸入文字變化時提交表單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)); 

}); 

和代碼是顯示價格範圍是兩個te xt字段。

我現在的問題從這裏開始......

如何提交forminput text場的變化。

我試圖與keyup,​​,onchange工作,但工作是我期待的。

因爲我不是從鍵盤插入text字段的值,所以從slider ranges獲得值..所以如何在文本字段更改時提交。

+0

第一件事首先什麼是你的表格的ID?我看到你已經給你的表單一個名稱,但不是一個ID,你是否在表單中的任何位置使用任何類型爲「submit」的輸入元素? – 2012-02-29 12:28:44

回答

2

您可以添加一個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

+0

它不工作。 – Rafee 2012-02-29 12:07:41

+0

@Rafee'它不工作'不是很具描述性。你能發佈一個鏈接到「不工作」的代碼或粘貼一些錯誤文本? – Jasper 2012-02-29 12:08:55

+0

'stop:function(event,ui){('#range_form')。trigger('submit'); }'我給了我的表單id作爲'range_form',但它沒有觸發 – Rafee 2012-02-29 12:12:15

0

您可以使用change事件滑塊http://jqueryui.com/demos/slider/#events

$("#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.. 
    } 
}) 

當你停止使用滑塊,或者它會被解僱時更改滑塊以編程方式發生..

+0

不工作。 – Rafee 2012-02-29 12:08:52

+0

@Rafee,也許你應該爲你的表單添加一個'action'屬性.. – 2012-02-29 12:37:37

相關問題