Question

I have two submit button on my form, Save and Cancel:

    <p>
        <input type="submit" value="Save" />
        <input type="submit" value="Cancel"/>
    </p>

I want to capture the “Cancel” and direct to a url. The JQuery code path for “Save” works. The path for “Cancel” executes, but nothing happens.

$("form").submit(function (e) {
            var submitted = e.originalEvent.explicitOriginalTarget.value || e.originalEvent.relatedTarget.value || document.activeElement.value;
            if (submitted == "Save") {
                return true;
            }
            else {
                e.preventDefault();
                var actionUrl = "/myUrl/" + $("#id").val();
                $.get(actionUrl);
            }
        });

I’m doing this with MVC3.

Answer 1

First, add an id to your button

<input type="submit" id="cancel" value="Cancel">

Then

$('#cancel').click(function(){

  // redirect
  window.location.href = 'http://google.com';

  // prevent default behavior of button
  return false;
});

Adding an id to the button allows you to target the click event of the button rather than the submit event of the form; make it a little easier to handle the two separate actions.