Additional jQuery events submitting my Ajax.BeginForm

Question

I have an ASP.Net MVC Ajax.BeginForm that submits and updates my page properly when I click the submit button.

The problem is I need additional events to do the same thing, like when they change the text of an input. The additonal events do properly submit the form but they circumvent the onsubmit javascript generated on the form tag by the Ajax.BeginForm.

Here is the form tag generated by Ajax.BeingForm:

<form action="/Store/UpdateCart" method="post" onsubmit="Sys.Mvc.AsyncForm.handleSubmit(this, new Sys.UI.DomEvent(event), { insertionMode: Sys.Mvc.InsertionMode.replace, updateTargetId: 'updatedContent' });">

And here is the jQuery to bind my other events that need to submit the form via Ajax:

 $("#ShippingType, #ViewCart .ddl").bind("change", function() { $("#ViewCartPage form").submit() });

Any ideas on how to get these additional events to trigger onsubmit like I need it too?

Answer 1

This is a bit of a tricky issue in the current Beta of MVC. You can't use the "submit()" function because it won't trigger the onsubmit handler. Instead, you should call the onsubmit handler directly. The only trick is you need to pass an argument to onsubmit() when you call it. This argument is what becomes the "event" parameter in the handler (see the "new Sys.UI.DomEvent(event)" part). The "event" parameter is used by the MVC Ajax scripts to cancel the default behaviour, when you click the Submit button so that the Ajax stuff can happen uninterrupted.

So, if you change your code to this:

$("#ShippingType, #ViewCart .ddl").bind("change", function() { $("#ViewCartPage form").onsubmit({ preventDefault: function() {} }) });

The onsubmit() event will be triggered when the form fields change. The code creates a "fake" event object that implements the preventDefault() method (which is the only one the MVC Ajax helpers use) so you don't get errors.

Answer 2

Change -

bind("change", function() { $("#ViewCartPage form").submit() });

to -

bind("change", function() { $("#ViewCartPage form").onsubmit() });

Answer 3

Decided to just use a regular form and then the jQuery.Form plugin and this worked in 2 seconds! Wish i would have just went this route orginally.

var options = {
   target: '#updatedContent',   // target element(s) to be updated with server response 
   beforeSubmit: showRequest,  // pre-submit callback 
   success: showResponse  // post-submit callback 
        };

$('#ViewCartPage form').ajaxForm(options);

Man I love jQuery

Answer 4

Microsoft will probably break us, but:

function SubmitMvcAjaxForm(formName) {
    eval('var event = new Object(); event.type="keypress"; ' + document.forms[formName].attributes["onsubmit"].value.replace('(this,', '(document.forms["' + formName + '"],'));
}