I'm creating registration page where a page is having
12 fields.
the process is when user fill ups all fields and clicks the submit button,
it should connect to db and check whether user name is already exists or not and display appropriat msg.
but problem is after checking the user name availabilty, I redirect page to registration page but all fields gets blank and user has to re-enter the data.
so in order to retain registration page data other than username , what I would do?
the condition is user should get msg only and after filling up all details and hitting submit button and page should not reload.
do I have to use another tech. in php?
how would i do that? do i need to use Ajax? I don know anything about it..please help me out...
AJAX is what you want I think. I would probably have a button next to the username field saying "Check availability", and it will use AJAX to call a PHP page (behind the scenes) which will check the username and return available or not.
Seems pretty simple. Read the AJAX tutorial on the w3schools website (google it), that will teach you how to use AJAX.
I personally don't recommend using the available toolkits and frameworks for AJAX, it's much simpler to keep it nice and simple and do it yourself - see w3schools
register.html - This would be the register form page on a real website, in this example it only has the username field. This is the page that the user sees, it has the textbox and 'check availability button'
check_username.php - This is the script that gets called behind the scenes. It takes 'username' as input in the GET e.g. check_username.php?username=the182guy and it will return "available" or "sorry not available".
register.html:
It shows the form and button, when clicked calls the javascript functions which request the check_username.php page passing in the desired username. Which returns the string "sorry not available" or "available", this is then inserted directly into the <span> tag next to the button where it is displayed.
Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>AJAX Check username abvailable test</title>
</head>
<body>
<script type="text/javascript">
function stateChanged()
{
if (xmlHttp.readyState==4)
{
document.getElementById("checkUsernameOutput").innerHTML=xmlHttp.responseText;
xmlHttp = null;
}
}
function GetXmlHttpObject()
{
var xmlHttp=null;
try
{
// Firefox, Opera 8.0+, Safari
xmlHttp=new XMLHttpRequest();
}
catch (e)
{
// Internet Explorer
try
{
xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
}
catch (e)
{
xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
}
}
return xmlHttp;
}
function checkUser()
{
xmlHttp = GetXmlHttpObject();
var username = document.getElementById("username").value;
var url = "check_username.php?username="+username;
xmlHttp.onreadystatechange=stateChanged;
xmlHttp.open("GET",url,true);
xmlHttp.send(null);
}
var xmlHttp = GetXmlHttpObject();
</script>
<form name="register_form" action="register.html" method="post">
<input type="text" id="username" name="username" /> <input type="button" onClick="checkUser();" value="Check availability" /><span id="checkUsernameOutput"></span>
</form>
</body>
</html>
check_username.php:
First it connects to the database, then sends a query which returns the number of rows that matched the username that was inputted. In this example the table is called 'users' and the PK of the table is 'id', and of course the username field is called 'username'.
Code:
<?
//CONNECT DB
$db_server = "localhost";
$db_name = "yourdbname";
$username = "yourusername";
$password = "yourpassword";
$con = mysql_connect($db_server, $username, $password);
$sel = mysql_select_db($db_name);
//MAKE SQL
$sql = "SELECT COUNT(id) AS user_count FROM users WHERE username = '" . $_GET['username'] . "'";
//SEND QUERY
$res = mysql_query($sql);
//CONVERT RESULT TO ARRAY
$row = mysql_fetch_array($res);
if($row['user_count']==0)
{
//NO MATCH FOUND - USERNAME IS AVAILABLE
echo "'" . $_GET['username'] . "' is available!";
}
else
{
//FOUND MATCH(S) - USERNAME NOT AVAILABLE
echo "Sorry, '" . $_GET['username'] . "' is not available.";
}
?>
Last edited by the182guy; Oct 27th, 2007 at 05:24 PM.
AJAX is all very well, but make it work without AJAX first. Unless you're building a wholly-JavaScript application, AJAX is always an enhancement only.
Thank you all for replying
thanks the182guy!!
I tried your code and it's working.
But the criteria is withour using 'check availability button' code should
check availability of user name. After and only clicking on submit button msg should display.
User should fill up all 10-12 fields and then clicks on submit button
user need not to click on 'check availability button'
If that is what you need, you don't need AJAX here. Try the method suggested by me. BTW, Would you mind posting the code you have? You might get better suggestions.
Well if you look at it that way then you never *need* AJAX. It is an enhancement. However that is like saying you never *need* a nicer car.
AJAX is the way forward if you want to compete.
Afterall your probably going to implement javascript validation on the form anyway, so you might aswell verify the user name aswell as validate it at that point, rather than uneccessarily increasing the server load.
Aside from that AJAX is extremely professional and impressive, and of course peoples standards are ever increasing in this web 2.0 world.
Last edited by the182guy; Oct 30th, 2007 at 02:11 PM.
Do I need to use AJax?
Reply With Quote
