Page 1 of 1

Registration Form

Posted: Sat May 28, 2011 6:53 pm
by Pazuzu156
I have this registration form. When users register they are added to a roll on the members.php page that displays who they are and their user info. Though I can register and it works 100%, how would i make it where it will check if the username has already been used, and the registration page can tell them that the username is already in use?

Re: Registration Form

Posted: Mon May 30, 2011 9:13 am
by Celauran
Grab the value of the registration form's username field onkeyup. Use an XMLHttpRequest to pass the info to a PHP page that queries the database and returns whether or not that username exists, then display the responseText.

Code: Select all

<form id="frmAddUser" action="" method="post">
    ...
    <label for="username">Username:</label>
    <input type="text" name="username" onkeyup="checkUsernameAvailability();"/>
    <span id="usernameAvailable"></span><br />
    ...
</form>

Code: Select all

function checkUsernameAvailability()
{
    var username = document.getElementById('frmAddUser').username.value;

    xhr_username = new XMLHttpRequest();

    xhr_username.open('GET', 'foo.php?username=' + username, true);
    xhr_username.onreadystatechange = displayUsernameAvailability;
    xhr_username.send();
}

function displayUsernameAvailability()
{
    if (xhr_username.readyState == 4 && xhr_username.status == 200)
    {
        document.getElementById('usernameAvailable').innerHTML = xhr_username.responseText;
    }
}

Re: Registration Form

Posted: Mon May 30, 2011 3:11 pm
by oscardog
Just an FYI, Celauran, your AJAX won't work in any Internet Explorer. This was taken straight from Tizag and should work in all browsers:

Code: Select all

try{
		// Opera 8.0+, Firefox, Safari
		ajaxRequest = new XMLHttpRequest();
	} catch (e){
		// Internet Explorer Browsers
		try{
			ajaxRequest = new ActiveXObject("Msxml2.XMLHTTP");
		} catch (e) {
			try{
				ajaxRequest = new ActiveXObject("Microsoft.XMLHTTP");
			} catch (e){
				// Something went wrong
				alert("Your browser broke!");
				return false;
			}
		}
	}
To make it even easier, you should use jQuery as it does all of the legwork for you.