отправить форму при вводе текста изменить JQuery - PullRequest
Новая
       16

отправить форму при вводе текста изменить JQuery

3 голосов
/ 29 февраля 2012

Я использую диапазон цен, т.е. слайдер диапазона 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 .. так как я могу отправить, когда текстовое поле изменено.

Ответы [ 2 ]

2 голосов
/ 29 февраля 2012

Вы можете добавить обработчик событий 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 в родительской форме слайдера.виджет.Обратите внимание, что я выбрал форму по идентификатору, поэтому вам нужно будет добавить идентификатор в форму или изменить выбор формы на: $('[name="range_form"]') (это гораздо менее эффективно).

Документы для stop событие: http://jqueryui.com/demos/slider/#event-stop

0 голосов
/ 29 февраля 2012

Вы можете использовать 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..
    }
})

Он будет срабатывать всякий раз, когда вы перестанете использовать ползунок или когда произойдет изменение ползунка программным способом.

...