jensbits.com » webdesign

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

jen — Mon, 10 Aug 2009 13:15:15 +0000

jQuery files updated June 23, 2010

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

For pure javascript it’s painfully straightforward:

>

Javacript Return Confirm
E-mail:

And you get something that looks like this:

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.

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(){
                    $("p#dialog-email").html($("input#emailJQ").val());
                    $('#dialog').dialog('open');
                    return false;
                });
        });

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




jQuery UI Modal Submit
E-mail:






 You entered your e-mail address as:

If this is correct, click Submit Form.
To edit, click Cancel.

Using this method you get a much prettier result:

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.

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(){
                    $("p#TB-email").html($("input#emailTB").val());
                    tb_show('Verify Form Thickbox Style','TB_inline?height=155&width=300&inlineId=TBcontent');
                    return false;
                });

                $('input#TBcancel').click(function(){
                    tb_remove();
                });

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

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



Thickbox Modal Submit
E-mail:







You entered your e-mail address as:

If this is correct, click Submit Form.
To edit, click Cancel.

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

Three flavors for confirming on form submission. Enjoy.

Test Drivin’ Safari 4

jen — Sun, 14 Jun 2009 14:04:02 +0000

I gave Safari 4 a whirl on both Mac and PC. I like it. It brings much of the cool stuff from iTunes into the browser. Cover flow is fun and fresh in a browser. The Top Sites with the page previews is an upscale rip off of Chrome and, really, it’s a good feature for any browser.

Cover Flow

Top Sites

Safari 4 is great for casual browsing and general perusing of the code but web development work stills needs the robustness of the Firefox plugins. Firefox is so ahead of the curve for web developers and I’m so used to it’s fantastic toolbars and debuggers that I don’t know if anyone will catch up. Granted the Safari 4 Web Inspector on the pre-packed Developer toolbar is nifty. Gotta love the ‘Resources’ tab. Nice visual of the weight of each loaded item. The included scripts debugger is handy and a much needed accessory in every browser.

Did I mention Safari 4 is fast? It is. That my biggest complaint with Firefox. It can be slow to render. Maybe that will improve with FF 3.5. Still, the trade off at this point is worth it. Bottom line is Safari 4 is great for browsing and the Web Inspector is a must ‘once over’ tool for developers.

FYI, Lifehacker has a great article on the latest browser speed tests.

No related posts.

Google Analytics API Login Authentication with ColdFusion

jen — Sun, 10 May 2009 23:43:46 +0000

You might also like the ColdFusion and Google Analytics: Getting Out What You Put In post.

Updated 08-02-2009: Replaced this line:

with this:

My Hooking into Google Analytics with ColdFusion post received a suggestion from Raymond Camden that authentication and token acquisition could be done via cfhttp for access to Google Analytics information. So, here it is again with authentication built in. I set this up with a email/password form but you could easily hard code the email and password in if you so desired.

1. Prompt for email and password of Google account that has access to Google Analytics data. This is an all-in-one example so the form submits back to its own page and processing continues.


Google email 

Password

2. Authenticate the credentials with Google.

The googleLogin function sends the email/password combo along with the service and source values as URL parameters required by Google to Google’s client login URL via a post request. The source parameter is a Short string identifying your application, for logging purposes. This string should take the form: “companyName-applicationName-versionID” according to Google. You can put in your company name or whatever name you want followed by the rest of the convention Google suggests. Example: yourcompanyname-analytics-1.0. The default start and end dates are also set here.

The email account is appended onto the Google URL and a get call is made from the callApi function with the loginAuth token attached as a header value.

The header value must be in the form of Authentication: GoogleLogin auth=DF3843483…(it’s kind of long but you get the idea). This authentication is different form AuthSub Proxy authentication used in my previous post.

4. Clean up the XML that returned so we can use XmlSearch() and other handy functions available in ColdFusion. For some reason the atom specification of the XML file bungles those functions up. We need to remove the xmlns nodes from the feed element and remove the dxp prefixes. Do a cfdump on the XML before and after two lines of code used to tidy them up to seed what happens.

Then roll through the accountXML with to grab all the profiles and toss them into an array so we can loop through them later.


	
	
	]*>","") />

5. Loop through the profiles, grab the page views and visitors, and tally them up for all profiles.




		
	    	
			 ]*>","") />

			 

			 

                         

			 

                         

			 Profile: #profileArray[num].title# Pageviews: #NumberFormat(pageviews, ",")# Visitors: #NumberFormat(visitors, ",")# 

		 

		Total pageviews: #NumberFormat(totalpageviews, ",")#
                Total visitors: #NumberFormat(totalvisitors, ",")#

All done. Thank you Raymond Camden and Alex Curelea. Alex got me pointed in the right direction with his post Using the Google Analytics API – getting total number of page views. And, as I mentioned at the get go, Raymond Camden made the suggestion of using the login as some of his examples have done in the past.

Latest mag obsession “Practical Web Design” aka “.net”

jen — Wed, 29 Oct 2008 22:18:34 +0000

I have to hand to the Brits; they are into web design and standardization like nobody’s business. Web design and development is a moving target. I have been to the expensive conferences and events. Loads of great and inspiring info. Problem is you need something that you can refer back to and use as a resource. And, something that is here and now, tangible, tactile, and moving as fast as web evolution itself. I’m talking mags.

I got my hands on a copy of the UK produced and published “Practical Web Design” (known as “.net” in Great Britain) magazine at Borders and have read every word twice. It’s like carrying around the enthusiasm and electricity of a conference in my pocket(book). This is what web designers need. A constant flow of practical and applicable information. It keeps you motivated and relevant. It doesn’t hurt that I have met many of the contributors and advisory panels members at the aforementioned conferences. They are picking the top and, IMHO, the most credible talent to fill the pages.

Now for the bad news. It’s expensive here in the US (over $130/yr) at the current exchange rate. I’ll keeping picking it up a copy at a time to spread out the pain, but I love it anyway.