Formulaire de contact

**flodereims** · 09/04/2018, 17h35

Bonjour,

Je suis entrain de faire un formulaire de contact en HTML/PHP/AJAX, mais je rencontre un soucis.

Dans le fichier PHP je récupère mes erreurs du formulaire via $errors = []; si je fais un var_dump de $errors , j'ai bien mes erreurs dedans, le problème, c'est que si je fais un foreach dans mon formulaire HTML, les erreurs ne vont pas s'afficher, d'habitude ça marche niquel si je ne passe par AJAX.

La solution par laquelle j'ai commencé est d'afficher chaques erreurs en dessous de chaque champs du formulaire, mais je n'aime pas trop cette facon de faire...

Y a t'il une solution, en AJAX pour récuperer toute mes erreurs et les afficher toute dans une même div les une en dessous des autres au dessus de mon formulaire par exemple ?

Cordialement.

Voici mon code:

HTML (contact.php):

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
<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="css/menu.css">
  <link rel="stylesheet" href="css/style.css">
  <link href='http://fonts.googleapis.com/css?family=Holtwood+One+SC' rel='stylesheet' type='text/css'>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
  <script src="js/lightbox.js"></script>
  <link rel="stylesheet" href="css/lightbox.css">
  <script src="js/contact.js"></script>
</head>
 
<body>
 
 
<div class="wrapper-connexion">
 
	<h1 class="text-logo">Me contacter</h1>
 
  <br>
 
<div class="erreurs"></div>
 
 
                      <?php if(!empty($errors)): ?> 
                    <div class="flash flash-danger">   
                        <?php foreach($errors as $error): ?>
                             <?= $error; ?><br>
                        <?php endforeach; ?>
                    </div>
                  <?php endif; ?>
 
	<form id="form-contact" class="formulaire-inscription" action="contact-form.php" method="POST">
 
    <div class="content">
 
	  <input id="nom" type="text" class="form-control-connexion" name="nom" placeholder="Nom *">	
          <input id="submit" class="bouton bouton-success" type="submit" value="Envoyer">
 
	</form>
 
</div> <!-- FIN div WRAPPER -->
 
 
 
</body>
</html>

PHP (contact-traite.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
67
<?php 
 
 
if(!empty($_POST)) {
 
	$errors = [];
 
// 
// NOM
// 
 
if(empty($_POST['nom']) || !preg_match('/^[a-zA-Z0-9_]+$/', $_POST['nom'])) {
	$errors['nom'] = "<div class='flash flash-danger'>Vous devez remplir le champ nom.</div>";
}
 
// // 
// // PRENOM
// // 
 
// if(empty($_POST['prenom']) || !preg_match('/^[a-zA-Z0-9_]+$/', $_POST['prenom'])) {
// 	$errors['prenom'] = "<div class='flash flash-danger'>Vous devez remplir le champ prenom.</div>";
// }
 
 
// // 
// // EMAIL
// // 
 
// if(empty($_POST['email']) || !filter_var($_POST['email'], FILTER_VALIDATE_EMAIL)) {
// 	$errors['email'] = "<div class='flash flash-danger'>L'e-mail n'est pas valide ou n'est pas rempli.</div>";
// }
 
 
// // 
// // MESSAGE
// // 
 
// if(empty($_POST['message'])) {
// 	$errors['message'] = "<div class='flash flash-danger'>Vous devez remplir le champ message.</div>";
// }
 
var_dump($errors);
 
}
 
 
if(empty($errors)) {
 
$email 		= "flodereims@yahoo.fr";
$sujet		= "Demande d'informations MESCREATIONS02";
$header 	= 'Mime-Version 1.0' . "\r\n";
$header		.= 'Content-type: text/html; charset=utf-8' . "\r\n";
$header		.= "\r\n";
 
$message 	= $_POST['message'];
$message 	.= '<b>Envoyer par: </b> : ' . $_POST['email'];
 
mail($email, $sujet, $message, $header);
echo "<div class='flash flash-success'>L'e-mail à bien été envoyé.</div>";
 
}
 
 
 
 
 
?>

AJAX:

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
  $(document).ready(function() {
 
  $("#form-contact").submit(function() {
 
    var action  = $(this).attr("action");
    var nom     = $("#nom").val();
    // var prenom  = $("#prenom").val();
    // var email   = $("#email").val();
    // var message = $("#message").val();
 
    $(".erreurs").slideUp('800', function() {
 
      $("input[type='submit']").hide().after('<img src="images/icons/ajax-loader.gif" class="loader">');
 
      $.post( action, {
 
        nom: nom
        // prenom: prenom,
        // email: email,
        // message: message
 
      }, function(data) {
 
        $(".erreurs").html(data);
        $(".erreurs").slideDown('800');
        $(".loader").fadeOut();
        $("input[type='submit']").fadeIn();
 
        if(data.match('success') != null) {
          $('#form-contact').hide();
        }
 
      });
 
    });
 
    return false;
 
  });
 
});

**SpaceFrog** · 11/04/2018, 13h47

mets le type de ton ajax en json,
Sur la page de traitement php des erreurs, colle tes erreurs dans un array ( avec id et test par exemple ) dont tu feras un json_encode
ainsi ta reponse ajax sera un json

dans le success de ton ajax fais un

Code :

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

success: function( errors ){ console.log( errors ); },

tu verras ton json en console.

il ne te restera plus qu'a faire un $.each sur le json pour les afficher coté client

**flodereims** · 19/04/2018, 17h30

Bonjour, je suis face à un problème malgré pas mal de testes....

1er problème:
Quand j'envoi mon formulaire (avec ajax), et donc que j'appuie sur submit, il fait deux fois un INSERT INTO en gros.... sauriez vous de quoi ça peut venir ?

2ème problème:
Quand je poste mon formulaire avec le nom + message, si c'est vide, il me retourne les erreurs dans une div au dessus, par contre si c'est isSuccess alors il envoi le formulaire avec un message de success qui apparait au dessus du formulaire et fait un INSERT dans ma BDD avec le nom + message et fait affiche aussi les commentaires en dessous du formulaire, mon soucis, c'est que si j'utilise AJAX, ma page ne se recharge pas, et donc, si c'est un isSuccess, l'utilisateur doit recharger lui même la page pour que le message s'actualises en dessous du formulaire et donc apparaisse.... j'ai essayé un location.reload(); dans le JS mais le problème c'est que du coup si il recharge la page, et bien le message de success ne s'affiche pas.... en gros il affiche le message et recharge ensuite.... donc je perd le message de success, y a t'il une solution pour palier à ce problème ?

Cordialement...

Voici mon code:

HTML

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
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
<?php
session_start();
require 'db/database.php';
include 'partials/header.php';
 
 
/* ON RECUPERE LES COMMENTAIRES */
  setlocale(LC_TIME, 'fr_FR.UTF8', 'fr.UTF8', 'fr_FR.UTF-8', 'fr.UTF-8');
  setlocale(LC_ALL, 'fr_FR');
  $commentaires = $db->query("SET NAMES utf8");
  $commentaires = $db->query('SELECT id, nom, message, DATEDIFF(CURRENT_DATE, date_creation) as date_creation, DATE_FORMAT(heure_creation, "%HH%i") as heure_creation, DATE_FORMAT(edit_date, "%d %M %Y à %HH%i") as edit_date FROM commentaires ORDER BY id DESC'); // RECUPERATION ECOULEMENT DU NOMBRE DE JOUR DEPUIS LA CREATION DU COMMENTAIRE
  $coms = $commentaires->fetchAll();
 
 
?>
 
 
<!DOCTYPE html>
<html>
    <head>
        <title>Contactez-Moi !</title>
        <meta charset="utf-8"/>
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
        <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
        <link href='http://fonts.googleapis.com/css?family=Lato' rel='stylesheet' type='text/css'>
        <link rel="stylesheet" href="css/style.css">
        <script src="test.js"></script>
    </head>
 
 
    <body>
 
 
<div class="wrapper">
 
 
<h1 class="text-logo">Poster un commentaire</h1>
 
 
<div id="flash" class="flash flash-danger">
  <p class="comments-nom"></p>
  <p class="comments-message"></p>
</div>
 
<!-- ----------------------------- -->
<!-- FORMULAIRE DE COMMENTAIRES -->
<!-- ----------------------------- -->
 
<form id="form-commentaire" class="formulaire-inscription" action="" method="POST">
  <input type="text" class="form-control-commentaires" name="nom" readonly="readonly" style="font-weight: bold; color: #AF5975 !important;" value="<?php if(isset($_SESSION['admin'])) { echo  $_SESSION['name']; } ?><?php if(isset($_SESSION['membre'])) { echo $_SESSION['name']; } ?>">
 
  <textarea id="message" type="text" class="form-control-commentaires" name="message" placeholder="Message"><?= isset($_SESSION['inputs']['message']) ? $_SESSION['inputs']['message'] : ''; ?></textarea> 
  <button class="bouton bouton-success" type="submit">ENVOYER</span></button>
</form>
 
<div id="success" class="flash flash-success">Votre commentaire à bien été publié.</div>
 
 
 
<!-- ----------------------------- -->
<!-- ON AFFICHE LES COMMENTAIRES -->
<!-- ----------------------------- -->
 
<div class="wrapper-formulaire-commentaires">
  <?php foreach($coms as $c): ?>
      <div class="element"><img class="avatar-accueil-commentaires" src="images/icons/avatar.png" width="45"></div>
          <div id="conteneur">
              <div class="nom"><?= $c->nom; ?>
                <?php if($c->date_creation > 1 AND $c->date_creation < 31) { ?><span class="date_creation">il y a <?= $c->date_creation ?> jours à <?= $c->heure_creation ?></span> <?php } ?>
                <?php if($c->date_creation == 1) { ?><span class="date_creation">Hier à <?= $c->heure_creation ?></span><?php } ?>
                <?php if($c->date_creation < 1) { ?><span class="date_creation">Aujourd'hui à <?= $c->heure_creation ?></span><?php } ?>
              </div>
 
              <div class="message"><?= $c->message ; ?></div>
          </div>
  <?php endforeach; ?>
</div>
</div> <!-- FIN div WRAPPER -->
 
<script src="test.js"></script>
 
 
  </body>
</html>

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
<?php
include 'db/database.php';
 
    $array = array("message" => "", "nom" => "", "messageError" => "", "nomError" => "", "isSuccess" => false);
 
 
    if ($_SERVER["REQUEST_METHOD"] == "POST")
    { 
        $array["nom"] = $_POST["nom"];
        $array["message"] = $_POST["message"];
        $array["isSuccess"] = true; 
 
        if(empty($_POST["nom"]))
        {
            $array["nomError"] = "Nom invalide.";
            $array["isSuccess"] = false; 
 
        }
 
        if(empty($_POST["message"]))
        {
            $array["messageError"] = "Message invalide.";
            $array["isSuccess"] = false; 
 
        }
 
 
        if($array["isSuccess"]) 
        {
        $req = $db->prepare('INSERT INTO commentaires (nom,message) VALUES(?,?)');
        $req->execute(array($array['nom'], $array['message']));
        }
 
        echo json_encode($array);
 
    }
 
?>

AJAX

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
$(function () {
 
    $('#form-commentaire').submit(function(e) {
        e.preventDefault();
        $('.comments-nom').empty();
        $('.comments-message').empty();
        var postdata = $('#form-commentaire').serialize();
 
        $.ajax({
            type: 'POST',
            url: 'test.php',
            data: postdata,
            dataType: 'json',
            success: function(json) {
 
                if(json.isSuccess) 
                {
                    $('#flash').hide(); 
                    $('#form-commentaire').hide();
                    $('#success').show(); // message de confirmation d'envoi
                    location.reload();
                }
                else
                {
                    $('#flash').show();
                    $('.comments-nom').html(json.nomError);
                    $('.comments-message').html(json.messageError);
                }                
            }
        });
    });
 
})

Formulaire de contact

AJAX

Vue hybride

Discussions similaires

Partager

Partager