How you dynamically submit a ASP.NET MVC AJAX Form from JavaScript and JQuery

I ran into a problem the other day when trying to submit a form generated with Ajax.BeginForm(…). I have an <a> -tag with a click-event, so when you click the <a> -tag the form is submitted. First of all, if you use a submit button or image submit button there is no issue, this only applies if you want to submit the form programmatically from JavaScript. The BeginForm method generates a form with inline JavaScript in the forms onsubmit attribute. The problem you run into is that this code never gets executed when you call the forms submit method directly from JavaScript.

To get around this issue, you can bind a function to the submit event that contains the same code as the code in the onsubmit attribute. You can do this as soon as the DOM is ready to be manipulated:

Feel free to copy/paste from here:
$("form").submit(function(event) { eval($(this).attr("onsubmit")); return false; });

The key here is to pass the event parameter (otherwise it will work only in IE but not in FF for some reason), use eval to run the onsubmit code and finally return false to prevent the form from being submitted in a traditional non-Ajax manner.

Now you should be able to submit the form programmatically like below:
<a onclick="$(this).parents(‘form’).submit();return false;">Send</a>
(this code only works if the <a> –tag is located within the form)

If anyone finds another solution to this problem please let me know, but in the mean time this works fine.