Modal Confirmation Dialog on Form Submit: Javascript, jQuery UI, and Thickbox Varieties

jQuery files updated June 23, 2010. Because Thickbox is no longer supported, I may have to drop its example to update the jQuery files in the future.

If you liked this post, you might also like the jQuery.ajax and jQuery.post Form Submit Examples with PHP post.

I wanted to make a nice modal dialog box that would confirm submission of a form. And, specifically, it had to ask if their e-mail address was correct that they listed on the form. Typos, particularly transposed letters, cause a number of undeliverable e-mails. Making matters worse, sometimes by the time they get to the ‘Submit’ button, the all important e-mail field is no longer in view. Yes, despite the web developer’s best efforts, people still manage to type in their own e-mail incorrectly. I’ve done it. We’re all human.

I already knew about the javascript 1.0 method of ‘return confirm’ but I wanted more control over the look and feel. As an added requirement, I wanted to use Thickbox since I already had that loaded into the app. I don’t like throwing in a bunch of js files for every little nuance. If I can use what I already have, it makes the app much leaner.

So, I Googled it. I only found partial solutions. I wanted to go all the way and have the modal box pop up whether the user hit ‘Submit’ or whether they hit enter on the keyboard in as many browsers as possible (hint: IE). Maybe I didn’t look hard enough, but I ended up creating the solution on my own.

Here are three examples (including a complete demo) of a form submission confirmation dialog. One each for just javascript, the jQuery UI dialog box, and Thickbox.

Javascript 1.0

Echo back a message for fun:

<?php if (isset($_POST['emailJS'])){
 echo "<p class='message'>Javascript 1.0 worked!!! Your e-mail address is " .$_POST['emailJS'];
 echo "</p>";
 }?>

For pure javascript it’s painfully straightforward:

<form id="testconfirmJS" name="testconfirmJS" method="post" onsubmit="return confirm('You entered your e-mail address as:\n\n' + document.getElementById('emailJS').value + '\n\nSelect OK if correct or Cancel to edit.')">>
<fieldset>
<legend>Javacript Return Confirm</legend>

<p><label for="email">E-mail:</label><br />

<input id="emailJS" type="text" name="emailJS" value="" /></p>

<p><input type="submit" value="Submit" /></p>

</fieldset>
</form>

And you get something that looks like this:
javascript confirm box

Low overhead, not too much strain on the brain but pretty plain vanilla. And boring. Let’s do something a little fancier.

jQuery UI

The jQuery UI library is awesome. Loads of flexibility and customization available and they hand you everything you need. For this solution we have to load in an additional stylesheet (you can download a custom ready-made css), the jQuery base js, and the jQuery UI js. The jQuery UI site allows you to customize its js file to include only the parts you will use.

And, because this example uses Thickbox which is no longer supported, the jQuery core and jQuery core have not been updated to the latest versions. If you are not using Thickbox, use the latest version of jQuery.

<link rel="stylesheet" type="text/css" href="css/blitzer/jquery-ui-1.8.2.custom.css">

<script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.8.2.custom.min.js"></script>

The form is untouched for this approach, but we do have to add some js to the document itself and an additional div element that will hold the contents of our modal box.

Here the we set some parameters for the dialog box including what the buttons should say and do. Then a little jQuery is added so that the e-mail is displayed in the box and the box opens on submit allowing the user to hit the ‘Submit’ button or the enter key.

        
        $(function(){        
                // jQuery UI Dialog    
                        
                $('#dialog').dialog({
                    autoOpen: false,
                    width: 400,
                    modal: true,
                    resizable: false,
                    buttons: {
                        "Submit Form": function() {
                            document.testconfirmJQ.submit();
                        },
                        "Cancel": function() {
                            $(this).dialog("close");
                        }
                    }
                });
                
                $('form#testconfirmJQ').submit(function(e){
                    e.preventDefault();

                    $("p#dialog-email").html($("input#emailJQ").val());
                    $('#dialog').dialog('open');
                });
        });

Echo back a message for fun:

<?php if (isset($_POST['emailJQ'])){
 echo "<p class='message'>jQuery UI worked!!! Your e-mail address is " .$_POST['emailJQ'];
 echo "</p>";
 }?>

The form is pretty clean and the div containing the text for the dialog box can be placed anywhere on the page.


<form id="testconfirmJQ" name="testconfirmJQ" method="post">
<fieldset>
<legend>jQuery UI Modal Submit</legend>

<p><label for="email">E-mail:</label><br />

<input id="emailJQ" type="text" name="emailJQ" value="" /></p>

<p><input type="submit" value="Submit" /></p>

</fieldset>
</form>

<div id="dialog" title="Verify Form jQuery UI Style">
<p><span class="ui-icon ui-icon-alert" style="float:left; margin:0 7px 0 0;"></span> You entered your e-mail address as:</p>
<p id="dialog-email"></p>
<p>If this is correct, click Submit Form.</p>
<p>To edit, click Cancel.<p>
</div>

Using this method you get a much prettier result:
jQuery dialog box

Thickbox method

The ever helpful and massively adaptable Thickbox was easily coded to do this as well. Thickbox also requires its own stylesheet and js along with the base jQuery file. Many apps have this already loaded since Thickbox is so wildly popular.

<link rel="stylesheet" type="text/css" href="css/thickbox.css">

<script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="js/thickbox-compressed.js"></script>

As with the jQuery UI method, we add some js to the document to put in the e-mail from the form, open the Thickbox, and instruct the buttons on what actions to take when clicked.

        $(function(){  
                //Thickbox
                
                $('form#testconfirmTB').submit(function(e){
                    e.preventDefault();

                    $("p#TB-email").html($("input#emailTB").val());
                    tb_show('Verify Form Thickbox Style','TB_inline?height=155&amp;width=300&amp;inlineId=TBcontent');
 
                });
                
                $('input#TBcancel').click(function(){
                    tb_remove();
                });
                
                $('input#TBsubmit').click(function(){
                    document.testconfirmTB.submit();
                });
        });

Echo back a message for fun:

<?php if (isset($_POST['emailTB'])){
 echo "<p class='message'>Thickbox worked!!! Your e-mail address is " .$_POST['emailTB'];
 echo "</p>";
 }?>

The form is also clean for this method and a div is added for the Thickbox content.

<form id="testconfirmTB" name="testconfirmTB" method="post">
<fieldset>
<legend>Thickbox Modal Submit</legend>

<p><label for="email">E-mail:</label><br />

<input id="emailTB" type="text" name="emailTB" value="" /></p>

<p><input type="submit" value="Submit" /></p>

</fieldset>
</form>

<div id="TBcontent" style="display: none;">
<p>You entered your e-mail address as:</p><p id="TB-email"></p>
<p>If this is correct, click Submit Form.</p><p>To edit, click Cancel.<p>
<input type="submit" id="TBcancel" value="Cancel" />
<input type="submit" id="TBsubmit" value="Submit Form" />
</div>

The Thickbox, generically styled (the default styling actually), looks like this:
Thickbox modal confirm box

Three flavors for confirming on form submission. Enjoy.

Recommended:


Demo

Posted in jquery, Web development, Work. Tags: , , . Permalink. Both comments and trackbacks are closed.

40 Comments

  1. kropek4767
    December 16, 2011 at 10:30 am | Permalink

    Hi, sorry for my English :)

    I hava a problem with function code, I wan’t us this solutions for mor than one form with difrent id on the same site.

    "Zatwierd?": function() {
    document.protokol.submit();

  2. rootd
    December 13, 2011 at 5:35 am | Permalink

    Dear Jen,

    I using jquery-ui version for submit a query about 20 – 30 query on the same time to update the inventory. On waiting the process to be done(the confirm submit dialog still there). if i accidently doing one more click to the Submit Form button it will sent another process to server. Can Submit Form being disable after it being clicked? so it will be no more duplicated click

    tx

  3. Caio Enokibara
    October 26, 2011 at 11:19 am | Permalink

    I understood, but the rescue through the $ _POST is not working.

    I’ll keep trying and trying to somehow pass the value of “var” to a javascript var in php and so put in a field “hidden”.

    But thanks anyway, even if you can give me a light, Thanks in advance.

  4. October 26, 2011 at 10:54 am | Permalink

    @Caio Enokibara

    That’s not the entire code you need. I only gave you the parts that you needed to replace.

  5. Caio Enokibara
    October 26, 2011 at 9:17 am | Permalink

    Now the thickbox does not open.

    In the file that is in the “include” I own $ _POST [id_plano];

    Code:

    $(‘form#confirmaTB’).submit(function(e){
    e.preventDefault();
    var plano = $(“select#id_plano”).val();
    var fid = $(“input#fid_pesquisado”).val();
    var contrato = $(“input#id_contrato”).val();
    });
    $(‘input#TBsubmit’).click(function(){
    document.confirmaTB.submit();
    });

    });

  6. October 26, 2011 at 8:37 am | Permalink

    @Caio Enokibara

    Your form action should be your external php file and the method should be post.

    $(‘form#confirmaTB’).submit(function(e){
    e.preventDefault();

    var plano = $(“select#id_p”).val();
    var fid = $(“input#fid_p”).val();
    var contrato = $(“input#id_c”).val();
    });

    Thickbox function:

    $(‘input#TBsubmit’).click(function(){
    document.testconfirmTB.submit();
    });

    In your exteranl PHP you can pick up the post vars as you would for any other form submit to PHP. Use $ _POST [input_name].

  7. Caio Enokibara
    October 26, 2011 at 8:02 am | Permalink

    Sorry but if you can help me again, I would like to pass the “var” I created for an external php file receives a $ _POST [variable]…

    code:
    $(‘form#confirmaTB’).submit(function(e){
    var plano = $(“select#id_p”).val();
    var fid = $(“input#fid_p”).val();
    var contrato = $(“input#id_c”).val();

    //document.dadosTeste.getElementById(“dados”);
    //objetoDados.value = plano;

    e.preventDefault();
    .
    .
    .

  8. Caio Enokibara
    October 25, 2011 at 11:34 am | Permalink

    I loved the website and thank you for your attention and help.
    Keep up the good work.

  9. October 25, 2011 at 11:30 am | Permalink

    @Caio Enokibara

    $(“p#TB-email”).html($(“input#emailTB”).val() + ” ” + $(“input#your_other_input”).val());

  10. Caio Enokibara
    October 25, 2011 at 11:19 am | Permalink

    Sorry, I should say. How do I get more than one input in thickbox?

    $(“p#TB-email”).html($(“input#emailTB”).val());
    tb_show(‘Verify Form Thickbox Style’,’TB_inline?height=155&width=300&inlineId=TBcontent’);