Discussion :

[Rony Rauzduel]

J'ai un formulaire contenant 2 champs (l'un pour le mot de passe, et l'autre pour la vérification dudit mot de passe).
L'objectif est que l'utilisateur saisisse son mot de passe et confirme la modification puis soumette le formulaire afin que l'injection SQL puisse se faire en Base.
Je pensais passer par de l'Ajax et du JSON pour faire tout cela car en fait lors du remplissage des champs password par l'utilisateur et la soumission du formulaire (donc côté client), il faut vérifier (par un script Ajax) que les données saisies sont corrects, et si elles le sont elles sont balançées de façon asynchrone sur le serveur pour l'injection SQL.

Est-ce la bonne méthode?

Merci d'avance,
Transact.

[Rony Rauzduel]

Je suis passé par JSON pour faire transiter les données entre PHP et Javascript. Par contre, je constate que les superglobales $_POST pour password et verif_password ne sont jamais postées.
Ceci entraine que json m'indique que les champs doivent être remplis.

Code PHP :

Sélectionner tout - Visualiser dans une fenêtre à part

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
 
<?php
	/** script permettant de modifier le mot de passe de l'utilisateur sans rafraichissement de la page **/
 
	header('Content-Type: text/html; charset=UTF-8');
	include_once 'inc_connexion.php';
	$conn = opendb_conn();
 
	// json permet de faire le pont entre Javascript et PHP
	$t = array(); // tableau permettant le traitement des données avec json
	$t["erreur"] = "Formulaire incorrect";	
 
	// on vérifie que le pseudo saisi par l'utlisateur est présent dans la table des membres
	$req = "select count(*) as nbr from membres where pseudo ='".$_POST['pseudo']."'";
	$stm = $conn->prepare($req);
	$stm->execute();
 
	// creation de la variable $result recuperant les lignes et les retournant EN TANT que tableau associatif
	$result = $stm->fetch(PDO::FETCH_ASSOC);
	//print_r($result); // pour le test	
 
	if($result['nbr'] == 0) { // si le pseudo n'est pas présent dans la table des membres alors
		$t["erreurPseudo"] = "Votre pseudo n'est pas référencée dans notre Base de données !";
	} else { 
		if(empty($_POST['password']) or empty($_POST['verif_password'])) {
			$t["erreurChamps"] = "Veuillez remplir tous les champs du formulaire !";
		} else if($_POST['password'] != $_POST['verif_password']) {
			$t["erreurPassword"] = "Les mots de passes ne correspondent pas !";
		} else {
			// on effectue le traitement de la mise à jour du mot de passe
			$sql = "update membres set password ='".$_POST['password']."' where pseudo ='".$_POST['pseudo']."'";	
			$stmt=$conn->prepare($sql);
			$stmt->execute();
			// on utilise notre tableau de données JSON à envoyer sur le serveur
			$t["erreur"] = "ok"; // utiliser lors de l'appel Ajax pour recevoir la réponse du serveur
			$t["retour"] = "Modification réussie de votre mot de passe !";
		}	
	} // fin if() ... else()
 
	// Ne pas oublier d'afficher l'encodage de la représentation json des valeurs envoyées sur le serveur
	header('Content-Type: application/json');
	echo json_encode($t); // la fonction json_encode() retourne la représentation json d'une valeur
 
?>

Code JAVASCRIPT :

Sélectionner tout - Visualiser dans une fenêtre à part

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
 
/** script permettant la modification du mot de passe suite à la perte/oubli de ce dernier **/
$(document).ready(function() {
	$("#reinitForm").submit(function(event) {
		event.preventDefault();	// empêcher le navigateur de soumettre lui même le formulaire
		// pendant la soumission on affiche le loader d'attente Ajax
		$("#loader").show();
 
		var url = $('form').attr('action');
		var pseudo = $('form').find("input[name=pseudo]").val();
		var password = $('form').find("input[name=password]").val();
		var verif_password = $('form').find("input[name=verif_password]").val();
 
		$.post(url, 
			{"pseudo":pseudo, "password":password, "verif_password":verif_password}, 
			// traitement des cas de la fonction de callback
			function(data) {
				$("#loader").hide();
				// si tout est ok dans le formulaire //
				if(data.erreur=="ok") {
					console.log(data.erreur); // pour le test
					$('#message').show("fast").text(data.retour);
					$('#message').fadeOut(6000);
					$("#message").fadeOut(6000);
				} // fin if(data.erreur="ok")
				/** le cas du pseudo **/
				if(data.erreurPseudo) {
					$('#error').show("fast").text(data.erreur);
					$("#message").show("fast").text(data.erreurPseudo);	
					$('#message').fadeOut(3000);
					$('#error').fadeOut(3000);					
				} // fin if(data.erreurPseudo)
				/** le cas des champs vides **/
				if(data.erreurChamps) {
					$('#error').show("fast").text(data.erreur);
					$("#message").show("fast").text(data.erreurChamps);	
					$('#message').fadeOut(3000);
					$('#error').fadeOut(3000);
				} // fin if(data.erreurChamps)
				/** le cas des mots de passe **/
				if(data.erreurPassword) {
					$('#error').show("fast").text(data.erreur);
					$("#message").show("fast").text(data.erreurPassword);	
					$('#message').fadeOut(3000);
					$('#error').fadeOut(3000);
				} // fin if(data.erreurPassword)
			}, "json"); // fin $.post()
	}); // fin $("#reinitForm").submit()
	// on vide les champs du formulaire SAUF le bouton radio et celui de soumission
	$(':input','#reinitForm').not(':submit').val('');
}); // fin $(document)

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

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
 
<?php
        require_once 'inc_connexion.php';
        $conn=opendb_conn(); // on se connecte à la Base de données   
        print_r($_POST);        
?>
 
	<div class="boite">
			<div id="passOublieFormContainer" >
				<form name="form3" id="passOublieForm" action="includes/inc_modifierPassword.php" method="post">
					<fieldset>
						<span id="error"></span><br/>	
						<label for="login"> Pseudo : </label>
						<input type="text" name="pseudo" id="login" size="26" class="required" required="required" />
						<label for="password"> Nouveau mot de passe : </label>
						<input type="password" name="password" id="pass" size="26" class="required" minlength="8" required="required" />
						<label for="verif_password"> Confirmez mot de passe : </label>
						<input type="password" name="verif_password" id="verif_pass" size="26" class="equalTo" minlength="8" required="required" />
						<span id="loader" style="display:none;"><img src="img/loader.gif" alt="loader" /></span>
						<span id="message"></span><br />
						<input type="submit" name='submit' value="Modifier" />
					</fieldset>
				</form>						
			</div><!-- passOublieFormContainer -->
		</div><!-- boite -->

[Rony Rauzduel]

Pourquoi les variables $_POST['password'] et $_POST['verif_password'] ne sont pas postées?

[Bovino]

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

<form name="form3" ...>

laisse supposer qu'il y a d'autres formulaires dans la page.
Dans ce cas, interroges-toi sur lequel sera traité par

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

$('form').find("input[name=pseudo]").val();

Notation qui est elle-même bien compliquée pour retrouver un champ dont tu connais l'id...

Enfin, au risque de me répéter, pourquoi n'envisagerais-tu pas d'apprendre jQuery (voire JavaScript) avant de l'utiliser ?

[Rony Rauzduel]

Bonjour Bovino,

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

<form name="form3" ...>

En fait cela signifie qu'il s'agit du 3ème formulaire crée dans mon projet ... il n'y a qu'un seul formulaire dans la page, mais bon j'ai enlevé le name.

Notation qui est elle-même bien compliquée pour retrouver un champ dont tu connais l'id...

Jquery permets de passer par l'une ou l'autre ce ces méthodes ... j'ai utilisé la syntaxe suivante :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
 
var password = $("#pass");
var verif_password = $("#verif_pass");

Mais cela ne change rien.

Malheureusement Bovino, je n'ai pas le temps d'apprendre jQuery de façon plus approfondie. J'ai le temps de lire ton livre en soirée et le week-end ... mais pas trop pour pas me faire "tirer les oreilles".
Transact.

[Rony Rauzduel]

1ère erreur décelée :
l'id du formulaire concerné dans le fichier Javascript n'était pas correct.

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

<form id="reinitForm" ...

au lieu de

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

<form id="passOublieForm" ...

mais les variables pseuod et verif_password ne sont alors plus soumissent?

[Rony Rauzduel]

[Résolu]
Il s'agissait encore une fois plus d'un problème de logique ... que de technique même si un "gap" en jQuery est nécessaire.

En fait pour que les variables PHP puissent être utilisable d'une page à une autre encore faut-il qu'elles soient postées.
ce qui n'était pas le cas vue la conception utilisée.