Alerting user if chosen username already exists

Question

This code is inside a JavaScript function triggered by the onsubmit event of a form.

var username = document.register.username.value;
var phpUsernameFree = <?php 
    $username = "<script>document.write(username)</script>";
    $resultTempUsers = mysql_query("SELECT * FROM tempUsers WHERE username = '$username' ") or die(mysql_error());
    if( mysql_num_rows($resultTempUsers) == 0 ){
        echo 1;
    };
?> ;

if( phpUsernameFree == 0){
    toggleNew('usernameAlreadyExists', 1);
    usernameCounter = 1;
}

I want that if the username already exists in the database a window is shown telling the user that the username already exists.

I've tried deleting all of the php code and simply replacing it by 'echo 1' or 'echo 0', and that worked, so I know that code executes.

I think there's a problem in the attempt to read information from the database.

EDIT:

Okay I've tried doing this with Ajax, didn't work so far. I downloaded jQuery and I'm trying out this code now:

usernameTaken = checkUserExistence(username, 'username');
if( usernameTaken == 1){
    toggleNew('usernameAlreadyExists', 1);
    usernameCounter = 1;
}

function checkUserExistence(str, type){
    var dataString = 'str=' + str + '&type=' + type;
    if($.trim(str).length>0 && $.trim(type).length>0){
        $.ajax({
            type: "POST",
            url: "existance.php",
            data: dataString,
            cache: false,
            beforeSend: function(){ $("#submit").val('Sending...');},
            success: function(data){
                if(data){
                    return 1;
                }else{
                    return 0;
                }
            }
        });
    }
    return false;
}

my existance.php looks like this:

<?php

*include connection to database here*

$data = $_POST["data"];
$type = $_POST["type"];
$resultUsers = mysql_query("SELECT * FROM users WHERE username = '$data' ") or die(mysql_error());
if( mysql_num_rows($resultUsers) == 1 ){
    echo 1;
}
?>

Currently what happens when using this code is, when I press the submit button, the value changes to 'Sending...' as in the beforeSend attribute, but nothing else happens.

Have a look into ajax; you're trying to have the browser execute this logic, it won't happen. You need something to interface with the server. [Everything you need to know is right here](http://stackoverflow.com/questions/8567114/how-to-make-an-ajax-call-without-jquery) — Ohgodwhy, Jan 16 '15 at 05:41
It will be more simple if you will use jquery ajax function...You can refer this example for the codes http://www.9lessons.info/2014/07/ajax-php-login-page.html — Priya jain, Jan 16 '15 at 06:09

score 0 · Answer 1 · answered Jan 16 '15 at 06:05

The best way is using ajax. you should do something like this:

$("#inputId").keyUp(function(){
   //This event, raised when the textbox value changed
   //inside this event, you can call ajax function and check user existance and if result is false you can disable the submit button
});

score 0 · Accepted Answer · answered Jan 16 '15 at 06:10

You need AJAX to do that, if you do not want to use Jquery. Something like this:

<script>
function Login(str) {
    if (str.length == 0) { 
        document.getElementById("txtHint").innerHTML = "";
        return;
    } else {
        var xmlhttp = new XMLHttpRequest();
        xmlhttp.onreadystatechange = function() {
            if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
                document.getElementById("Msg").innerHTML = xmlhttp.responseText;
            }
        }
        xmlhttp.open("GET", "Login.php?q=" + str, true);
        xmlhttp.send();
        }
}
</script>

Login.php:

$username = $_REQUEST["q"];
$resultTempUsers = mysql_query("SELECT * FROM tempUsers WHERE username = '$username' ") or die(mysql_error());
if( mysql_num_rows($resultTempUsers) == 0 ){
    echo "User free";
}else{
echo "User exist";
}

something like that, don't work but is an idea.

score 0 · Answer 3 · answered Jan 16 '15 at 07:45

In stead of submit button use normal button, submit form after ajax response depending on the response value.

<!DOCTYPE html>
<html>
    <head>
        <title>Test</title>
        <script>
        function checkUserExistence(){
            var username = document.register.username.value;
            var xmlhttp;
            if (window.XMLHttpRequest) { xmlhttp = new XMLHttpRequest();} else { xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");}
            xmlhttp.onreadystatechange = function() {
                if (xmlhttp.readyState == 4 ) {
                    if(xmlhttp.status == 200){
                        phpUsernameFree = xmlhttp.responseText;
                        if( phpUsernameFree == 0){
                            alert("username Already Exists");
                        } else {
                            alert("username available.");
                            register.submit();
                        }
                    } else if(xmlhttp.status == 400) {
                        alert("There was an error 400");
                    } else {
                        alert("something else other than 200 was returned");
                    }
                }
            }
            xmlhttp.open("GET", "service.php?username=" + username, true);
            xmlhttp.send();
        }
        </script>
    </head>
    <body>
        <form id="register" name="register" method="post">
            <input type="text" name="username" id="username" value="check" />
            <input type="button" id="save" name="save" value="Save" onclick="checkUserExistence();" />
        </form>
    </body>
</html>

<!-- service.php -->
<?php
$username = $_REQUEST["username"];
$resultTempUsers = mysql_query("SELECT * FROM tempUsers WHERE username = '$username' ") or die(mysql_error());
if( mysql_num_rows($resultTempUsers) == 0 ){
    echo 1;
};
?>

Alerting user if chosen username already exists

3 Answers3