Unable to call from submit function when i am trying to use change

Question

On click functionality is working fine but when I am using change function then it not hitting submit function

Example 1:

$('button').click(function(e) {
    $('form').submit(function(event) {
        event.preventDefault(); //prevent default action
        var post_url = $(this).attr("action"); //get form action url
        var request_method = $(this).attr("method"); //get form GET/POST method
        var form_data = new FormData(this); //Encode form elements for submission
        $.ajax({
            url : post_url,
            type: request_method,
            data : form_data,
            contentType: false,
            processData:false,
        }).done(function(response) { //
            //pass
        }).fail(function(response) {
            //fail
        });
    });
});

Example 2:

$('input').change(function(event) {
    $(this).parents('form').submit(function(event) {
        event.preventDefault(); //prevent default action
        var post_url = $(this).attr("action"); //get form action url
        var request_method = $(this).attr("method"); //get form GET/POST method
        var form_data = new FormData(this); //Encode form elements for submission
        $.ajax({
            url : post_url,
            type: request_method,
            data : form_data,
            contentType: false,
            processData:false,
        }).done(function(response) { 
            //pass
        }).fail(function(response) {
            //fail
        });
    });
});

Can someone please help me Why Example 2 is not working as I wanted. If you see both code is same but only change in the event name.

am I making mistake or its Jquery default behavior?

do you mean parents, I think it should be parent – Anupam Singh Jul 05 '18 at 04:45 — Anupam Singh, Jul 05 '18 at 04:45

score 0 · Answer 1 · answered Jul 05 '18 at 04:48

I would like to refer you to another answer - Detecting input change in jQuery?

The problem is with the 'change' event which doesn't fire on an input field, you should either be listening to other events such as 'input', 'keydown', 'keypress' or that the 'change' event you're listening to should be on a different form element, such as a select (drop down box)

Brian Patterson · Answer 2 · 2018-07-05T04:58:39.877

Try this..

$(this).parent('form').submit();
$('form').on('submit', function(event) { //dostuff });

As for the change event, try using .on()

$('input').on('change', function(event) { //dostuff });

NOTE: Using change will only fire the event when the element loses focus. If you want the event to fire when the user presses a key, deletes something, pastes etc.. you want to use input

$('input').on('input', function(event) { //dostuff });

score 0 · Answer 3 · answered Jul 05 '18 at 04:52

0

By writing

$(this).parents('form').submit(function(event) {});

function what you are doing is binding an event to the form. What you need to do is trigger a submit for the form too. With your code I'll suggest you add a

$(this).parents("form").submit();

too after the end of bind function you've written.

answered Jul 05 '18 at 04:52

Deepak Singh

610
1
7
23

Why do I need to add manual submit trigger? Why my code is not working – vinay kumar Jul 06 '18 at 18:52
When you write $(this).parents('form').submit(function(event) {}); what it does is bind an event listener with the element you pass as selector. like in this case parent form. That basically means that you've told that when this form will be submitted to these following stuff. Now in order to submit the form you have to trigger that event too which we are doing here explicitly using the trigger method. – Deepak Singh Jul 07 '18 at 01:02
But in Example 1, I am not binding any event but still that works fine. Why? – vinay kumar Jul 07 '18 at 14:46
Please Share the HTML once. To me what it seems as of now is that your button is a submit button and once you click on it the form start the submit process but soon enough the bind funtion gets triggered and the example 1 works as expected – Deepak Singh Jul 08 '18 at 07:33

Unable to call from submit function when i am trying to use change

3 Answers3