CODEWITHSUNDEEP
jqueryformsonchange
Rafee
Rafee

Reputation: 4078

submit form when input text is change jquery

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

Image

enter image description here

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.

Upvotes: 3

Views: 2665

Answers (2)

Jasper
Jasper

Reputation: 76003

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

Upvotes: 2

Gabriele Petrioli
Gabriele Petrioli

Reputation: 196306

You can use the change event of the slider 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..
    }
})

It will get fired whenever you stop using the slider, or whenever a change to the slider happens programmatically..

Upvotes: 0

Related Questions