NZfusion.com

Yes, thats right! I have spent a little time working on a cool Ajax-PHP-MySql email register. This way we should be able to keep track of who is interested in getting the juicey details on what it is that we are doing before the rest of the world does… perhaps even before some of our direcotrs find out!

It has taken a little of playing around with to get just right … PHP and MySql was easy enough, all we are doing is loading an email addres into a table… but I had a little to learn around using jQuery and this is what I ended up with:

 /*
 * Function is run when the DOM is ready.
 */
$(function() {
	$("#emailform").validate({
		event: "keyup",
		errorLabelContainer: $("#messageBox"),
		wrapper: "li",
		rules: {
			email: {
				required: true,
                //rangeLenght Option [minLenght,maxLenght]
				rangeLength:[6,50],
				//It is an E-Mail address
				email: true
			}
		},
		messages: {
			email:
                        'Please enter a valid email address'
		}
	});
});

/*
 * The submit function for our AJAX form
 */
function submitEmail(){
	$.ajax({
		url: 'register_ajax.php',
		type: 'POST',
		data: { email: $('#email').val() },
		dataType: 'html',
		timeout: 1000,
		error: function(msg){
			$('#sign_up').html('Sorry, there was a ' +
                             msg.status + ' error saving your email: ' +
                             msg.responseXML);
		},
		success: function(html){
			$('#sign_up').html(html);
		}
	});
}

It is just remarkable how much is acheived with so little javascript code! The form is sent using Ajax supplied by jquery and is validated by the jquery validation plugin.