Jump to content

PHP/MYSQL/AJAX - Checking if a username is taken.

Flames

By Flames
in Javascript Help

 Share

Recommended Posts

Flames Member

Flames

Posted
Posted

i want it to make an ajax function that checks if a username is already in the database when registering and coming up with a message saying username is taken if it is taken. The form is rather simple at the moment and will probably not need any more AJAX codes except check username and check email which is probably pretty much the same function.

 

<html>
<head>
<title>
- Registration
</title>
<script type="text/javascript">
function emailvalidation(entered)
{
with(entered)
{
apos=value.indexOf("@");
dotpos=value.lastIndexOf(".");
lastpos=value.length-1;
if (apos<1 || dotpos-apos<2 || lastpos-dotpos>3 || lastpos-dotpos<2)
{
document.regform.register.disabled=true;
document.regform.email.style.backgroundColor='red';
var x = document.getElementById('emailtext');
x.innerHTML='Your email is invalid!';

}
else
{
document.regform.register.disabled=false;
document.regform.email.style.backgroundColor='lime';
var x = document.getElementById('emailtext');
x.innerHTML='Your email fits validation, but it need to be valid for activation!';
}
}
}

function username(entered)
{
with(entered)
{
var username = entered.value.length;
if (username < 5)
{
document.regform.register.disabled=true;
document.regform.user.style.backgroundColor='red';
var x = document.getElementById('usernametext');
x.innerHTML='Username Too Short';

}
else if (username > 30)
{
document.regform.register.disabled=true;
document.regform.user.style.backgroundColor='red';
var x = document.getElementById('usernametext');
x.innerHTML='Username Too Long';

}
else
{
document.regform.register.disabled=false;
document.regform.user.style.backgroundColor='lime';
var x = document.getElementById('usernametext');
x.innerHTML='Username Valid (May be taken)';
}
}
}

function password(entered)
{
with(entered)
{
passwordlength = entered.value.length
if(passwordlength > 30)
{
document.regform.register.disabled=true;
document.regform.pass.style.backgroundColor='red';
var x = document.getElementById('passtext');
x.innerHTML='Password Too Long';
}
else if(passwordlength < 5)
{
document.regform.register.disabled=true;
document.regform.pass.style.backgroundColor='red';
var x = document.getElementById('passtext');
x.innerHTML='Password Too Short';
}
else
{
document.regform.register.disabled=false;
document.regform.pass.style.backgroundColor='lime';
var x = document.getElementById('passtext');
x.innerHTML='Password Valid';
}
}
}

function password2(entered)
{
with(entered)
{
if(document.regform.pass.value != entered.value)
{
document.regform.register.disabled=true;
document.regform.pass2.style.backgroundColor='red';
var x = document.getElementById('pass2text');
x.innerHTML='Passwords Must Match';
}
else
{
document.regform.register.disabled=false;
document.regform.pass2.style.backgroundColor='lime';
var x = document.getElementById('pass2text');
x.innerHTML='Passwords Match';
}
}
}
</script>
</head>
<body>
<center>
Use the form below to register at <br>
<form action = "reg_info.php" method = "post" name="regform">
<input type = "hidden" name = "reg258741" value = "reg258741">
Desired Username: <input type = "text" size = 20 name = "user" id="user" onChange="username(this);"><div id="usernametext">Username between 5-32 characters.</div><br>
Desired Password: <input type = "password" size = 20 name ="pass" onChange="password(this)"><div id="passtext">Password between 5 - 30 characters</div><br>
Repeat Password: <input type = "password" size = 20 name = "pass2" onChange="password2(this)"><div id="pass2text">Password must match with before</div><br>
Email: <input type = "text" size = 20 name = "email" id="email" onChange="emailvalidation(this);"><div id="emailtext">Your email must be valid!</div><br>
<input type = "submit" id="register"value = "Register!" DISABLED>
</form>
</center>
</body>
</html>

 

i have absolutely not a clue and if you help it would be nice if there were little comments explaining what each chunk of code does, as for the DB & table it needs to check table Account fields username and email

Link to comment
Share on other sites
Flames Member

Flames

Posted
  • Author
Posted

i made an ajax page which i cant return the results of a php variable from

 

form

<html>
<head>
<title>
- Registration
</title>
<script type="text/javascript">
function getHTTPObject() {
var xmlhttp;
if (!xmlhttp && typeof XMLHttpRequest != 'undefined') {
try {
xmlhttp = new XMLHttpRequest();
} catch (e) {
xmlhttp = false;
}
}
return xmlhttp;
}
var http = getHTTPObject();

function emailvalidation(entered)
{
with(entered)
{
apos=value.indexOf("@");
dotpos=value.lastIndexOf(".");
lastpos=value.length-1;
if (apos<1 || dotpos-apos<2 || lastpos-dotpos>3 || lastpos-dotpos<2)
{
document.regform.email.style.backgroundColor='red';
var x = document.getElementById('emailtext');
x.innerHTML='Your email is invalid!';

}
else
{
document.regform.email.style.backgroundColor='lime';
var x = document.getElementById('emailtext');
x.innerHTML='Your email fits validation, but it need to be valid for activation!';
http.open('GET', 'ajax.php?function=CheckUserName$=username'+entered, true);
http.send(null);
eval(http.responseText);
}
}
}


function username(entered)
{
with(entered)
{
var username = entered.value.length;
if (username < 5)
{
document.regform.user.style.backgroundColor='red';
var x = document.getElementById('usernametext');
x.innerHTML='Username Too Short';

}
else if (username > 30)
{
document.regform.register.disabled=true;
document.regform.user.style.backgroundColor='red';
var x = document.getElementById('usernametext');
x.innerHTML='Username Too Long';

}
else
{
document.regform.user.style.backgroundColor='lime';
http.open('GET', 'ajax.php?function=CheckUserName&=username'+entered, true);
http.send(null);
eval(http.responseText);
<?php
if($_POST['taken'] == "yes")
{
?>
document.getElementById('usernametext').innerHTML = 'Username is Taken'
<?php
}
else
{
?>
document.getElementById('usernametext').innerHTML = 'Username valid and has not been taken.'
<?php
}
?>
}
}
}

function password(entered)
{
with(entered)
{
passwordlength = entered.value.length
if(passwordlength > 30)
{
document.regform.pass.style.backgroundColor='red';
var x = document.getElementById('passtext');
x.innerHTML='Password Too Long';
}
else if(passwordlength < 5)
{
document.regform.pass.style.backgroundColor='red';
var x = document.getElementById('passtext');
x.innerHTML='Password Too Short';
}
else
{
document.regform.pass.style.backgroundColor='lime';
var x = document.getElementById('passtext');
x.innerHTML='Password Valid';
}
}
}

function password2(entered)
{
with(entered)
{
if(document.regform.pass.value != entered.value)
{
document.regform.pass2.style.backgroundColor='red';
var x = document.getElementById('pass2text');
x.innerHTML='Passwords Must Match';
}
else
{
document.regform.pass2.style.backgroundColor='lime';
var x = document.getElementById('pass2text');
x.innerHTML='Passwords Match';
}
}
}
</script>
</head>
<body>
<center>
Use the form below to register at <br>
<form action = "reg_info.php" method = "post" name="regform">
<input type = "hidden" name = "reg258741" value = "reg258741">
Desired Username: <input type = "text" size = 20 name = "user" id="user" onkeyup="username(this);"><div id="usernametext">Username between 5-32 characters.</div><br>
Desired Password: <input type = "password" size = 20 name ="pass" onkeyup="password(this)"><div id="passtext">Password between 5 - 30 characters</div><br>
Repeat Password: <input type = "password" size = 20 name = "pass2" onkeyup="password2(this)"><div id="pass2text">Password must match with before</div><br>
Email: <input type = "text" size = 20 name = "email" id="email" onkeyup="emailvalidation(this);"><div id="emailtext">Your email must be valid!</div><br>
<input type = "submit" id="register"value = "Register!">
</form>
</center>
</body>
</html>

 

ajax.php

<?php
require("config.php");
mysql_select_db($db, $con);
if ($_REQUEST['function']=="CheckUserName"){
$query = "SELECT count(*) FROM Account WHERE username = '{$_REQUEST['username']}'";
$result = mysql_query($query) or die("alert('Database error: ".mysql_error()."');");
$row = mysql_fetch_row($result);
if ($row[0]>0){
echo "document.getElementById('usernametext').innerHTML = 'That username is already taken.';"; 
//note ive tired using echo "alert('Username exists')"; and nothing happens.
$taken = "yes";
return $taken;
}
else
{
echo "document.getElementById('usernametext').innerHTML = 'That username is valid and can be taken.';";
}
}
?>

Link to comment
Share on other sites
alexweber15 Member

alexweber15

Posted
Posted

just jumping on the bandwagon here with a few tips:

 

- write it for just plain ol PHP first and make sure it works!

- download and install firebug

- only NOW add the AJAX stuff, using firebug's console.log(), to help find where you're doing this wrong

 

couple AJAX-related tips too...

- doing it by hand is a good learning experience but using a library such as jquery, dojo, prototype, etc makes it SO much easier to make and interpret AJAX requests

- also, i didn't check your code line by line, but in order to get your PHP script to return values to the AJAX call you should either set appropriate headers (XML/JSON - and even plaintext if you want to be pedantic) before the output or if you wanna be lazy for testing just use die($return value) for plain text.  ( simply returning values from a PHP script wont get received by the AJAX call )

Link to comment
Share on other sites
This thread is more than a year old. Please don't revive it unless you have something important to add.

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
 Share
Go to topic listing
×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.