using jquery ui modal dialog to submit a form

Question

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.

pete · Accepted Answer · 2012-06-19 17:18:55Z

3

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;
    });
});

edited Jun 19, 2012 at 17:18

answered Jun 18, 2012 at 19:08

pete

25.2k4 gold badges40 silver badges52 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

peroija Over a year ago

the "Go Back" works without a hitch but hitting Submit in the dialog does nothing but close the dialog, the page doesn't submit

pete Over a year ago

@peroija: (Sorry!) The checkSubmit function should set the ret variable to be returned. Updated answer to reflect that.

peroija Over a year ago

tried it with your changes and tried something else, no beans. firebug reveals that the check submit is returning undefined, not true or false.

pete Over a year ago

@peroija: Sorry, should have realized the dialog button function were asynchronous. Updated answer. Working fiddle here: jsfiddle.net/rWjXU (fiddle is proof-of-concept as fiddle doesn't support asp.net :) )

peroija Over a year ago

now we've gotten somewhere. just a couple corrections to your code for future users. for $('button#saveForLater').click(function(e) drop the last two lines (e.preventDefault(); and return false;) and change the 'button#' to 'input#'. thanks for the all the help

Collectives™ on Stack Overflow

using jquery ui modal dialog to submit a form

1 Answer 1

5 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related