How do I handle multiple buttons in a jQuery ajaxform?

Question

I'm using the ajaxform plugin for jQuery. I have a form with Save and Cancel buttons.

How do I handle multiple buttons so that the Save button posts to a URL and the Cancel button reloads the form container with a read only view from a different URL?

Answer 1

You can use a

<input type="submit" ... />

for your Save button and a

<input type="button" class="cancel" ... />

for your Cancel button.

Your Save button will send the form with ajaxForm and you can set another action to your Cancel button with jQuery:

jQuery(function($){
    $('.cancel').click(function(){...});
});

Answer 2

Put each button within a different form. But if the cancel button is simply redirecting then can't it simply post to an ActionResult like an anchor does?

Or have the cancel button do an AJAX post and return the html of a PartialView and replace the contents you want with the partial views html.