[code inside] Petite utilisation ajax, qu'en pensez-vous ?

WRInaute discret
Pensez-vous cela utile ? J'ai fait une petite utilisation d'Ajax dans mon formulaire d'inscription sur mon site.

Pour la vérification que le username et l'email fourni ne se trouve pas déjà dans la BDD... est-ce utile selon ?

Vous pouvez tester à cette page, avec le nom d'utilisateur "damonkey" et pour l'email "fredke_be(AT)hotmail.com" :
h**p://www.wantow.be/inscription.php

Je trouve cela pas mal... au moins l'utilisateur est directement informé, et il ne faut pas attendre d'envoyer le formulaire à la page suivanter qui vous dira que lnom est déjà pris (ou l'email) et recommencer à remplir le formulaire...

Merci de vos avis !

Fred
 
WRInaute discret
j'sens qu'on va voir fleurir de l'Ajax n'importe où, mais effectivement, ça peut être utile :)
 
WRInaute discret
cedsib a dit:
j'sens qu'on va voir fleurir de l'Ajax n'importe où, mais effectivement, ça peut être utile :)

Ce n'est pas de l'ajax poussé à du 80Ko le script... c'est juste quelques lignes simples, qui peuvent informer rapidement l'utilisateur si les données fournies existent déjà ou non...
 
WRInaute passionné
Takumi a dit:
Oui c'est utile :)

Par contre on peut difficilement tester sans s'inscrire sur ton site ^^
il faut mettre damonkey comme nom d'utilisateur et ça marche.

La validation des formulaires "en temps réel" est très utile.
 
WRInaute discret
Ah oui en effet :)

Petit bémol quand même : on peut valider le formulaire avec ce nom déjà existant (tu pourrais rendre le bouton de validation inactif). Et surtout ça rafraichit la page avec les champs vides. :cry:

:)
 
WRInaute discret
Merci pour cette idée de rendre le bouton inactif, je n'y avais pas pensé !!! Je met cela à jour immédiatement ;)
 
WRInaute discret
Et voilà, en cas de mauvaises données (nom utilisateur ou email existant), le bouton est inactif !

Merci encore pour l'idée :)
 
WRInaute discret
perso je suis fan !! bien sur faut prévoir derriere un message d'erreur si l'utilisateur n'a pas le javascript d'activé ....
 
WRInaute occasionnel
J'aime beaucoup aussi,

+1 pour que tu dévoiles les quelques lignes si ca te dérange pas bien sûr ;)
 
WRInaute discret
Avec plaisir, je divulgue tout cela demain sans faute :)

Là je vais dormir après ce bon DVD (spartan), j'suis muerto !

A demain ;)
 
WRInaute discret
Antoine.B a dit:
perso je suis fan !! bien sur faut prévoir derriere un message d'erreur si l'utilisateur n'a pas le javascript d'activé ....

Qui aujourd'hui n'a pas le javascript activé...? Il faut vmt être :oops: pour ne pas avoir de javascript activé ;)
 
WRInaute discret
C'est une simple fonction Ajax.
Le code source pourrait en effet servir à ceux qui souhaitent se metrte à l'ajax, les bases n'ont vraiment rien de complexe.
 
WRInaute discret
DaMonkey a dit:
Antoine.B a dit:
perso je suis fan !! bien sur faut prévoir derriere un message d'erreur si l'utilisateur n'a pas le javascript d'activé ....

Qui aujourd'hui n'a pas le javascript activé...? Il faut vmt être :oops: pour ne pas avoir de javascript activé ;)


Ceux qui n'ont pas changé la configuration d'internet explorer par défaut désactivé :wink: (j'en connait plus d'un qui en serait incapable seul ...)

Super je suis impatient de voir le code, aurait-tu un bouquin ou un site de référence à conseiller ?
 
WRInaute discret
Voilà comme promis les quelques lignes de codes (simplistes...) pour effectuer l'effet présenté sur le site :

La partie javascript :

Code:
var xhr = null;
function getXhr () {
	if (window.ActiveXObject) {
		xhr = new ActiveXObject("Microsoft.XMLHTTP");
	} else if (window.XMLHttpRequest) {
		xhr = new XMLHttpRequest ();
	}
}

function checkInscription (champ) {
	var datas = null;
	var response = 0;
	var errorMsg = '';
	
	// on prépare le message d'erreur s'il y a lieu de le présenter
	errorMsg = 'Attention, nom existant !<br />Veuillez ajouter des lettres et / ou chiffres, ou changer de nom afin de trouver un nom d\'utilisateur unique.';

	// on initialise la variable "xhr"
	getXhr();
	
	// on vérifie que xhr a pu être initialisé (ie & mozilla compatible) sinon on ne fait rien, et rien ne se passera, rien de bien grave donc, tanpis pour ceux qui ont un navigateur non-compatible avec ajax
	if (xhr != null) {
		// on prépare les données à envoyer
		datas = 'donnee='+champ.value;
		
		// on prépare l'ouverture / connexion en mode POST, avec le paramètre "true" pour fonctionner en mode asynchrone afin que l'utilisateur ne soit pas bloqué à chaque tape d'un caractère
		xhr.open ("POST", "checkNom.php", true);

		// on prépare la fonction à utiliser lorsque le transfert est terminé
		xhr.onreadystatechange = function () {
			if (xhr.readyState == 4) {
				response = parseInt (xhr.responseText);
				
				// si la réponse retournée est plus grande que 0 (enregistrement existant) on affiche l'erreur et on bloque le bouton d'envoi
				if (response > 0) {
					document.getElementById('alertUsernameExistant').innerHTML = '<div class="cadreImportant"><p class="pCentre">'+errorMsg+'</p></div>';
						document.getElementById('alertUsernameExistant').display = 'block';
					document.getElementById('boutonInscription').disabled = true;
				} else {
					// sinon on cache le message d'erreur et on rétablit le bouton d'envoi
					
document.getElementById('alertUsernameExistant').innerHTML = '';
						document.getElementById('alertUsernameExistant').display = 'none';
					document.getElementById('boutonInscription').disabled = false;
				}
			}
		}
		
		// on précise le type d'entête utilisé (formulaire)
		xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
		
		// finalement on envoit les données
		xhr.send (datas);
	}
}

==> à mettre dans la page où se trouve le formulaire avec le champ à vérifier


Maintenant, voici la page à laquelle fait appel le script Javascript checkNom.php

Code:
<?PHP
	// on inclue la classe de connexion (ou votre système de connexion à vous de gérer
	include_once ("classes/Connexion.class.php");
	$connexion = new Connexion (false);
	
	// on vérifie que les données sont bien transmises et ce par la méthode POST
	if (isset ($_POST["donnee"])) {
		// on prépare les données pour la comparaison en BDD
		$donnee = addslashes ($_POST["donnee"]);
		
		// on effectue la requète
		$get = mysql_query ("	SELECT	count(*) as nb
								FROM	utilisateurs u
								WHERE	u.username = \"$donnee\"
						   ")	OR die ("Impossible de sélectionner le username : ".mysql_error ());
		$get = mysql_fetch_array ($get);
		
		// on renvoit le résultat par un simple echo
		echo $get["nb"];
	}
?>

==> ce fichier doit être placé dans le même répertoire que la page formulaire & javascript


Voici maintenant le formulaire :
Code:
<form name="monFormulaire" method="POST" target="unePage.php">
	<input type="text" id="username" name="username" onkeyup="checkInscription(this);" onchange="checkInscription(this);">
	<div id="alertUsernameExistant" style="display:none;"></div>
	
	<input type="submit" id="boutonInscription" name="boutonInscription" value="S'inscrire !">
</form>



Et voilà, j'espère que je n'ai pas fait d'erreur dans les code, étant donné que je les ai un peu modifié pour les rendre plus simple (faisant en réalité une utilisation pour plusieurs champs ensemble, je l'ai modifié pour gérer qu'un seul champ).

Petite précision :
- pourquoi mettre "onkeyup" et "onchange" ? Simplement parce que si le gars a déjà rempli un formulaire avec un champ du même nom et que son navigateur le garde en cache, en tapant les première lettre le navigateur va lui afficher les derniers noms tapé dans ce champ, il suffirait de faire faire descendre dans la liste jusqu'au nom voulu et de taper sur "Tab" pour passer au champ suivant... => le champ a été changer mais ne reconnait pas la touche "Tab" dans le "onkeyup", mais le champ a pourtant bien été changer, donc reconnu par "onchange"...
Vous pourriez dire "oui mais si on met juste "onchange", ca le fera d'office..." -> oui mais au moins avec le "onkeyup", au fur et à mesure qu'il tape un nom, ca vérifie petit à petit le contenu déjà entré...

Tenez-moi au courant s'il y a un soucis...
DaMonkey

EDIT : maintenant, tous les noms de variables, de fichier, champ, formulaires etc gérez les comme vous voulez... ;)
 
Discussions similaires
Haut