Valider un formulaire sans recharger la page

**.Spirit** · 16/11/2010, 22h23

Bonjour,

Voilà je suis en train de créer un portfolio en utilisant jQuery, et je bute sur un petit problème agaçant.
En fait, j'ai plusieurs pages incluses à l'aide de jQuery (load), donc une page "formulaire de contact". Seulement, lors de la validation de ce formulaire, je ne trouve pas le moyen d'exécuter le code PHP tout en gardant la même page ou en affichant un message à la place de mon formulaire (ou au dessus, enfin bref, modifier uniquement la partie "contenu", et ne pas recharger la page, car sinon je reviens sur l'accueil, et je ne veux pas).

Pour l'instant, je mets le code PHP dans index.php (les pages incluses dans index.php sont des pages html, comme contact.html), et donc la champ "action" de mon form pointe vers index.php... ça recharge donc la page. Pas ce que je veux, et en plus je n'arrive pas à afficher un message de confirmation du coup.

Voici mon code :

index.php

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
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
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
           "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
	<head>
		<title>Blablabla</title>
		<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
		<link rel="stylesheet" type="text/css" media="screen" href="style.css" />
		<script type="text/javascript" src="jquery.js"></script>
		<script type="text/javascript" src="affichage.js"></script>
	</head>
	<body>
		<div id="header">
		</div>
		<div id="global">
			<div id="menu">
				<a id="lien_accueil" href="#accueil"><span class="bouton_menu"><span class="texte_menu">Accueil</span></span></a>
				<a id="lien_cv" href="#cv"><span class="bouton_menu"><span class="texte_menu">CV</span></span></a>
				<a id="lien_creations" href="#creations"><span class="bouton_menu"><span class="texte_menu">Cr&eacute;ations</span></span></a>
				<a id="lien_contact" href="#contact"><span class="bouton_menu"><span class="texte_menu">Contact</span></span></a>
			</div>
			<div id="haut_corps"></div>
			<div id="fond_corps">
				<div id="contenu">
					<?php
						if (isset($_POST['submit']) && $_POST['submit']!=''){
							$_POST['submit'] = ''; //on réinitialise la variable pour éviter de refaire le traitement une infinité de fois
							$message = htmlentities($_POST['message'], ENT_QUOTES);
							$message = nl2br($message);
							$sujet = htmlentities($_POST['sujet'], ENT_QUOTES);
							$email = htmlentities($_POST['email'], ENT_QUOTES);
							$nom = htmlentities($_POST['nom'], ENT_QUOTES);
 
							if((empty($message))||(empty($sujet))||(empty($email))||(empty($nom))){
								echo 'Vous n\'avez pas remplis tous les champs.';
							}
							else {
								$mail = "pseudo@domaine.tld";
								$msg = "<p><b> Message du Portfolio ! </b></p><b> Nom: </b> $nom \n <br /> <b> Email: </b> $email \n <br /> <b> Sujet: </b> $sujet <br /> <b> Message: </b> $message <br />";
								$headers.= "From: Portfolio<$mail>";
								$headers.= "MIME-Version: 1.0\r\n";
								$headers.= "Content-type: text/html; ";
								$headers.= "charset=utf-8\r\n"; //$headers.= "charset=iso-8859-1\r\n";
								$send_mail = mail($mail,$sujet,$msg,$headers);
								if ( $send_mail == true ) {
									echo '<p>Message envoyé avec succès !</p>';
								}
								else{
									echo '<p>Erreur lors de l\'envois du message</p>';
								}
							}
						}
						else include("accueil.html");
					?>
				</div>
			</div>
			<div id="bas_corps"></div>
		</div>
		<div id="footer"><p>Copyright© 2010</p></div>
	</body>
</html>

mes fonctions jquery:

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
35
36
37
38
39
40
41
42
$(document).ready(function() {
 
	//Au chargement du site
	/*$("#contenu").slideUp("normal", function() {
		$('#contenu').load('accueil.html', function() { //on charge la page demandée
			$("#contenu").slideDown("fast");
		});
	});*/
 
	//En cas de clic sur un bouton du menu
	$("#lien_accueil").click(function() { //Lien "Accueil" cliqué
		$("#contenu").slideUp("normal", function() {
			$('#contenu').load('accueil.html', function() { //on charge la page demandée
				$("#contenu").slideDown("fast");
			});
		});
	});
	$("#lien_cv").click(function() { //Lien "CV" cliqué
		$("#contenu").slideUp("normal", function() {
			$('#contenu').load('cv.html', function() { //on charge la page demandée
				$("#contenu").slideDown("fast");
			});
		});
	});
	$("#lien_creations").click(function() { //Lien "Créations" cliqué
		$("#contenu").slideUp("normal", function() {
			$('#contenu').load('creations.html', function() { //on charge la page demandée
				$("#contenu").slideDown("fast");
			});
		});
	});
	$("#lien_contact").click(function() { //Lien "Contact" cliqué
		$("#contenu").slideUp("normal", function() {
			$('#contenu').load('contact.php', function() { //on charge la page demandée
				$("#contenu").slideDown("fast");
			});
		});
	});
	$("#btm_submit").click(function() { //Lien "Contact" cliqué
		$.post("envoi-mail.php");
	});
});

Contact.html:

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
35
36
37
38
39
40
41
42
43
44
45
46
		 <script type="text/JavaScript" language="JavaScript">
			 <!--
			 // ancienne version :
			 // var mail = /^[a-zA-Z0-9]+[a-zA-Z0-9\.-_]+@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9])+$/;
			 var mail = /^[\w\-]+(\.[\w\-]+)*@[\w\-]+(\.[\w\-]+)*\.[\w\-]{2,}$/;
 
			 function estCeUnMail(champs) {
				 reponse=mail.test(champs.value)
				 if (reponse) {
					 return true;
				 }
				 else {
					 alert("Adresse mail invalide !");
					 return false;
				 }
			 }
 
			 function verifForm(formulaire) {
				 ok = false;
				 ok = estCeUnMail(formulaire.email);
				 if (ok) {
					 formulaire.submit();
					 return true;
				 }
				 else {
					 return false;
				 }
			 }
			 //-->
		</script>
		<p>Veuillez utiliser ce formulaire pour me contacter, que ce soit pour une question, une suggestion, ou une commande.</p>
		<form action="index.php" method="post" name="contactform" onSubmit="return verification()">
		<p>Nom et Pr&eacute;nom :<br />
			<input type="text" name="nom" id="nom" class="champ_input" />
		</p>
		<p>Adresse e-mail:<br />
			<input type="text" name="email" class="champ_input" />
		</p>
		<p>Sujet du message:<br />
			<input type="text" name="sujet" id="sujet" class="champ_input" />
		</p>
		<p>Votre message:<br />
			<textarea name="message" id="message" rows="8" cols="65"></textarea>
		</p>		
			<input type="button" value="Envoyer", name="btn_submit" id="btn_submit" onClick=verifForm(this.form) />
			<input type="reset" name="reset" value="Effacer" /></form>

Il doit y avoir un moyen... mais je ne vois pas lequel, je dois louper certaines fonctions jQuery...
Serait-ce à propose de $.post() ou $.ajax() ?

Merci d'avance !

**scourjean** · 17/11/2010, 09h40

Je te conseille plutôt ceci dans ton cas :

Petit tutorial en FR
http://www.absurdsystem.com/form-validation-engine/

Documentation et exemple site officiel EN
http://www.position-absolute.com/art...ion-is-a-mess/

**.Spirit** · 17/11/2010, 10h15

Bonjour et merci pour ta réponse.

Malheureusement, il me semble que les liens donnés ne prennent pas encore compte le traitement PHP, si ?

J'ai regardé plusieurs exemples de formulaires sur le web avec jQuery et à chaque fois il manquait le plus important, ou alors je me fourvoie.

Merci d'avance;

**scourjean** · 17/11/2010, 10h19

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
$("#formID").validationEngine({
 
				ajaxSubmit: true,
 
					ajaxSubmitFile: "ajaxSubmit.php",
 
					ajaxSubmitMessage: "Thank you, we received your inscription!",
 
				success :  false,
 
				failure : function() {}
 
			})

Cf http://www.position-relative.net/cre...emoSubmit.html

**.Spirit** · 17/11/2010, 10h32

Merci, je vais approfondir dans cette voie.
Je donne une réponse ce soir ou demain, je pense pouvoir m'y pencher à nouveau sérieusement demain après-midi

edit: pour cette syntaxe:

Code :

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

$.post("test.php", { name: "John", time: "2pm" } );

Ça ne correspond pas à ce que je veux faire ?
J'ai tenté ça hier, sans succès. Je passais mes paramètres entre les accolades.

edit 2:
Je viens de comprendre...
Je pensais qu'il fallait absolument passer les variables en paramètre de quelque chose (peut-être avec la fonction $.post()) mais apparemment, pas sur la fonction dont tu me parles.

Merci

**.Spirit** · 17/11/2010, 22h32

Bon ben je sèche...

Rien n'est envoyé, donc je ne me suis pas encore penché sur la partie "confirmation d'envoi" puisque je ne reçois rien pour l'instant... Je ne sais pas si mon code PHP est exécuté...

Voici mon code:
index.php

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
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
           "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
	<head>
		<title>blablabla</title>
		<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
		<link rel="stylesheet" type="text/css" media="screen" href="style.css" />
		<script type="text/javascript" src="jquery.js"></script>
		<script type="text/javascript" src="affichage.js"></script>
		<script src="jquery.validationEngine-fr.js" type="text/javascript"></script>
		<script src="jquery.validationEngine.js" type="text/javascript"></script>
 
	</head>
	<body>
		<div id="header"></div>
		<div id="global">
			<div id="menu">
				<a id="lien_accueil" href="#accueil"><span class="bouton_menu"><span class="texte_menu">Accueil</span></span></a>
				<a id="lien_cv" href="#cv"><span class="bouton_menu"><span class="texte_menu">CV</span></span></a>
				<a id="lien_creations" href="#creations"><span class="bouton_menu"><span class="texte_menu">Cr&eacute;ations</span></span></a>
				<a id="lien_contact" href="#contact"><span class="bouton_menu"><span class="texte_menu">Contact</span></span></a>
			</div>
			<div id="haut_corps"></div>
			<div id="fond_corps">
				<div id="contenu"></div>
			</div>
			<div id="bas_corps"></div>
		</div>
		<div id="footer"><p>Copyright© 2010</p></div>
	</body>
</html>

contact.php

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
<p>Veuillez utiliser ce formulaire pour me contacter.</p>
<form action="" method="post" name="contactform" id="contactform">
	<p>Nom et Pr&eacute;nom :<br />
		<input type="text" name="nom" id="nom" class="validate[required] text-input" />
	</p>
	<p>Adresse e-mail:<br />
		<input type="text" name="email" id="email" class="validate[required,custom[email]] text-input" />
	</p>
	<p>Sujet du message:<br />
		<input type="text" name="sujet" id="sujet" class="validate[required] text-input" />
	</p>
	<p>Votre message:<br />
		<textarea name="message" id="message" rows="8" cols="65" class="validate[required] text-input"></textarea>
	</p>		
		<input class="submit" type="submit" value="Envoyer" />
		<input type="reset" name="reset" value="Effacer" />
</form>

affichage.js

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
35
36
37
38
39
40
41
42
43
44
45
46
$(document).ready(function() {
 
	//Au chargement du site
	$("#contenu").slideUp("normal", function() {
		$('#contenu').load('accueil.html', function() { //on charge la page demandée
			$("#contenu").slideDown("fast");
		});
	});
 
	//En cas de clic sur un bouton du menu
	$("#lien_accueil").click(function() { //Lien "Accueil" cliqué
		$("#contenu").slideUp("normal", function() {
			$('#contenu').load('accueil.html', function() { //on charge la page demandée
				$("#contenu").slideDown("fast");
			});
		});
	});
	$("#lien_cv").click(function() { //Lien "CV" cliqué
		$("#contenu").slideUp("normal", function() {
			$('#contenu').load('cv.html', function() { //on charge la page demandée
				$("#contenu").slideDown("fast");
			});
		});
	});
	$("#lien_creations").click(function() { //Lien "Créations" cliqué
		$("#contenu").slideUp("normal", function() {
			$('#contenu').load('creations.html', function() { //on charge la page demandée
				$("#contenu").slideDown("fast");
			});
		});
	});
	$("#lien_contact").click(function() { //Lien "Contact" cliqué
		$("#contenu").slideUp("normal", function() {
			$('#contenu').load('contact.php', function() { //on charge la page demandée
				$("#contenu").slideDown("fast");
			});
		});
	});
	$("#contactform").validationEngine({
				ajaxSubmit: true,
					ajaxSubmitFile: "envoi-mail.php",
					ajaxSubmitMessage: "Votre message a bien été envoyé. Merci !",
				success :  false,
				failure : function() {}
	});
});

envoie-mail.php

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
<?php
        $message = htmlentities($_POST['message'], ENT_QUOTES);
        $message = nl2br($message);
        $sujet = htmlentities($_POST['sujet'], ENT_QUOTES);
        $email = htmlentities($_POST['email'], ENT_QUOTES);
        $nom = htmlentities($_POST['nom'], ENT_QUOTES);
 
        if((empty($message))||(empty($sujet))||(empty($email))||(empty($nom))){
                echo 'Vous n\'avez pas remplis tous les champs.';
        }
        else {
                $mail = "XXX@XXX.XXX";
                $msg = "<p><b> Message du Portfolio ! </b></p><b> Nom: </b> $nom \n <br /> <b> Email: </b> $email \n <br /> <b> Sujet: </b> $sujet <br /> <b> Message: </b> $message <br />";
                $headers.= "From: .Spirit.Design<$mail>";
                $headers.= "MIME-Version: 1.0\r\n";
                $headers.= "Content-type: text/html; ";
                $headers.= "charset=utf-8\r\n";
                $send_mail = mail($mail,$sujet,$msg,$headers);
                if ($send_mail == true) {
                        echo 'Message envoyé avec succès !';
                }
                else {
                        echo 'Erreur lors de l\'envois du message';
                }
        }
?>

Qu'est-ce que je fais de mal ?
J'ai bien inclus les librairies dans l'index.php, je ne pense pas avoir fait d'erreur dans mon formulaire sur contact.php... et sur affichage.js... je ne sais pas trop si ce que j'ai fait est bon, j'ai tenté de reproduire le code de l'exemple donné ci-dessus... sans vraiment tout comprendre de ce que j'écrivais. D'où le problème à mon avis.

Merci d'avance !

Quelqu'un a une idée ?

Valider un formulaire sans recharger la page

jQuery

Vue hybride

Discussions similaires

Partager

Partager