AJAX Contact Form; Add / Validate Checkboxes

Posted by Chris on Wednesday, February 17th, 2010 at 11:12 pm

For all our AJAX Contact Form customers on CodeCanyon, here’s a quick tutorial on how to add / validate checkboxes.

As some have found, the standard Javascript .val() request does not work with checkboxes, for this reason we’ll need to add a quick function to our Javascript handling file, here’s one we made earlier… add this at line 14 of jquery.jigowatt.js

Using this function will return a ’1′ value if the checkbox is ticked and a ’0′ if it isn’t, this will make it very easy for you to validate in the contact.php file.

Note: If for any reason you need the checkbox’s value returned for validation you need to replace

with..

Now you just need to add the value to the post as normal.. aprox line 30 with the above function inserted

For your reference, our HTML for the Checkbox looks like this..

And that’s it on our part, now with some validation you’ll be well on your way to passing checkbox variables.

Related posts:

• AJAX Contact Form; Add or Remove Custom Fields
• Shopp tutorial; only display top level categories
• Change the first day on our PHP Event Calendar Script

This entry was posted on Wednesday, February 17th, 2010 at 11:12 pm and is filed under CodeCanyon, Envato, General. 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.

5 Responses to “AJAX Contact Form; Add / Validate Checkboxes”

1. Jay says:

   February 18, 2010 at 12:08 am

   Well looky here, adding blog posts at 23.30. Nice work Christopher ;-P

   Reply
2. Steph says:

   February 21, 2010 at 8:08 pm

   You should just send us your new .js file with these corrections made, because I’m lost. My Mac doubles the lines, so line 30 is really different.

   Reply
   • Jay says:

     February 22, 2010 at 11:30 am

     Steph, this is a guide for people who want to add their own checkboxes, most of the time users don’t want them so this is not a “correction”.

     Reply
3. Salmon says:

   March 19, 2010 at 9:44 am

   Hi Jigowatt, I tried this edit, but the form only sends me the lowest checked option but not all of the checked option, can you help me?

   Reply
4. Dan says:

   March 23, 2010 at 11:46 am

   Hi guys, sorry to be a complete pain, but i can’t get this to work at all.

   I’m quite possibly being highly thick, but the last little tutorial (for adding and validating new fields) made perfect sense, however this one, to me doesn’t at all!

   For instance, looking at the original un-edited files, trying to add the function to line 14 just wont work as it would be directly after ” name: $(‘#name’).val(), ” and before ” email: $(‘#email’).val(), ”

   Also “Now you just need to add the value to the post as normal.. aprox line 30 with the above function inserted” is lost on me… i don’t at all understand where “checkbox: getCheckedValue(‘checkbox’),” needs to go.

   I’m usually fairly ok with this kind of thing (though admittedly i’m a graphics guy really) so i do feel rather stupid but, any chance you can enlighten me a little more as to exactly where this all needs to go?

   Reply