Soumettre des données en Ajax

**Rony Rauzduel** · 05/11/2012, 16h20

Bonjour à toutes et à tous,

Sur ma page d'accueil, j'ai un formulaire apparaissant au clic sur un menu, je souhaite que lorsque je soumets le formulaire en cliquant sur le bouton submit que les données soient injectées en base de données, et que je reste sur la même page. Voici le code que j'ai écris mais le formulaire ne semble pas être soumis, donc les données ne sont pas insérées en Base.

#inc_inscription

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
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
<?php
        require_once 'inc_verification.php';    
?>
 
<div class="boite">
	<div id="inscriptionFormContainer" >
		<form name="form2" id="inscriptionForm" action="#" method="post">
			<fieldset>				
				<label for="login">Pseudo </label><em>*</em>
				<input id="login" name="pseudo" size="35" class="required" /><br/>
				<label for="password">Mot de passe</label><em>*</em>
				<input id="pass" name="password" size="35" class="required" minlength="8" type="password"/><br/>
				<label for="verif_password">Confirmez le mot de passe</label><em>*</em>
				<input id="verif_password" name="verifPassword" size="35" class="equalTo" minlength="8" type="password"/><br />
				<label for="anneeNaiss">Ann&eacute;e de naissance </label><em>*</em>
				<input id="anneeNaiss" name="anneeNaiss" placeholder="e.g : 1984" size="35"class="required" maxlength="4" /><br />
				<label for="email">Email </label><em>*</em>
				<input id="email" type="email" name="email" size="35" class="email" /><br />
				<label for="telephone">T&eacute;l&eacute;phone</label><em>*</em>
				<input id="telephone" type="telephone" pattern="^((\+\d{1,3}(-| )?\(?\d\)?(-| )?\d{1,5})|(\(?\d{2,6}\)?))(-| )?(\d{3,4})(-| )?(\d{4})(( x| ext)\d{1,5}){0,1}$" 
					name="telephone" size="35" class="required" /><br />
				<label for="masquerTel">Masquer num&eacute;ro dans l'annonce</label>
				<input type="radio" name="masquerTel" value="oui" id="oui" /><span>Oui</span>
				<input type="radio" name="masquerTel" value="non" id="non" checked="checked" /><span>Non</span><p>
				<label for="region">R&eacute;gion</label><em>*</em>								
 
				<select id="region" name="region" size="1" class="required" style="width:180px">	
				<option value="" selected="selected" > </option>								
				<option value="Alsace">Alsace </option>
				<option value="Aquitaine">Aquitaine </option>
				<option value="Auvergne">Auvergne</option>
				<option value="Basse-Normandie">Basse-Normandie</option>
				<option value="Bourgogne">Bourgogne</option>
				<option value="Bretagne">Bretagne</option>
				<option value="Centre">Centre</option>
				<option value="Champagne-Ardenne">Champagne-Ardenne</option>
				<option value="Corse">Corse</option>
				<option value="Franche-Comte">Franche-Comt&eacute;</option>
				<option value="Haute-Normandie">Haute-Normandie</option>
				<option value="Ile-de-France">Ile-de-France</option>
				<option value="Languedoc-Roussillon">Languedoc-Roussillon</option>
				<option value="Limousin">Limousin</option>
				<option value="Lorraine">Lorraine</option>
				<option value="Midi-Pyrenees">Midi-Pyr&eacute;n&eacute;es</option>
				<option value="Nord-Pas-de-Calais">Nord-Pas-de-Calais</option>
				<option value="Pays_de_la_Loire">Pays de la Loire</option>
				<option value="Picardie">Picardie</option>
				<option value="Poitou-Charentes">Poitou-Charentes</option>
				<option value="Provence-Alpes-Cote_Azur">Provence-Alpes-C&ocirc;te d'Azur</option>
				<option value="Rhone-Alpes">Rh&ocirc;ne-Alpes</option>
				</select><br />
				<div id="loader" style="display:none;"><img src="img/loader.gif" alt="loader" /></div>
				<span id="inscriptionSent">Votre inscription a été correctement effectuée !</span><br />				
				<input id="sendInscription" type="submit" name="submit" /></input><br />				
				<label for="obligatoire">* Champs obligatoires.</label> 
			</fieldset>				
		</form><!-- inscriptionForm -->		
	</div><!-- inscriptionFormContainer -->

Code :

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
/** script traitant de l'affichage de la zone d'inscription */
$(document).ready(function() {
	$("#inscription").click(function() {
		$("#inscriptionForm").fadeIn("fast");		
		// pour la soumission du formulaire
		$("#inscriptionForm").submit(function(e) {
			// pendant la soumission on affiche le loader d'attente Ajax
			$("#loader").show();
			e.preventDefault(); // empêcher le navigateur de soumettre lui-même le formulaire
 
			// pour l'appel Ajax puisqu'on veut rester sur la même page suite à la soumission
			$.post(url, {pseudo:pseudo, 
						password:password, 
						anneeNaiss:anneeNaiss,
						email:email,
						telephone:telephone,
						masquerTel:masquerTel,
						region:region}, 
			function() {
				// une fois les données soumises on cache le loader
				$("#loader").hide();
				// on affiche un message pour avertir le futur membre
				$('#inscriptionSent').show('slow'); 
				$('#inscriptionSent').fadeOut(3000);  // on fait disparaitre le message	
				window.location.reload(true);
			}); // fin $.post()
		}); // fin $("#inscriptionForm").submit()
 
 
	}); // fin $("#inscription").click()
}); // fin $(document)
 
//$('#inscriptionSent').show('slow'); 
//setTimeout('$("#inscriptionSent").hide(); $("#inscriptionForm").fadeOut("slow")', 2000);

#inc_ajoutMembre.php

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
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
<?php
 
	require_once 'inc_connexion.php';
	$conn=opendb(); // on se connecte à la Base de données	
 
	/** script permettant l'insertion d'un Membre en Base , ce script devra vérifier que le login n'est pas déjà présent en Base.
		Le Pseudo choisi par le futur membre sera le pseudo intégré en Base. Il faudra par ailleurs envoyé un mail au membre
		afin de lui communiquer son login et son password après validation de l'unicité du login en base.
	*/
 
	// variables correspondant aux champs présents en base
	// utilisation de l'opérateur ternaire ?: pour assigner les variables aux valeurs des champs du formulaire
	$pseudo = (isset($_POST['pseudo']))?$_POST['pseudo']:null; 
	$pseudo=htmlentities(trim($pseudo));
	$password = (isset($_POST['password']))?$_POST['password']:null;
	$password = sha1($password);
	$anneNaiss = (isset($_POST['anneeNaiss']))?$_POST['anneeNaiss']:null;
	$anneeNaiss = htmlspecialchars($_POST['anneeNaiss']);	
	$email = (isset($_POST['email']))?$_POST['email']:null;
	$email  = htmlspecialchars($_POST['email']); // On rend inoffensives les balises HTML que le visiteur a pu rentrer
	$telephone = (isset($_POST['telephone']))?$_POST['telephone']:null;
	$telephone = htmlspecialchars($_POST['telephone']);// On rend inoffensives les balises HTML que le visiteur a pu rentrer
	$masquerTel = (isset($_POST['masquerTel']))?$_POST['masquerTel']:null;	
	$region = (isset($_POST['region']))?$_POST['region']:null;
	$cle = sha1(microtime(TRUE)*100000);	
	$actif = 0;
 
	// requête pour l'insertion du producteur en base
	$req = 
		"insert into membres 
			values(null,:pseudo,:password,:annee_naissance,:email,:telephone,:masquerTel,:region,CURDATE(),:cle,:actif)";
	// on prépare le traitement de la requête
	$stm=$conn->prepare($req);
	// Tentative d'insertion en base d'un nouveau producteur en utilisant le mode transactionnel
	// bloc try ... catch()
	try {
		$conn->beginTransaction(); // on débute la transaction
		// on associe les marqueurs nommés avec les variables crées plus haut
		$stm->bindParam(':pseudo', $pseudo, PDO::PARAM_STR);
		$stm->bindParam(':password', $password, PDO::PARAM_STR);
		$stm->bindParam(':annee_naissance', $anneeNaiss, PDO::PARAM_STR);
		$stm->bindParam(':email', $email, PDO::PARAM_STR);
		$stm->bindParam(':telephone', $telephone, PDO::PARAM_STR);
		$stm->bindParam(':masquerTel', $masquerTel, PDO::PARAM_STR);
		$stm->bindParam(':region', $region, PDO::PARAM_STR);
		$stm->bindParam(':cle', $cle, PDO::PARAM_STR);
		$stm->bindParam(':actif', $actif, PDO::PARAM_INT);
		// exécution de la requête
		$stm->execute();			
		// on commit
		$conn->commit();		
		// on affiche un message 
		print '<div style="color:#132959">Inscription réussie! <br />Un email de confirmation est en cours d\'envoi ... </div>';
		header( "refresh:3;url=http://localhost/clothesBusiness/index.php" );
		echo 'refresh';
	} catch(PDOException $e) {
		// on rollback si cela se passe mal
		$conn->rollback();
 
		// on affiche un message d'erreur
		print '</br>';
		print "Erreur lors de l'insertion en base !: " . $e->getMessage() . "</br>";
		header( "refresh:7;url=http://localhost/clothesBusiness/index.php" ); 
	} // fin bloc try ... catch()	
 
?>

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
<?php
/* script vérifiant la validité des informations saisis par l'utilisateur **/
/* si la variable submit est définie, on inclus le fichier permettant l'injection SQL 
	vérifier que le champ submit du formulaire possède l'attribut name="submit"
	vérification de la validité des valeurs des champs saisis par l'utilisateur **/
 
if(isset($_POST['password']) && isset($_POST['verifPassword'])) { // si toutes les valeurs des champs sont définies 
	if(!empty($_POST['password']) && !empty($_POST['pseudo'])) { // si la valeur des champs login et password ne sont pas vides alors
		if($_POST['password'] == $_POST['verifPassword']) { // si les valeurs des champs sont équivalentes alors
			if(filter_var($_POST['email'], FILTER_VALIDATE_EMAIL)) { // si le champ email est bien définie alors
				 // filtre de validation d'une adresse email (cf. Manuel PHP)
					if ($_POST['submit']) {
						require_once 'inc_ajoutMembre.php'; // inclusion du script d'ajout d'un producteur en base						
					} // au clique sur le bouton submit j'inclus le script d'injection SQL	
			} else { // sinon
				print '<div style="color:#B9121B">Votre adresse email est invalide ! </div>'; // affichage d'un message d'avertissement pour l'adresse email					
				header( "refresh:2;url=http://localhost/clothesBusiness/index.php" ); // redirection vers la page d'adhesion
			} //if(filter_var())				
		} else {
			print '<div style="color:#B9121B">Vos mots de passe ne correspondent pas ! </div>';	// affichage d'un message d'avertissement pour les mots de passe
			header( "refresh:2;url=http://localhost/clothesBusiness/index.php" );
		}
	} else {
		print '<div style="color:#B9121B">Votre login et/ou votre mot de passe sont vides ! </div>'; // affichage d'un message d'avertissement pour les mots de passe
		header( "refresh:2;url=http://localhost/clothesBusiness/index.php" );
	} // fin if(!empty($_POST['password']) && !empty($_POST['login']))
}
 
?>

Merci d'avance.
Transact.

**SpaceFrog** · 05/11/2012, 16h29

Code :

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

1
2
3
4
5
6
7
$.post(url, {pseudo:pseudo, 
						password:password, 
						anneeNaiss:anneeNaiss,
						email:email,
						telephone:telephone,
						masquerTel:masquerTel,
						region:region},

elle viennent d'ou ces variables password, anneNaiss ... ????

**Bovino** · 05/11/2012, 16h30

Code :

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

$("#inscription").click(function() {...})

J'ai peut-être mal regardé, mais je n'ai vu aucun id inscription... Du coup, difficile d'exécuter le code...

**Rony Rauzduel** · 05/11/2012, 16h37

Merci pour la diligence de vos réponses, je répondrai dans l'ordre des posts.

Pour SpaceFrog
Ces variables viennent du formulaire HTML présent dans le fichier inc_inscription.php

Pour Bovino
inscription correspond à l'id du lien Inscription présent sur la page index.php que je n'ai pas posté dans ce sujet

**SpaceFrog** · 05/11/2012, 16h41

quand tu dis viennent ???
tu espères que l'id fasse le boulot ?

regarde plutot du coté de serialze()

**Bovino** · 05/11/2012, 16h42

Ces variables viennent du formulaire HTML

Il n'y a pas de variables en HTML

Donc non, tu ne peux pas faire comme ça, il faut récupérer les valeurs en JavaScript.

**Rony Rauzduel** · 05/11/2012, 16h46

Pour reprendre certains aspects de mon code, les valeurs mentionnées par SpaceFrog sont les valeurs de l'attribut name des champs du formulaire.
En quoi l'id intervient-il dans cette question, faut-il prendre l'attribut id ou l'attribut name?

**Rony Rauzduel** · 05/11/2012, 16h49

J'ai essayé ce code avec serialize(), mais le résultat voulue n'est pas au rendez-vous:

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
 
// pour l'appel Ajax
			$.ajax({				
				url: $(this).attr('action'),
				type: $(this).attr('method'),
				data: $(this).serialize(), 
				cache: false,
				error: function() { alert("erreur lors du processus de publication!"); },
				success: function(retour){													 	
							if(retour == 'refresh') { // test sur echo 'refresh' du fichier inc_ajoutMembre.php
								$("#loader").hide(); // on cache le loader d'attente Ajax
							 	$("#inscriptionForm").fadeOut(); // on cache le formulaire
								window.location.reload(true);																															 	
							} //fin if()														 						
						 } // fin function(retour)		
			}); // fin $.ajax()

**SpaceFrog** · 05/11/2012, 16h50

ni l'un ni lautre
si tu as des names il faut passer par

Code :

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

document.getElementsByName('nom')[0].value

mais encore une fois serialize() de jquery n'existe pas pour rien ..

regarde du cote de serializeArray() aussi ...

Soumettre des données en Ajax [AJAX]

jQuery

Vue hybride

Discussions similaires

Partager

Partager