Call a function after a form is submitted using jquery

Question

I'm trying to call a function after any form with the class shown below is submitted. However, this doesn't seem to be working for me (the form submits, but the submit button remains active and the loading image is not shown).

$(document).ready(function() {
    $('.uniForm').submit(function() {
      $('#loadingImage').show();
      $(':submit',this).attr('disabled','disabled');
      return true;
    });
});

Here's some HTML:

<form class="uniForm" id="formABC">
//...form.... here
</form>

<img src="loadimage.gif" style="display: none;" id="loadingImage">

does anyone see anything inherently wrong with this that would be preventing things from working correctly?

I have a feeling it's just not being called correctly. Can I call it myself via some HTML like this?

<button type="button" class="primaryAction" alt="Submit Form" onclick="$('#formABC').submit();">Submit Form</button>

Basically, since it takes a couple seconds for the form to process, I'd like to disable the submit button from being pressed again while also showing a loading image so they can SEE that it was pressed. — Shackrock
– Shackrock, Commented Mar 12, 2013 at 12:40
Does your current form have by any chance an input element with name="submit"? — Boaz
– Boaz, Commented Mar 12, 2013 at 12:42
At what point in your code are you binding the submit handler? — Boaz
– Boaz, Commented Mar 12, 2013 at 12:44

Boaz · Accepted Answer · 2013-03-12 12:57:28Z

5

Following your comment, it seems the binding of the handler function to the submit event might be taking place before the form element has been loaded into the DOM.

Ideally, you should bind event handlers only after the DOM has finished loading.

For example:

$(document).ready(function() {
    $('.uniForm').submit(function() {
        ...
    });
});

answered Mar 12, 2013 at 12:57

Boaz

20.3k9 gold badges68 silver badges74 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Shackrock Over a year ago

this doesn't seem to do it either.. it's like it is waiting for the submission to be complete before it does the function, is that possible?

Boaz Over a year ago

The submit event fires immediately when the form is submitted. Make sure the handler is actually bound and executed correctly, by adding alert('submitted!') or something similar to the function. If you don't see the alert prompt on submission, then something's wrong. Also, make sure you don't have JS errors before and after submission.

Shackrock Over a year ago

ok... so the alert shows up. so I'll have to look into this a little more. Maybe my image display code is messed up, let me play around with it.

Boaz Over a year ago

Excellent. In general, when debugging, it's a lot easier to narrow down the problem by adding distinct and simple snippets that just got-to-work.

user1236048 · Accepted Answer · 2013-03-12 12:43:09Z

1

Put an id on the submit input/button and try this:

$('#mySubmitButton').click(function(e) {
    e.preventDefault();
    e.stopPropagation();
    $(this).attr('disabled','disabled');
    $('#loadingImage').show(function() {
        $(this.form).submit();
    });

});

answered Mar 12, 2013 at 12:43

user1236048

5,6327 gold badges53 silver badges88 bronze badges

2 Comments

Shackrock Over a year ago

I tried this one too. This one would load the image correctly, but not submit the form.

user1236048 Over a year ago

@Shackrock - does it output any errors ? try modify the $(this.form).submit(); by $('#myForm').submit();

Mojtaba Rezaeian · Accepted Answer · 2020-08-08 17:43:18Z

1

There is a jQuery plugin named jQuery Form Plugin which helps to submit your form from ajax without refresh and then you can do the rest of actions on its success (which occurs exactly after successful form submission):

    jQuery(document).ready(function () {
        jQuery('#my_submit_button').click(function (e) {
            jQuery(this.form).ajaxSubmit({
                target: false,
                success: function ()
                {
                    your_other_stuff();
                },
            });
        });
    });
    function your_other_stuff(){
        // rest of things
    }

edited Aug 8, 2020 at 17:43

answered Dec 31, 2018 at 1:12

Mojtaba Rezaeian

8,8968 gold badges35 silver badges58 bronze badges

2 Comments

Dave Over a year ago

For what I needed, I needed to change ajaxForm to ajaxSubmit. I thought it wasn't working at first.

Mojtaba Rezaeian Over a year ago

@Dave seems there is a difference between those, and ajaxForm is not for submitting forms.. so I'll update the code regarding to your experience. Thank you.

Aidan Hakimian · Accepted Answer · 2015-10-01 21:36:41Z

0

Try something else:

$('.uniForm input[type=submit]').click(function(){
    $('.uniForm').submit();
    //doStuffafterSubmit
});

edited Oct 1, 2015 at 21:36

Aidan Hakimian

1901 silver badge15 bronze badges

answered Mar 12, 2013 at 12:40

TomekBrzyn

16 bronze badges

Collectives™ on Stack Overflow

Call a function after a form is submitted using jquery

4 Answers 4

4 Comments

2 Comments

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

4 Comments

2 Comments

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related