using jquery ui modal dialog to submit a form

I am having difficulty using JQuery UI Modal Dialog when submitting a form. The intent is you hit the submit button, the modal pop ups and depending on your selection from the modal the form either submits or it doesn’t. Instead the modal pops up and automatically submits

Front end:

<div id="dialog" title="Basic dialog">
    <p>Please double check to be sure all data is entered correctly.</p>
</div>
<div class="buttons">
    <asp:Button ID="btnSave" Text="Save for later" runat="server" OnClick="btnSubmit_Click"
        ValidationGroup="GroupSave" />
    <asp:Button ID="btnSubmit" Text="Submit" runat="server" OnClientClick="return checkSubmit()" OnClick="btnSubmit_Click" />
</div>

What I have tried for the jquery/js

A.)

function checkSubmit() {
$("#dialog").dialog({ modal: true,
    buttons: { "Submit": function () { $(this).dialog("close"); return true; },
        "Go Back": function () { $(this).dialog("close"); return false; }
    }
});
}

B.)

$(document).ready(function () {
$("#dialog").dialog({ autoOpen: false,
    modal: true,
    buttons: { "Submit": function () { $(this).dialog("close"); return true; },
        "Go Back": function () { $(this).dialog("close"); return false; } 
    }
});
});

function checkSubmit() {
 $("#dialog").dialog("open");
}

I understand how B (specifically the checkSubmit) fails, all it is doing is opening the dialog but for A I thought it would work considering I am having the buttons return values but that too is essentially just opening dialog.

Answers:

Thank you for visiting the Q&A section on Magenaut. Please note that all the answers may not help you solve the issue immediately. So please treat them as advisements. If you found the post helpful (or not), leave a comment & I’ll get back to you as soon as possible.

Method 1

Use a button labeled “Submit” to open the dialog:

<div id="dialog" title="Basic dialog">
    <p>Please double check to be sure all data is entered correctly.</p>
</div>
<div class="buttons">
    <asp:Button ID="btnSave" Text="Save for later" runat="server" OnClick="btnSubmit_Click" ValidationGroup="GroupSave" />
    <input type="button" id="preSubmit" value="Submit" />
    <asp:Button ID="btnSubmit" class="ui-helper-hidden" Text="Submit" runat="server" OnClick="btnSubmit_Click" />
</div>

Use the Submit button in the dialog to trigger the click event for your <asp:Button>.

function submitForm() {
    $('input#<%=btnSubmit.ClientID %>').click();
}
function checkSubmit() {
    $("#dialog").dialog({
        "modal": true,
        "buttons": {
            "Submit": function() {
                submitForm();
            },
            "Go Back": function() {
                $(this).dialog("close");
            }
        }
    });
}
$(document).ready(function() {
    $('button#preSubmit').click(function(e) {
        checkSubmit();
        e.preventDefault();
        return false;
    });
    $('button#saveForLater').click(function(e) {
        $("#dialog").dialog('close');
        e.preventDefault();
        return false;
    });
});​

All methods was sourced from stackoverflow.com or stackexchange.com, is licensed under cc by-sa 2.5, cc by-sa 3.0 and cc by-sa 4.0