How you dynamically submit a ASP.NET MVC AJAX Form from JavaScript and JQuery
Posted by paululvinius on March 3, 2009
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.
Paul Ulvinius Blog 
Brent said
Great post, thank you, saved me some time
Cosmin said
This is a great fix man. Thank you very much, you saved me a lot of time.
Arthur J. said
Thanks! Post was very helpful for me.
I used like that:
$(function() {
$(".next-page").click(function() {
document.forms["product-list-form"].action = "/Product/List?page=" + (parseInt($("#current").html()) + 1);
$("#product-list-form").submit();
return false;
});
$("#product-list-form").submit(function(event) {
eval($(this).attr("onsubmit"));
$("#current").html(parseInt($("#current").html()) + 1);
return false;
});
});
Like that. Tag is in form.
Emil Badh said
Thank you for this. I previously got the submitting to work in both IE and FF, but it failed in Chrome. With this it works with Chrome as well.
I’d like to add though that if you (like I did) renders the form tag in question in the partial view that you return from your callback you can use:
$("form").live("submit", function (event) { eval($(this).attr("onsubmit")); return false; });This makes this solution work with the new form as well.
Sonya said
Thanks a lot!! Works like a charm.
James said
This works fine with Firefox, but is giving me a double submission with IE7, IE8 and Chrome. Any thoughts?
Ray Simpson said
So I was led here because my Ajax.BeginForm was not returning the partial view inline. This fix, does not apply to MVC 3, and I found out my problem was I did not include the in my layout. Without it, the Ajax does not post. I hope this helps somebody.
Ray Simpson said
It didn’t let me post my fix which is to include the script file jquery.unobtrusive-ajax.js file in my layout.