ajax - check if a username exists + return message if it does

Question

im trying to check if a username a user wants is already taken without having to send the form, basically onBlur of the username field.

I'm having some trouble and have a few questions.

I have my input field plus js:

<script src="js/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function(){

$('#username').on('blur', checkdb);

function checkdb(){ 
    var desiredUsername = $(this).val();
    $.ajaxSetup({
        url: "check-db.php",
        type: "POST",
    });

    $.ajax({
        data: 'desiredUsername='+desiredUsername,       
        success: function (msg) {
            alert (msg);},
            error: function (XMLHttpRequest, textStatus, errorThrown){   
            alert('Error submitting request.'); 
        }   
    });     
}           
});
</script>

<input type="text" name="username" id="username">

and my check-db.php file:

$mysqli = mysqli_connect("localhost","connection info");
if ($mysqli->connect_errno) {
echo "Failed to connect to MySQL: (" . $mysqli->connect_errno . ") " . $mysqli->connect_error;
}

$desiredUsername = $_POST['desiredUsername'];


$stmt = $mysqli->prepare("SELECT * FROM users WHERE username = '?' ");
$stmt->bind_param('s', $desiredUsername);
$stmt->execute();

firstly: im getting an error from my php code, 'number of variables doesnt match number of parameters in prepared statement', which im a bit confused about? I have 1 variable and 1 peramater, don't i?

then, once this is actually working, how do I send a message/ variable back to the input page? so if the username is taken I can say so, or if its available say so?

thanks!

to get the message back from the page simply echo some results in your php script — Ronnie
– Ronnie, Commented Feb 12, 2013 at 19:33

soyuka · Accepted Answer · 2013-02-12 19:38:36Z

1

On the server size (PHP in your case), simply echo the things you want to pass to the client side (Javascript) like this :

echo json_encode($datas); //can be array or whatever

Then on the Client side :

$.ajax({
    method: 'POST',
    dataType:'json',
    data: {'username' : desiredUsername}, //then getting $_POST['username']
    success: function(datas) {
        console.log(datas); //Your previous data from the server side
    },
    error: function(XMLHttpRequest, textStatus, errorThrown){    
        console.log(textStatus);
    }
});

answered Feb 12, 2013 at 19:38

soyuka

9,1554 gold badges42 silver badges55 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Ronnie · Accepted Answer · 2013-02-12 19:35:47Z

0

try

function checkdb(){ 
    var desiredUsername = $(this).val();
    $.ajaxSetup({
        url: "check-db.php",
        type: "POST",
    });

    $.ajax({
        data: {
            desiredUsername: desiredUsername
        },
        success: function (msg) {
            alert(msg);
        },
        error: function (XMLHttpRequest, textStatus, errorThrown){    
            alert('Error submitting request.'); 
        }   
    });    
}

answered Feb 12, 2013 at 19:35

Ronnie

11.2k22 gold badges85 silver badges144 bronze badges

Comments

Skatox · Accepted Answer · 2013-02-12 19:37:20Z

0

You have an error when sending the data, you should send a JS Object as data, like this:

data: { desiredUsername: desiredUsername },

answered Feb 12, 2013 at 19:37

Skatox

4,27412 gold badges47 silver badges50 bronze badges

Collectives™ on Stack Overflow

ajax - check if a username exists + return message if it does

3 Answers 3

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related