Question

I am using a price range, ie jquery range slider.
And i have two text fields and price range slider below image

Image

HTML Code

<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 Code

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

}); 

And above code is to displays the price range is two text fields.

Now My Question starts here…

How can i submit form when input text field is change.

I have tried working with keyup , keydown , onchange but working what i am looking for.

Cos I am not inserting the values in text field from keyboard, it gets the values from slider ranges.. so how i can submit when text field is changed.

Answer 1

You can add a stop event handler to your slider widget to submit the form when the user stops sliding:

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

This will trigger a submit event on the parent form of the slider widget. Note that I selected the form by ID so you will have to add an ID to the form, or change the selection for the form to: $('[name="range_form"]') (this is much less effecient).

Docs for the stop event: http://jqueryui.com/demos/slider/#event-stop