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
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
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é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>
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 $(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"); }); });
Il doit y avoir un moyen... mais je ne vois pas lequel, je dois louper certaines 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
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é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>
Serait-ce à propose de $.post() ou $.ajax() ?
Merci d'avance !
Partager