AJAX Username check not validating

Question

PHP/MySQL. I have created a simple form containing a username textfield and a button. Page name is checkusername.php. I wrote an AJAX function also. Then I have another page usercheckpage.php to where value from checkusername.php is passed via the AJAX function getResult().

In usercheckpage.php, username is checked in the database table, if it is already present, then 'username not available' is shown and if available 'username available' is shown.

BUT THE PROBLEM IS, even if the alert message 'username not available' is displayed, if I click the submit button, the value is passed into my next page insertusername.php. I don't want the form to get submitted if username is not avaiable. I tried html5 validation. But it didn't quite work well.

Here is my code:

checkusername.php

<form id="form1" name="form1" method="post" action="../controller/insertusername.php">
label for="txtuname"></label>
<input type="text" name="txtuname" id="txtuname" required onblur="getResult(this.value);" />
<span id="showusername"></span>
<input type="submit" name="submit" id="submit" value="SUBMIT" />
</form>

AjAX FUnction

function getResult(uname)
{  

    if(window.XMLHttpRequest)
    {  
        xmlhttp=new XMLHttpRequest();

        }
    else
    {
        xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
        }

    xmlhttp.onreadystatechange=function()//callback fn
        {   
          if(xmlhttp.readyState==4 && xmlhttp.status==200)
              {

                   document.getElementById('showusername').innerHTML=xmlhttp.responseText;

              }

                  xmlhttp.open("GET","checkusername.php?variable="+uname,true);
                  xmlhttp.send();

                  }

checkusername.php

<?php
include '../model/Query.php';
$un=$_GET["variable"];
$name="select username from login where username='".$un."'";
$res=getData($name);
while($row=mysqli_fetch_array($res))
{
    $name1=$row["username"];
} 
if($un==$name1)
{
    echo "name already exist";
}
else
{
    echo "ok";
}
?>

You need to apply the `getResult` outcome to the forms `submit` event to manipulate the forms submission. — Ian Brindley, Mar 31 '14 at 12:11
what about enable or disable the submit button depending on the username availablity? — ponciste, Mar 31 '14 at 12:12
I have stored the value of txtuname to a variable named 'variable' in the getResult(). Check the 3rd line from the bottom in the function. So it's correct. I tried echoing the value of $un in checkusername.php, and it gave the username that i entered in the first page. — , Mar 31 '14 at 12:14
I was thinking to implement the same username check that we see in social networking sites. Do you have any other suggestions other than disabling the sumbit button?? @ Ian Brindley — , Mar 31 '14 at 12:17
**Danger**: You are **vulnerable to [SQL injection attacks](http://bobby-tables.com/)** that you need to [defend](http://stackoverflow.com/questions/60174/best-way-to-prevent-sql-injection-in-php) yourself from. — Quentin, Mar 31 '14 at 12:24
Why dont u use jquery's ajax methods and make ur life easy?? — Abhinav, Mar 31 '14 at 13:38

score 0 · Answer 1 · answered Mar 31 '14 at 12:21

HTML

add on submit event

<form id="form1" name="form1" method="post" action="../controller/insertusername.php" onsubmit="checkUsername()">

AJAX

edit your getResult function in order to return true or false

if(xmlhttp.readyState==4 && xmlhttp.status==200){
    document.getElementById('showusername').innerHTML=xmlhttp.responseText;

    return (xmlhttp.responseText == 'ok') true : false;
}

then create a very simple function that onsubmit checks if the username is available or not. If not, just return false and the form will NOT be submitted.

function checkUsername(){
    var username = document.getElementById("txtuname").value;
    if(!getResult(username))
        return false;
}

hope this helps :-)

score 0 · Answer 2 · answered Mar 31 '14 at 12:37

to work it well change your button to

<input type="button" value="Submit" onclick="check()">

and add method

function check(){
    if(getElementById('showusername').innerHTML=="ok"){
        document.getElementById("form1").submit();
    }
}

I hope it work...

score 0 · Accepted Answer · answered Jul 08 '14 at 10:45

HTML

add on submit event

<form id="form1" name="form1" method="post" action="../controller/insertusername.php" onsubmit="checkUsername()">

AJAX

edit your getResult function in order to return true or false

if(xmlhttp.readyState==4 && xmlhttp.status==200){
    document.getElementById('showusername').innerHTML=xmlhttp.responseText;

    return (xmlhttp.responseText == 'ok') true : false;
}

then create a very simple function that onsubmit checks if the username is available or not. If not, just return false and the form will NOT be submitted.

function checkUsername(){
    var username = document.getElementById("txtuname").value;
    if(!getResult(username))
        return false;
}

AJAX Username check not validating

3 Answers3