Some months ago, I discussed multiple values in CCK using AJAX. A few people showed interest, so here's Part 1 of how AJAX can go together with Drupal.

We'll start with a common use case: checking that a username is available when a new user signs up. After you're done with this tutorial, you should be able to give the new user near-instant feedback on whether or not their username is available. I like to start at my desired result and work backwards, so that's what we'll do.

Let's create a module called demo_user.module and begin!

Step 1: Alter the user registration form to include a result field The desired result here is to show the user whether or not their desired username is available, so let's alter the registration form to give us a div to place our results in. /** * Implemetation of hookformalter() */ function demouserformalter($formid, &$form) { if ($formid == 'userregister') { $usernameverifyresult = ''; $form['account']['name']['#suffix'] = $usernameverifyresult; } } This might actually be the trickiest part. If you have a custom registration form, you'll need to modify this implementation to suit your particular situation.

Step 2: Write a menu hook The next thing we want to do is put together the logic that actually accomplishes our task. In this case, our task is to see if a given username is already taken. First, write a menu hook like so: /** * Implemetation of hookmenu() */ function demousermenu($maycache){ $items = array(); if (!$maycache) { $items[] = array( 'path' => 'user/usernamecheck', 'title' => 'username check', 'callback' => 'demouserusernamecheck', 'callback arguments' => array($GET['username']), 'access' => true, 'type' => MENUCALLBACK, ); } return $items; }

This callback will take the username we pass in with GET (more on that later) and shoot it over to a function called demouserusername_check(). (Note: don't forget to change the 'access' key to something appropriate for you!)

Step 3: Write some logic to compare the requested user name to what's already in the database. We can check to see if the requested username is already taken with a simple sql query: SELECT name FROM users WHERE name = $requested_name (Note: if your users table is case-sensitive (this is rare), you might want to change the query to a LIKE) This function takes the result of the check, and generates the appropriate user-facing response. I've used two graphics here, cross.gif for a failure and check.gif for success:

/** * ajax user name check. * * Checks for the availability of a given username. * @author Domenic Santangelo * @param string $username The desired username * @return string HTML-ified result of the check. */ function demouserusernamecheck($username) { $result = dbresult(dbquery("SELECT name FROM {users} WHERE name = '%s'", $username)); if($result) { $icon = "cross.gif"; $msg = "It looks like this username is already on record. Do you want to retrieve your password?"; } else { $icon = "check.gif"; $msg = "Thanks!"; } echo "{$msg}"; } Notice that even though we're throwing user-generated strings into a sql query (a potentially dangerous operation), dbquery() automatically escapes the string with dbescapestring() via dbquery_callback().

STEP 4: Wire the callback into JavaScript Now let's write a JavaScript function that will handle passing the requested username to our callback. This is how we can get the asynchronous request to work. I like to have a little spinner graphic to show that the check is processing, so I stuck a graphic called spinner.gif in /sites/all/themes/mysite/images/. Now, using the magic of JQuery:

function usernameCheck(obj) { //Spinner shows while the ajax call does its thing $('#usernameresult').html('Validating your username...'); $('#usernameresult').slideDown();

//Actually perform the call $.ajax({ type: "GET", url: '/user/usernamecheck', data: "username="+obj.value, success: function(msg){ domCallback(msg); } }); } Stick this little function into a .js file that gets loaded on your site — either on the registration page only, or sitewide, whatever… just be sure it's there!

STEP 5: Wire the JavaScript function into the Username field on the registration page Let's go back to our hookformalter() implementation and let the form field know that we should fire the username check when the user enters a name and tabs/clicks out of the field

/** * Implemetation of hookformalter() */ function demouserformalter($formid, &$form) { if ($formid == 'userregister') { $usernameverifyresult = ''; $form['account']['name']['#suffix'] = $usernameverifyresult; $form['account']['name']['#attributes'] = array('onblur' => 'usernameCheck(this)'); //added the call to our JS function } } STEP 6: Theming You'll want to theme this all to be appropriate to your site. I don't have any magic sauce for you on this one, but it should be a straightforward task.

Grats, you've implemented a rad-looking ajax username checker!