[AJAX] Inscription via AJAX

Version imprimable

Bonjour a tous ;)

Voilà,

je me suis lancé dans AJAX il y a peu et j'y suis tombé amoureux ^^

j'aimerais pour mon site en création, créer un formulaire d'inscription, qui dès que l'on clique sur Envoyer, il vérifie les champs via une page PHP que nous nomerons verif_form.php et qu'ensuite, si les champs sont vérifiés et corrects. Que l'on redirige sur une autre page où il seras indiqué qu'il faut valider le compte par mail. MAIS si les vérifications indiquent qu'il y a une erreur dans le formulaire, je voudrais que sans recharger la page un message apparraisse en désignant l'erreur.

Pensez vous que c'est possible?

Perso j'ai commencé le travail. J'avais fait ce système en PHP mais je trouvais que ca prenait trop de temps si il y a une erreur. Donc voici plus ou moins le système que j'ai mis en place :

inscription.php
Code:

1 2 3 4 5 6 7 <? //verification si il n'y a pas de message d'erreur //Si il y en a un on l'affichera en dessous ?> Formulaire HTML Envoi vers inscription-1.php
inscription-1.php
Code:

1 2 3 4 5 6 7 8 9 <? //Ensemble des vérifications sur le formulaire (champs remplis, email valide, pseudo valide, passe valide ,...) //A chaque condition, si il y a une erreur je renvoie sur inscription.php?m=pseudo par exemple si le pseudo //n'est pas valide. //Si tout est valide, j'execute ma requête MySQL pour ajouter le membre, j'envoie le mail //et je redirige vers inscription-ok.php qui m'affichera un message de bienvenue ?>
Maintenant j'aimerais savoir si vous sauriez me dire comment faire avec AJAX ?
Si vous avez des conseils ou autre je suis preneurs ! Par contre ce n'est pas nécéssaire de dire que l'inscription AJAX c'est nul car tout le monde n'active pas JS car il y aura une altérnative pour ceux dans le cas ;)

Merci a tous

Up !

Voici ce que j'ai déjà retravaillé, mais ca ne fonctionne pas ...

inscription.php

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
 
<body>
<script type='text/javascript'>
 
			function getXhr(){
                                var xhr = null; 
				if(window.XMLHttpRequest) // Firefox et autres
				   xhr = new XMLHttpRequest(); 
				else if(window.ActiveXObject){ // Internet Explorer 
				   try {
			                xhr = new ActiveXObject("Msxml2.XMLHTTP");
			            } catch (e) {
			                xhr = new ActiveXObject("Microsoft.XMLHTTP");
			            }
				}
				else { // XMLHttpRequest non supporté par le navigateur 
				   alert("Votre navigateur ne supporte pas les objets XMLHTTPRequest..."); 
				   xhr = false; 
				} 
                                return xhr;
			}
 
			/**
			* Méthode qui sera appelée sur le click du bouton
			*/
			function go(){
				var xhr = getXhr();
				// On défini ce qu'on va faire quand on aura la réponse
				xhr.onreadystatechange = function(){
					// On ne fait quelque chose que si on a tout reçu et que le serveur est ok
					if(xhr.readyState == 4 && xhr.status == 200){
						leselect = xhr.responseText;
						// On se sert de innerHTML pour rajouter les options a la liste
						document.getElementById('message').innerHTML = leselect;
					}
				}
 
				// Ici on va voir comment faire du post
				xhr.open("POST","inscription-ok1.php",true);
				// ne pas oublier ça pour le post
				xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
				// ne pas oublier de poster les arguments
				// ici, l'id de l'auteur
				xhr.send(getquerystring());	
 
				function getquerystring() {
				     var form = document.form['inscription'];
					 var pseudo = form.pseudo.value;
					 var mail = form.mail.value;
					 var mail2 = form.mail2.value;
					 var passe = form.passe.value;
					 var passe2 = form.passe2.value;
					 var parrain = form.parrain.value;
					 qstr = 'pseudo=' + escape(pseudo) + '&mail' + escape(mail) + '&mail2' + escape(mail2) + '&passe' + escape(passe) + '&passe2' + escape(passe2) + '&parrain' + escape(parrain);
					 return qstr;
					 }
 
			}
		</script>
<div id="message"></div>
Et le formulaire
<input type="button" onClick='Javascript:xmlhttpPost()' value="Envoyer" />

Voila pour la page d'inscription.
Et maintenant la page inscription-ok1.php

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<?
if(isset($pseudo, $_POST['mail'], $mail2, $passe, $passe2) 
		&& !empty($pseudo) && !empty($mail) && !empty($mail2) && !empty($passe) && !empty($passe2))
{
$myquery ='INSERT INTO `membres`(`id`, `pseudo`, `passe`, `mail`, `parrain`, `verif`, `statut`) VALUES ("", "'.$pseudo.'", "'.$passe.'", "'.$mail.'", "'.$parrain.'", "'.$verif.'", 0)';
					if(mysql_query($myquery))
					{
echo "Inscription réussie !";
					}
					else{
					echo "Erreur : inscription échouée.";
					}
}
else{
echo "Erreur : tous les champs ne sont pas remplis";
}
?>

Bien sur, je n'ai pas mis tout le code pour ne pas vous brouiller mes j'ai mis une vérification pour vous montrer ce que je veux dire ;)

Par contre, quand je clique sur envoyer ca ne fonctionne pas ...

05/10/2007, 20h26
denisC

Citation:

Envoyé par WebDMX

Voici ce que j'ai déjà retravaillé, mais ca ne fonctionne pas ...

Qu'est ce qui ne fonctionne pas? Tu peux nous donner une description un peu plus précise du problème?

Sur le principe, ton truc devrait fonctionner. Après, tu n'as pas de méthode javascript:xmlhttpPost() mais je suppose que ce problème provient de ton post....
05/10/2007, 23h38
WebDMX

Oui désolé, la fonction n'est pas xmlhttpPost() mais go().

Le problème c'est que les variables que j'aimerais passer par la méthode POST, n'arrivent pas dans mon script PHP, donc impossible de faire les vérification..

Merci
06/10/2007, 06h16
denisC

Citation:

Envoyé par WebDMX

Le problème c'est que les variables que j'aimerais passer par la méthode POST, n'arrivent pas dans mon script PHP, donc impossible de faire les vérification..

Mets un alert avant le return dans la méthode getquerystring() on verra bien si le js fonctionne correctement.

Sinon, essaye de mettre le set requestheader avant le open (on sait jamais).

J'a ifait quelques modifs sous les conseils de quelqu'un, voici a quoi j'en arrive :
ajax2.js

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
function ajax() {
var xhr=null;
 
    if (window.XMLHttpRequest) { 
        xhr = new XMLHttpRequest();
    }
    else if (window.ActiveXObject) 
    {
        xhr = new ActiveXObject("Microsoft.XMLHTTP");
    }
    //on définit l'appel de la fonction au retour serveur
    xhr.onreadystatechange = function() { alert_ajax(xhr); };
 
 
    //on affiche le message d'acceuil
    document.getElementById("wait").className="visible";
 
    //on appelle le fichier reponse.txt
    xhr.open("POST", "inscription-ok1.php", true);
	var form = document.form['inscription'];
    var pseudo = form.pseudo.value;
	xhr.setRequestHeader('Content-type','application/x-www-form-urlencoded');
    xhr.send("pseudo="+pseudo);
}
			function alert_ajax(xhr)
{
    if (xhr.readyState==4) 
    {
    	var docXML= xhr.responseXML;
    	var items = docXML.getElementsByTagName("donnee")
    	//on fait juste une boucle sur chaque element "donnee" trouvé
    	document.getElementById("wait").className="invisible";
    	for (i=0;i<items.length;i++)
    	{
    		document.getElementById('message').innerHTML = items.item(i).firstChild.data;
    	}
    }
}

inscription-ok1.php

Code:

1
2
3
4
5
6
7
8
 
<?php
header('Content-Type: text/xml'); 
echo "<?xml version=\"1.0\"?>\n";
echo "<exemple>\n";
echo "<donnee>".$_POST['pseudo']."</donnee>";
echo "</exemple>";
?>

inscription.php

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<script type='text/javascript'src="js/ajax2.js"></script>
<div id="contenu_corps">
<div id="title_corps">Inscription !</div>
<div id="message"></div>
<div class="invisible" id="wait">Veuillez patienter... <img src="images/ajax-loader.gif" /></div>
<div id="inscription">
<form name="inscription" id="inscription" >
<label for="pseudo"><b>Pseudo :</b> </label> <input id="pseudo" class="input" type="text" name="pseudo" value="" /><br />
<label for="mail"><b>Mail :</b> </label> <input class="input" type="text" name="mail" value="" /><br />
<label for="mail2"><b>Mail (confirmation) :</b> </label> <input class="input" type="text" name="mail2" value="" /><br />
<label for="passe"><b>Passe :</b> </label> <input class="input" type="password" name="passe" value="" /><br />
<label for="pass2"><b>Passe (confirmation) :</b> </label><input class="input" type="password" name="passe2" value="" /><br />
<label for="parrain" ><b>Parrain (facultatif) :</b> </label><input class="input" type="text" name="parrain" value="<? echo $parrain; ?>" /><br /><br />
<input type="button" onClick='javascript:ajax()' value="Envoyer" /> <input type="reset" value="Effacer" />
</form>
</div>

Voilà,

Si je remplace

Code:

1
2
var form = document.form['inscription'];
    var pseudo = form.pseudo.value;

par

Code:

var pseudo = "Pseudo"

, cela fonctionne, mais ce que je voudrais c'est envoyer la valeur de l'input pseudo. Et quand j'envoie le formulaire, ca ne fonctionne pas..

Merci

PS: JS fonctionne ;)

06/10/2007, 20h57
WebDMX

Désolé pour le double post, mais le sujet est résolu ;)

c'était une simple erreur de syntaxe :

Code:

var form = document.forms['inscription'];

Merci