How can I stop a form from processing/submitting that is using jquery AJAX submission?

I have a form with two buttons, a submit button and a cancel/close button. When the user clicks submit, the entered data is validated using http://www.position-absolute.com/articles/jquery-form-validator-because-form-validation-is-a-mess/. If everything validates, the form is submitted with jQuery/AJAX. That all works fine and dandy. I run into problems with the cancel button though. I want the cancel button to require confirmation. If the user chooses to proceed, they are taken to a page of my choosing. If they decide they don't want to cancel, then they are simply left on the page. It's the last part that isn't working.

My form code looks like this:

<form name="createPage" id="createPage" method="post" action="pager.php" class="ajax 开发者_开发技巧updateForm">
 <input name="whatever" type="text" />
            <button type="submit" id="submitQuickSave" class="submitSave"><span>save</span></button>
            <button type="submit" id="submitCancel" class="submitClose" onclick='confirm_close()'><span>close</span></button>
</form>

My current cancel script looks like the following. If the user does indeed want to cancel, I unbind the form submit so that validation isn't executed. The form then proceeds to submit and includes cancel as a parameter in the action attribute. I handle the cancellation server side and direct the user to a new page.

function confirm_close()
{
var r=confirm("All changes since your last save operation will be discarded.");
if (r==true)
  {
    $(".ajax").unbind("submit");
  }
else
  {

  }
}

I cannot figure out what to put in the 'else' argument. What happens is that if the users cancels the cancellation (i.e., return false), then the form still tries to submit. I cannot make it stop. I've tried several things from this site and others without success:

event.stopImmediatePropogation

.abort()

Any ideas? Basically, how can I get the cancel/close button work properly?

Consider separating your JavaScript from your HTML. With this in mind, you could write the handler for your the click event you're trying to intercept like this:

$("button#cancel").click(function($event) {
    var r = confirm("All changes since your last save operation will be discarded.");
    if (r) {
        $(".ajax").unbind("submit");
    }
    else {
        $event.preventDefault();
    }
});

You would have to tweak your HTML and add an id attribute to the cancel button:

<button id="cancel" type="submit" value="cancel">Cancel</button>

Example here: http://jsfiddle.net/wvFDy/

Hope that helps!

I believe you just

return false;

Let me know if this works.