Ajax email checker V4

Hi I am trying to use the ajax for checking if email is already in use and am stuck. Here is the code I am using:

This is placed in the js loader in the on load event and is the first event:

window.addEvent('domready', function() {
	// set the url to send the request to
	var url = 'index.php?option=com_chronoforms&chronoform=parent_registration&event=ajax&format=raw';
	var email = $('email');
	email.addEvent('blur', function() {
		// clear any background color from the input
		email.setStyle('background-color', 'white');
		// check that the email address is valid
		regex = /^([^@\s]+)@((?:[-a-z0-9]+\.)+[a-z]{2,})$/i;
		var value = email.value.trim();
		if ( value.length > 6 && regex.test(value) ) {
			// if all is well send the JSON request
			var request = new Request({
				method: 'post',
				url: url,
				data: { 'email' : value },
				onComplete: function(r) {
					// check the result and set the background color
					if ( r == 'ok' ) {
						email.setStyle('background-color', 'green');
					} else {
						email.setStyle('background-color', 'red');
					}
				}
			}).send();
		} else {
			// if this isn't a valid email set background color red
			email.setStyle('background-color', 'red');
		}
	});
});

This is placed in custom code in a new event called on ajax and is the last event:

<?php
// get the query info
$email = JRequest::getString('email', '', 'post');
$email = strtolower(trim($email));
// check that the email field isn't empty
$response = 'in use';
if ( $email ) {
	// Check the database
	$db =& JFactory::getDBO();
	$query = "
		SELECT COUNT(*)
		FROM `#__users`
		WHERE LOWER(`email`) = ".$db->quote($email).";
";
	$db->setQuery($query);
	$count = $db->loadResult();
	if ( $count == 0 ) {
		$response = 'ok';
	}
}
//send the reply
echo $response;
?>

There is an on submit event in the middle adding and retrieving data from the database and doing the captcha etc.
All that happens is that no matter what email I enter all that happens is the background of the email box turns red.
Any ideas where i may be going wrong?

I have purchased the how-to Doc from greyhead.net which is where I got the code from.

Same problem here (using the same code example).
I'm not sure if kmedri also added the ajax cleaning code Max has suggested ($mainframe->close();), but I did.

I checked with FireBug and found that the POST is fine, but it seams that there is no response from the AJAX event.

I'm using J1.7.3 and CF4RC2.

Emanuel.

Hi kmedri & menchee,

I got this working OK on a test form (copy attached).

I had to add two lines at the end of the Ajax part

//send the reply
echo $response;
// add the following two lines.
$mainframe =& JFactory::getApplication();
$mainframe->close();
?>

Bob

PS I think the only other change I made to the code in kmedri's post was the form name in the url.

Thanks Bob,

Actually, before your post, I wrote those last lines in a separate custom code box.
Once I moved them to the same box where the rest of the AJAX code is, it works fine.

I believe that this mainframe->close line is not necessary if Chronoform is licensed. All it dose is to prevent Chronofrom from adding the credit link (which messes the response).

Max, if you read this post, a year or more ago, in a correspondence between us, you said that you'll consider the option of not asking for the license if the application runs from a localhost environment... I still think it is important.

By the way, if anyone is interested in using JSON instead of the basic REQUEST, here are the principles (CF4, J1.7.3, Mootools 1.3):
Instead of just Request([options...]), use Request.JSON([options...])
In the 'On ajax' code, use the posted data directly (it seams that the new Request.JSON doesn't create a JSON object, but only post the data one by one). So JRequest::getString('name','','post') for each element you add to the 'data' option of the Request.JSON will do the job.
Then, when you have your response ready, use echo(json_encode($response)).

These are just the principles. I'll write a dedicated post with a full working example.

Thanks again Bob,
Emanuel.

Hi Emmanuel,

I believe that this mainframe->close line is not necessary if Chronoform is licensed. All it dose is to prevent Chronofrom from adding the credit link (which messes the response).

That is correct. I wrote a hack that checked the event in the url but Max prefers the $mainframe->close() method.

Bob

I am also trying to use GreyHead's "ChronoForms v4 How-to doc Using Ajax :......" which I purchased last week, but the form "hangs" my browser when I enter an email. I get errors like these:

Script: chrome://firebug/content/js/stackFrame.js:633
Script: chrome://firebug/content/js/stackFrame.js:37

I added the two lines of code as suggested but nothing changed.

The email input turns "red" when I enter a string like "test", but doesn't turn white again when I go back in to edit and hangs when a valid email format is entered.

I am using the basic test form that comes with ChronoForms to start with. The only thing I changed was the email elements ID value which I changed from "id_email" to just "email" as required in instructions.

I have attached my form back-up ("test-Copy") in a zip file in hopes that you can point out my error(s).

Thank you in advance.

Is there a way to apply this technique to another field, like Username? I have it working for email, but would like similar functionality for the Username field, or any other filed for that matter.

It would also be really nice to have a popup message that informs the user that the "Username is taken".

I think this line of code is giving me trouble, and looks as if it is "email specific":

// check that the email address is valid
          regex = /^([^@\s]+)@((?:[-a-z0-9]+\.)+[a-z]{2,})$/i;
          var value = mls.value.trim();
          if ( value.length > 6 && regex.test(value) ) {
             // if all is well send the JSON request

as you can see the id for my field is "mls"

this bit of code might be giving me trouble too, as I am using the plugin to show the form:

// set the url to send the request to
       var url = 'clients/create-a-mobile-property-website/real-estate-packages';
       var mls = $('mls');

Hi Riceman,

The regex in the earlier code is just to check that the value being submitted is a valid email before you use Ajax to check if it is in use. You can omit it for a username

// remove any extra spaces and check that the input is at least six characters long
          var value = mls.value.trim();
          if ( value.length > 6 ) {
             // if all is well send the JSON request

I recommend that you use a full URL that links to the form event you want to use for the Ajax code. Don't use an SEF URL.

JURI::base().'index.php?option=com_chronoforms&chronoform=form_name&event=event_name

Bob