How to make a modal confirmation dialog before submitting a form?

Question

Hi all, I am a beginner in web/javascript programming and wonder if anyone can give me a kick start simple example of a modal confirm dialog just before a form with multiple submit buttons being submitted using a pre-defined button? I stumbled upon jQuery and SimpleModal and wonder if it would fit my ASP MVC project.

I ended up in the following non-working codes, I think my 1st problem is do not know how to return a value from the dialog?:

<script type="text/javascript">
    $(document).ready(function() {
    $("form").submit(function(ev) {
            return confirm("Confirm?");
        });
    });

    function confirm(message) {
        $("#confirm").modal({
            close: true,
            overlayId: "confirmModalOverlay",
            containerId: "confirmModalContainer",
            onShow: function modalShow(dialog) {
                dialog.overlay.fadeIn("slow", function() {
                    dialog.container.fadeIn("fast", function() {
                        dialog.data.hide().slideDown("slow");
                    });
                });

                dialog.data.find(".confirmMessage").append(message);
                dialog.data.find(".btnYes").click(function() {
                    $.modal.close();                                       
                });
            }
        })
    }        
</script>


<div id="confirm" style="display:none">
    <a href="#" title="Close" class="modalCloseX simplemodal-close">x</a>
    <div class="confirmHeader"><span>Confirm</span></div>
    <p class="confirmMessage"></p>
    <div class="buttons">
     <div class="btnYes">Yes</div><div class="btnNo simplemodal-close">No</div>
    </div>
</div>

It would be nice if anyone direct me to somewhere online for a crash course of web programming :)

Answer 1

You don't need to use jquery for a simple modal confirm dialog when submitting a form. The browser provides a few modal system looking dialogs. One being "confirm".

This simple javascript would do:

<form method="post" action="myurl.aspx" onsubmit="return confirm('Submit this form?')">
...
</form>

For a crash course you could check out W3Schools or just search google for tutorials.

Answer 2

Personally, I didn't bother doing it that way.

Boxy is a jQuery plugin that has a confirm box control already.

The example for it is as follows:

$('#confirm-actuator').click(function() {
    Boxy.confirm("Please confirm:", function() { alert('Confirmed!'); }, {title: 'Message'});
    return false;
});

If you take a look at the Boxy site itself, it'll also show you how to retrieve the value submitted etc.

EDIT: Implementation for you would be....

 $(document).ready(function() {
    $("form").submit(function(ev) {
        $('#mySubmitBtn').click(function() {
            Boxy.confirm("Are you sure?", function() { /**DO ACTION FOR CONFIRM**/ }, {title: 'Confirm'});
            return false;
        });
    });

});

And then place an ID on the submit button of mySubmitBtn.

I've not tested that code off hand but that should hopefully do the trick.

Hope this helps.

Though according to the developer this method is not intended to replace the native window.confirm() function provided by browsers as it does not have the capability to block program execution while the dialog is visible.

However, I don't think that would effect your form submit, so you should be all good to use this method.

Answer 3

Here's a breakdown of 3 different ways to accomplish this:

Modal Confirmation Dialog on Form Submit

Answer 4

I'm looking for a good simple solution, too.

In our case, we're actually trying to replace javascript's "confirm" - apparently the default alert box looks too much like an error so we want to be able to customize it to look more friendly.