Test username availability

**Macario** · 04-11-2009

In theory, the username availability has already been made, but now it displays error message on a new page.

What I'm trying to do is, on the onblur event of the form user name, php query monitors the availability and then displays the same page, if the username is available, it displays next to the form.

I searched and found some guides that explain how to do it, but all I found contains a javascript file that takes up a lot of KB (80-90-120) with inside rows and rows of code inability (at least for me).

Is it possible to do that is an easier way? Can anyone tell me where can I find a good guide to test the username available, or alternatively even if not directly explain me?

**Modifier** · 04-11-2009

That's normal, you need javascript to do it.

A simple example would be :

HTML Code:

<script>
function script1(){
     var e = document.getElementById ("bar");
     e.innerHTML = "Great!"
}
</script>
<div id="bar">
Hello how are you?
</div>
<input type= "button" value= "Run as" onClick= "script1()" />

**Macario** · 04-11-2009

Ok, that means I need to know javascript. But what I do not understand is why there is all the difference. That is to show the same written a new page I made a few lines of code, and to display the same page should have a file of hundreds of lines of code.

And I tried the javascript, but there are still mistakes to be corrected, because when I press control the browser tells me: Error on page

HTML Code:

<HTML>
<HEAD>
<TITLE>CONTROL</TITLE>
<script language="Javascript" type="text/javascript">
<!--
var myRequest = null;

function CreateXmlHttpReq2(handler) {
  var xmlhttp = null;
  try {
    xmlhttp = new XMLHttpRequest();
  } catch(e) {
    try {
        xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");
    } catch(e) {
        xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
    }
  }
  xmlhttp.onreadystatechange = handler;
  return xmlhttp;
}

function myHandler2() {
    if (myRequest.readyState == 4 && myRequest.status == 200) {
        e = document.getElementById("ex4result");
        e.innerHTML = myRequest.responseText;
    }
}

function esempio4() {
    var name = document.f1.username.value;
    var r = Math.random();
    myRequest = CreateXmlHttpReq(myHandler2);
    myRequest.open("GET","check_user.php?username="+escape(name)+"&rand="+escape(r));
    myRequest.send(null);
}
-->
</script>
</HEAD>
<BODY>
<form name="f1">
<input type="text" name="username" style="width: 230px"/><br><input type="button" onClick="esempio4()" value="Check availability" />
<DIV id="ex4result" STYLE="position:absolute; border-style:solid; border-width:1; border-color:black; width:200px; color:black; background-color:white"></div>

<br>
<input type="text" name="password" style="width: 230px"/>
</form>
</BODY>
</HTML>

PHP Code:


<?php



include("connectionDB.php");



if (!isset($_GET['username'])) { echo "Username not entered";

  else

    {

      $username = $_GET['username'];

      $query = "SELECT username FROM users WHERE username = '$username'"; 

      $ris = mysql_query($query, $db); 

      $ris = mysql_num_rows($ris); 

      if($ris != '0') { echo "Username already in use" }

        else { echo " Username available" }

?>

**!const** · 04-11-2009

With jQuery then you need

HTML Code:

  <script src="http://code.jquery.com/jquery-latest.js"></script>
  
  <script>
  $(document).ready(function(){
    $("#element").load("/ajax.php");
  });
  </script>

Working on all browsers, without any bugs

http://docs.jquery.com/Ajax/load