Having trouble submitting form and calling queued events after asynchronous event

Question

I have this working on local setup (with jquery.1.6.4) but it is not working on dev setup (jquery.1.3.2).

Consider the following form -

<form onsubmit="return validateMacros();">
     <input id="formsubmitbutton" type="submit" name="formsubmitbutton" value="Submit" />
</form>

Note the validateMacros(); call above.

And the following javascript -

jQuery(document).ready(function()
{

$("input#formsubmitbutton").click(preValidateUrls); 

        function preValidateUrls(evt)
        {
                evt.preventDefault(); //to prevent form submission until completion of async event

                $.ajax({
                    ...
                    ...
                    success: function(res)
                    {
                         $("form#frmBanners").submit();  //This submits the form in case of both versions but in 1.3.2 case, the validateMacros() function is not called
                    }
               });
       }

});

function validateMacros()
{
   //some logic here - which is not executing in case of jquery.1.3.2
}

When jquery.1.6.4 is loaded, the function validateMacros() executes after the completion of execution of preValidateUrls(), which is desired.

But when jquery.1.3.2 is loaded, validateMacros() does not execute at all and the form just submits.

How do I make it working on both the versions. What am I doing wrong?

Answer 1

Go unobtrusive!

$('form#frmBanners').on('submit', validateMacros);

What we're doing here is subscribing the function to the submit event of the form, after you give it an id (I just noticed you used frmBanners as an example). Unobstrusive means you're not putting any Javascript in your HTML, which is the primary purpose of libraries like jQuery. So, anywhere in your external Javascript file, include the line I provided above. Any time the form is submitted and not just when the submit button is clicked, the function will be called.

So, when you call $("form#frmBanners").submit();, the event is fired and the function is called. This is a step closer to following convention as far as firing these kinds of events go.