Paul Ulvinius Blog

From one developer to another

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:

image

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.

About these ads

8 Responses to “How you dynamically submit a ASP.NET MVC AJAX Form from JavaScript and JQuery”

  1. Brent said

    Great post, thank you, saved me some time

  2. Cosmin said

    This is a great fix man. Thank you very much, you saved me a lot of time.

  3. 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.

  4. 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.

  5. Sonya said

    Thanks a lot!! Works like a charm.

  6. James said

    This works fine with Firefox, but is giving me a double submission with IE7, IE8 and Chrome. Any thoughts?

  7. 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.

  8. It didn’t let me post my fix which is to include the script file jquery.unobtrusive-ajax.js file in my layout.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

 
Follow

Get every new post delivered to your Inbox.

%d bloggers like this: