AJAX Contact Form; Add / Validate Checkboxes

Chris — Wed, 17 Feb 2010 23:12:08 +0000

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

1
2
3
4
5
6
7
8
9
10
11

function getCheckedValue(field) {

field = $('#' + field)
txt = ""
for (i = 0; i < field.length; i++) {
if (field[i].checked) { txt = field[i].value }
}

if (txt == "") { return "0" } else { return "1" }

}

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

1	if (txt == "") { return "0" } else { return "1" }

with..

1	if (txt == "") { return "0" } else { return txt + " " }

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

1	checkbox: getCheckedValue('checkbox'),

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

1 2	<br /> <input type="checkbox" name="checkbox" id="checkbox" value="Milk"> Milk<br />

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

Website Design Peterborough, Jigowatt - Magento Web Design, UK » CodeCanyon

AJAX Contact Form; Add / Validate Checkboxes