fredag 7 augusti 2009

Använd jQuery för att kolla om användarnam är ledigt

Visst blir formuläret snyggare och enklare att fylla i om besökaren direkt ser om användarnamnet redan är upptaget. Fixa det enkelt med jQuery!

Lägg inom HEAD-taggen:

<script type="text/javascript" src="includes/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#username").change(function() {
var usr = $("#username").val();
if(usr.length >= 3) {
$("#validateUsername").html('<img src="images/loader.gif" height="16" width="16" /> kontrollerar tillgänglighet...');
$.ajax({
type: "POST",
url: "includes/availability.php",
data: "username="+ usr,
success: function(msg){
$("#validateUsername").ajaxComplete
(function(event, request, settings){
$("#validateUsername").html
(msg);
});
}
});
}
});
});
</script>

I formuläret:

<input type="text" name="username" id="username" /> <span id="validateUsername"></span>

I filen check.php kontrollerar du om användarnamnet ($_POST['username']) är tillgängligt och skriver ut (echo) resultatet som då hamnar inom span-taggen med id validateUsername.

Laddningssymbolen kan du spara härifrån:

Inga kommentarer: