Question

I have a simple form:

<form id="cancel" method="post" action="/Controller/Cancel">
   <input class="submitbtn" type="submit" value="Go">
   ...

I’m using jQuery with a jQuery UI dialog. What I’d like to do is hijack the submit of the form and display a dialog. When the user clicks ‘yes’ in the dialog, the form carries on and does a normal page submit. If they click ‘No’, the dialog just cancels.

I have this code:

$(document).ready(function () {

$("#dialog").dialog({
    resizable: false,
    autoOpen: false,
    modal: true,
    buttons: {
        "Yes": function () {
            // Not sure what to do here
            $(this).dialog("close");
        },
        "No": function () {
            $(this).dialog("close");
        }
    }
});

$('#cancel').submit(function (event) {
    event.preventDefault();
    $('#dialog').dialog('open');

});

}); 

My question is, how do I get the submit code to return true/false to the client based on the response from the dialog.

Any help appreciated.

Answer 1

The problem here is that when you use $('#cancel').submit() within the “Yes” button callback, the submit event is triggered again and event.preventDefault() stops the from from actually being submitted.

A quick fix would be to unbind your submit event just before actually submitting the form. (Demo: http://jsfiddle.net/WQjFj/6/)

$("#dialog").dialog({
    resizable: false,
    autoOpen: false,
    modal: true,
    buttons: {
        "Yes": function() {
            $('#cancel').unbind("submit").submit();
            $(this).dialog("close");
        },
        "No": function() {
            $(this).dialog("close");
        }
    }
});

Another solution can be found on this answer: Using jquery ui dialog to confirm action for form submission