Zum Inhalt springen

Ajax Username Check via jQuery

Der Username soll bereits während der Eingabe durch den Nutzer auf Verfügbarkeit überprüft werden und dies angezeigt werden. Möglich wird dies via AJAX.

Zunächst muss jQuery integriert werden. Dies geht z.B. über Google Code (In den Header einbauen:  <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script> )

HTML:

<input type=’text‘ id=’username‘> <input type=’button‘ id=’check_username_availability‘ value=’Check Availability‘>
<div id=’username_availability_result‘></div>

PHP (user_check.php):

$username = mysql_real_escape_string($_POST[‚username‘]);

//Abfrage ggf. an eigene DB Struktur anpassen (!)
$result = mysql_query(’select username from users where username = „‚. $username .'“‚);

if(mysql_num_rows($result)>0){
echo 0;
}else{
echo 1;
}

JavaScript:

$(document).ready(function() {

var checking_html = ‚Checking…‘;

//when button is clicked
$(‚#check_username_availability‘).click(function(){

$(‚#username_availability_result‘).html(checking_html);
check_availability();
});

});

function check_availability(){

var username = $(‚#username‘).val();

$.post(„user_check.php“, { username: username },
function(result){
if(result == 1){
$(‚#username_availability_result‘).html(username + ‚ ist verfügbar‘);
}else{
$(‚#username_availability_result‘).html(username + ‚ ist nicht verfügbar‘);
}
});

}