jensbits.com Visit Site

WordPress 2.8.3 is available! Please update now.

Edit Post

Permalink: http://www.jensbits.com/2009/08/07/confirmation-d…kbox-varieties/ Edit confirmation-dialog-before-submitting-a-form-javascript-jquery-ui-and-thickbox-varieties

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 in 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 plain vanilla 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.
<h2>Javascript 1.0</h2>
For pure javascript it's painfully straightforward:
[xml]
<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>
[/xml]
And you get something that looks like this:
<img src="http://jensbits.com/images/js-JS-FormSubmit.gif"
alt="javascript confirm box" />
Low overhead, not too much strain on the brain but pretty plain
vanilla. Let's do something a little fancier.
<h2>jQuery UI</h2>
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.
[xml]
<link rel="stylesheet" type="text/css"
href="css/jquery-ui-1.7.2.custom.css">
<script type="text/javascript"
src="js/jquery-1.3.2.min.js"></script>
<script type="text/javascript"
src="js/jquery-ui-1.7.2.custom.min.js"></script>
[/xml]
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.
[js] // 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(){
$("p#dialog-email").html($("input#emailJQ").val());
$('#dialog').dialog('open'); return false; });
[/js]
The form is pretty clean and the div containing the text for the dialog
box can be placed anywhere on the page.
[xml]
<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>
[/xml]
Using this method you get a much prettier result:
<img src="http://jensbits.com/images/js-JQ-UI-FormSubmit.gif"
alt="jQuery dialog box" />
<h2>Thickbox method</h2>
The ever helpful and massively adaptable Thickbox was easily coded to
do this as well. The 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.
[xml]
<link rel="stylesheet" type="text/css" href="css/thickbox.css">
<script type="text/javascript"
src="js/jquery-1.3.2.min.js"></script>
<script type="text/javascript"
src="js/thickbox-compressed.js"></script>
[/xml]
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.
[js]
//Thickbox $('form#testconfirmTB').submit(function(){
$("p#TB-email").html($("input#emailTB").val()); tb_show('Verify Form
Thickbox
Style','TB_inline?height=155&amp;width=300&amp;inlineId=TBcontent');

return false; }); $('input#TBcancel').click(function(){ tb_remove();
}); $('input#TBsubmit').click(function(){
document.testconfirmTB.submit(); });
[/js] The form is also clean for this method and a div is added for the
Thickbox content.
[xml]
<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>
[/xml]
The Thickbox, generically styled, looks like this:
<img src="http://jensbits.com/images/js-TB-FormSubmit.gif"
alt="Thickbox modal confirm box" />
Three flavors for confirming on form submission. Enjoy.
<a
href="http://jensbits.com/demos/forms/index.php">Demo</a>
Zip of all files

Word count: 685

Draft Saved at 7:18:13 pm. Last edited by jen on August 7, 2009 at 8:44 pm

Excerpt

Excerpts are optional hand-crafted summaries of your content that can be used in your theme. Learn more about manual excerpts.

Send Trackbacks

Send trackbacks to:
(Separate multiple URLs with spaces)

Trackbacks are a way to notify legacy blog systems that you’ve linked to them. If you link other WordPress blogs they’ll be notified automatically using pingbacks, no other action necessary.

Custom Fields

Name	Value
Key	Value1
Key	Value1
Key	Value1249861924

Add new custom field:

Name	Value
Enter new Cancel

Custom fields can be used to add extra metadata to a post that you can use in your theme.

Discussion

Allow comments on this post
Allow trackbacks and pingbacks on this post

jensbits.com Visit Site

Show on screen

Screen Layout

Get help with “Edit Post”

Other Help

Edit Post

Publish

Post Tags

Categories

+ Add New Category

Excerpt

Send Trackbacks

Custom Fields

Discussion

Post Slug

Post Revisions