ben-huddleston.com

First off, the large portion of the code for this little script was written by other folks, so let me give a shout out to them.  I used the FormProcessor.class.php file from Simon Willison's excellent "Easier form validation with PHP " script which I modified slightly (modified file available here: http://www.minc.info/ajaxcontact/FormProcessor.class.phps ). The javascript pre-validation is done using a modified version of Stephen Poley's Javascript form validation script: http://www.xs4all.nl/~sbpoley/webmatters/formval.html. Modified file is available here: http://www.minc.info/ajaxcontact/formval.js. And for the AJAX contact form, I borrowed heavily from Andrew Walsh. I found his script on HotScripts I believe, but I can't seem to find it anymore.  Anyway, I think this is his site . Unfortunately, he didn't put his url in the script so I'm not completely certain. You can see my modified version of the form processor here: http://www.minc.info/ajaxcontact/form_processor.phps . 

So, now that the kudos are over…I combined all three methods into one overall contact form.  It uses the AJAX version if people have javascript enabled, and defaults back to the PHP form if they don't.  And it pre-validates the data to warn users about input that will get rejected by the contact form before they submit.

Unfortunately, there's no good way to test if people have javascript enabled without doing redirects with some javascript code, which means I have to maintain two different pages. That's annoying.  I decided an easier method would be to set a cookie via javascript and then look to see if the cookie exists. 

The bad part about using the cookie method is it doesn't work the first time people hit that particular page.  But, generally, people don't come directly to your contact page, normally they'll go through some other content page before deciding to contact you.  Thus, you just have to make sure you put the cookie code into the header of all your pages so that when they decide to contact you, the cookie is there. Unless of course they have javascript disabled.  In that case, we want to serve them the PHP version. Now, I came up with a fallback method for the instance of someone coming directly to the contact page as well.  If by some chance a user comes directly to your contact page and they have javascript enabled and no cookie, we feed them the PHP form, but with the javascript pre-validation included.

Ok, so that's all fine and dandy, but what happens if the user has javascript disabled and fills out the PHP form incorrectly?  Well, we do validation on that as well and kick the user back to the form and warn them that their data is incorrect (and make it pretty plain which data is bad). 

By now, you probably want to see what it does. Just remember, the first time you load the page, it's going to give you the PHP form as the javascript cookie will just be getting set.  Try out the PHP form (and input some numbers or something in text fields and letters in number fields). Submit it with errors and watch the PHP error handling.  Then reload the page and try out the AJAX form. See it in action

Want to see the form page code? Here it is.  Download the full code.

Let me know what you think in the comments.

This entry was posted on Friday, April 6th, 2007 at 12:03 am and is filed under AJAX, Coding, PHP. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.