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>

Answer 1

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() {
        ...
    });
});