Envoi formulaire sans actualisation de la page

**jeicko** · 15/04/2021, 12h25

Bonjour à tous,

Sur mon site web, j’ai une rubrique « Bla-Bla » pour laisser des commentaires.

Actuellement, quand on envoie un commentaire, on clique sur le bouton « envoyer » puis il y a une alerte « Ton message a bien été envoyé »

Si je veux envoyer un 2e message dans la foulée je ne peux pas valider une 2e fois le bouton « envoyer », je suis obligé d‘actualiser la page pour re soumettre le formulaire.

y’a t’il possibilité de faire en sorte qu’on puisse envoyer des messages sans avoir à actualiser la page ? Un peu comme un chat..

Je vous montre mon code :

add_comment.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
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
 <?php
//add_comment.php
$connect = new PDO('***');
$error = '';
$comment_name = '';
$comment_content = '';
$email = '';
$date = new \DateTime($row["date"]);
$formatedDate = (new IntlDateFormatter('fr_FR', IntlDateFormatter::LONG, IntlDateFormatter::SHORT));
// DEBUT RECAPTCHA
// On vérifie si le champ "recaptcha-response" contient une valeur
if (empty($_POST['recaptcha-response']))
{
    header('Location: index.html');
    die();
}
else
{
    // On prépare l'URL
    $url = "https://www.google.com/recaptcha/api/siteverify?secret=***&response={$_POST['recaptcha-response']}";
    // On vérifie si curl est installé
    if (function_exists('curl_version'))
    {
        $curl = curl_init($url);
        curl_setopt($curl, CURLOPT_HEADER, false);
        curl_setopt($curl, CURLOPT_RETURNTRANSFER, true);
        curl_setopt($curl, CURLOPT_TIMEOUT, 1);
        curl_setopt($curl, CURLOPT_SSL_VERIFYPEER, false);
        $response = curl_exec($curl);
    }
    else
    {
        // On utilisera file_get_contents
        $response = file_get_contents($url);
    }
    // On vérifie qu'on a une réponse
    if (empty($response) || is_null($response))
    {
        header('Location: index.html');
        die();
    }
    else
    {
        $data = json_decode($response);
        if ($data->score >= 0.5)
        {
            // je réalise mon action de formulaire.
            if (empty($_POST["comment_name"]))
            {
                $error .= '<p class="text-danger"></p>';
            }
            else
            {
                $comment_name = $_POST["comment_name"];
            }
            if (empty($_POST["comment_content"]))
            {
                $error .= '<p class="text-danger"></p>';
            }
            else
            {
                $comment_content = $_POST["comment_content"];
            }
            if (empty($_POST["email"]))
            {
                $error .= '<p class="text-danger"></p>';
            }
            else
            {
                $email = $_POST["email"];
            }
            if ($error == '')
            {
                $query = "
INSERT INTO tbl_comment
(parent_comment_id, comment, comment_sender_name, email)
VALUES (:parent_comment_id, :comment, :comment_sender_name, :email)
";
                $statement = $connect->prepare($query);
                $statement->execute(array(
                    ':parent_comment_id' => $_POST["comment_id"],
                    ':comment' => $comment_content,
                    ':comment_sender_name' => $comment_name,
                    ':email' => $_POST["email"]
                ));
                $error = '<label class="validation">Ton message a bien été envoyé !</label>';
            }
            else
            {
                header('Location: index.html');
                die();
            }
        }
        else
        {
            $error = '<label class="validation">OOPS ! Ton message ne veut pas partir.. Réessaie !</label>'; // tu es potentiellement un robot.
 
        }
    }
}
// FIN RECAPTCHA
// DEBUT FREE MOBILE SMS
$commentaireHTML = "<html>
<head>
<title>Nouveau Commentaire !</title>
</head>
<body>
<p>Monsite.com</p>
<p>Rubrique Bla-Bla :</p>
<ul>
<li><b>Le </b>" . strip_tags($formatedDate->format($date)) . "</li>
<li><b>Email : </b>" . strip_tags($email) . "</li>
<li><b>Pseudo : </b>" . strip_tags($comment_name) . "</li>
<li><b>Commentaire : </b>" . nl2br(strip_tags($comment_content)) . "</li>
</ul>
</body>
</html>
";
// inclure ici le fichier de la classe
require_once "FreeMobileSMS.php";
$sms = new FreeMobileSMS();
/**
 * configure l'ID utilisateur et la clé disponible dans
 * le compte Free Mobile après avoir activé l'option.
 */
$sms->setKey("***")
    ->setUser("***");
try
{
    // envoi d'un message
    $sms->send(html_entity_decode(strip_tags("$commentaireHTML")));
}
catch(Exception $e)
{
    // il y aura peut-être des erreurs.
    $this
        ->Session
        ->setFlash("Erreur sur envoi de SMS: (" . $e->getCode() . ") " . $e->getMessage() , 'danger');
}
// FIN FREE MOBILE SMS
$data = array(
    'error' => $error
);
echo json_encode($data);
?>

fetch_comment.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
 <?php
//fetch_comment.php
$connect = new PDO('***');
$output = get_reply_comment($connect, 0); // appel la fonction récursive à partir du niveau 0
echo $output;
 
function get_reply_comment($connect, $parentId = 0, $marginleft = 0)
{
    $output = '';
    $query = " SELECT * FROM tbl_comment WHERE parent_comment_id = :parentId ORDER BY comment_id DESC "; // j'ai ajouté le order by ici
    $statement = $connect->prepare($query);
    $statement->execute(array(
        ':parentId' => $parentId
    ));
    $result = $statement->fetchAll();
    if ($parentId == 0)
    {
        $marginleft = 0;
    }
    else
    {
        $marginleft = $marginleft + 50;
    }
    if ($result)
    {
        foreach ($result as $row)
        {
            $date = new \DateTime($row["date"]);
            $formatedDate = (new IntlDateFormatter('fr_FR', IntlDateFormatter::LONG, IntlDateFormatter::SHORT));
            $output .= '
<div class="separator"</div>
<div class="box-light" style="margin-left:' . $marginleft . 'px">
<div class="chapeau">@ <b>' . $row["comment_sender_name"] . '</b></div><div class="white"><i>' . $formatedDate->format($date) . '</i></div>
<div class="texte-com">' . nl2br($row["comment"]) . '</div>
<div class="reponse"><button type="button" class="button1 reply" id="' . $row["comment_id"] . '">Répondre</button></div>
</div>
';
            $output .= get_reply_comment($connect, $row["comment_id"], $marginleft);
        }
    }
    return $output;
}
?>

Et le JS

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
 $(document).ready(function() {
    //quand le DOM est là, on sélectionne les éléments avec lesquels on va travailler
    //c'est mieux de le faire une fois au début, pour des questions de perf
    //mais surtout pour éviter d'avoir à faire un gros ctrl + r pour changer les sélecteurs.
    const $comment_form = $("#comment_form");
    const $comment_message = $("#comment_message");
    const $display_comment = $("#display_comment");
    $comment_form.on("submit", function(event) {
        event.preventDefault();
        const form_data = $comment_form.serialize();
        $.ajax({
            url: "add_comment.php",
            method: "POST",
            data: form_data,
            dataType: "JSON",
            success: function(data) {
                if (data.error !== "") {
                    $comment_form[0].reset();
                    $comment_message.html(data.error);
                    //un formulaire (élément) contient tous ses inputs
                    //c'est rangé par nom
                    $comment_form[0].comment_id.value = "0";
                    load_comment();
                }
            },
        });
    });
    reload();
    //////////////////////////////////
    function load_comment() {
        $.ajax({
            url: "fetch_comment.php",
            //POST pour envoyer des données, et GET pour obtenir des données
            method: "POST",
            success: function(data) {
                $display_comment.html(data);
                $(".reply").on("click", function() {
                    $comment_form[0].comment_id.value = $(this).attr("id");
                    $comment_form[0].comment_name.focus();
                });
            },
        });
    }
 
    function reload() {
        load_comment();
        setTimeout(reload, 1000);
    }
});

J’ai cru comprendre que je devais utiliser un écouteur sur le bouton mais je n’arrive pas à le mettre en place..

**Sparky95** · 16/04/2021, 14h04

Bonjour,
Si c'est un chat que tu souhaites créer ou similaire regardes du coté des web-sockets.
Pour avancer rapidement tu peux dans un premier temps, par un refresh automatique d'une partie de ta page, via jQuery regarder du coté setInterval
mais je te déconseille de le perdurer comme ça car le refresh ce ferra même si il n'y a pas de nouveaux messages. (chaque client ferra une demande en boucle)

essayes ceci.

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
 
<?php
    if($_POST){
        echo json_encode($_POST);
        exit;
    }
?>
<html>
    <head>
        <!-- jQuery -->
        <link rel="stylesheet" type="text/css" href="https://code.jquery.com/jquery-3.6.0.min.js">
        <script>
            $(function(){ // equivallement $(document).ready(function() 
                //gestion plus envoie du formulaire
                $("#my_form").submit(function(e){ // je détecte l'envoie
                    e.preventDefault(); // je bloque l'envoie via via html pure
                    let url = $(this).attr("action");
                    //envoie du formulaire
                    $.post(url, { param1: "Hello World!" }); // equivallent de $.ajax mais plus rapide à écrire => tu peux rechercher $.post $.get $.json qui te plairont probablement 
                })/*.done()*/;
 
 
                //reception de la réponse du formulaire
                $("#my_form").ajaxSuccess(function(e, data){ //equivalent du .done 
                    $("#response").html(data);
                }
        });
        </script>
    </head>
    <body>
        <form id="my_form" action="?">
            <span id="response"></span>
<!--
            <label for="fname">Prénom :</label>
            <input type="text" id="fname" placeholder="Prénom,...">
 
            <label for="lname">Nom :</label>
            <input type="text" id="lname" placeholder="Nom,...">
-->
            <input type="submit" value="envoyer">
        </form>
    </body>
</html>

Je n'ai par contre pas su vérifier qu'il n'y ai pas de petites erreurs n'ayant de serveur php sous la main.
Mais cela devrait t'aider à solutionner ton problème.
N'hésite pas à faire des mini examples de test comme celui la pour avancer dans ton projet.
Bonne journée

EDIT: rectification j'avais lu en diagonal ton code.
pourrais tu fournir ta partie HTML?
car pour moi le problème est directement coté client.
Ce que tu peux faire pour vérifier que ton formulaire est envoyé, c'est regarder au niveau de l'inspecteur (de ton navigateur) si il y a bien une requête qui est envoyé.
=> tu ouvres ton inspecteur tu vas sur network tu vires tout via le bouton "interdiction de stationner" et quand tu appuie sur le bouton d'envoie de formulaire tu regardes si tu obtiens bien une ligne vers l'url où tu es sensé envoyer ta requète.
De la tu pourras également voir le message de retour.
si jamais tu as besoin de plus d'aide, je devrais à priori pouvoir te solutionner ton problème

**jeicko** · 17/04/2021, 01h06

Bonjour Sparky95,

Je te remercie d'avoir pris de ton temps pour regarder mon code.

En effet c'est un genre de mini chat que je souhaite faire, mais pas un gros gros truc, simplement qu'on puisse envoyer au moins 2 messages d'affilé, ce n'est pas destiné à faire de grandes discussions.

Je suis novice en JS et PHP et j'ai passé beaucoup de temps sur ce code, je ne souhaite pas tout recommencer car je n'ai pas un grand niveau dans ce domaine.
Disons qu'après ton aide ça sera mon code final pour cette partie de mon site je pense.

Je n'ai pas encore regardé en détail ce que tu me proposes de faire car je vois ton message à une heure tardive. Je regarderai ça en détail dans le week-end à tête reposé.

Je te montre mon code html comme tu me l'as demandé :

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
<!-- Début Commentaires -->
          <form action="add_comment.php" id="comment_form" method="POST">
            <div class="fields">
              <div class="field half">
                <label for="name">Pseudo</label>
                <input
                  type="text"
                  name="comment_name"
                  id="comment_name"
                  required
                />
              </div>
              <div class="field half">
                <label for="email">Email</label>
                <input type="email" name="email" id="email" required />
              </div>
              <div class="field">
                <label for="message">Message</label>
                <textarea
                  name="comment_content"
                  id="comment_content"
                  rows="4"
                  required
                ></textarea>
                <span id="comment_message"></span>
                <!--Ton message a bien été envoyé-->
                <!--Une «alerte» div cachée ci-dessous pour afficher le message reçu du serveur une fois le formulaire soumis-->
                <div id="alert2"></div>
                <!--recaptcha cachée ci-dessous-->
                <input
                  type="hidden"
                  class="grecaptcha-badge"
                  id="recaptchaResponse-com"
                  name="recaptcha-response"
                />
                <input
                  type="hidden"
                  name="comment_id"
                  id="comment_id"
                  value="0"
                />
                <!--Fin alerte-->
              </div>
            </div>
            <ul class="actions">
              <li>
                <button class="button1 primary" type="submit">Envoyer</button>
              </li>
              <li>
                <input class="button1" type="reset" value="Effacer" />
              </li>
            </ul>
          </form>
 
          <div id="display_comment"></div>
          <!-- Fin Commentaires -->

Je te remercie pour ton aide !

**jeicko** · 17/04/2021, 23h49

"mais je te déconseille de le perdurer comme ça car le refresh ce ferra même si il n'y a pas de nouveaux messages. (chaque client ferra une demande en boucle)"

Pourrais-tu m'expliquer quelle est l'incidence à ce que le refresh se fasse même si il n'y a pas de nouveaux messages ?
Je n'arrive pas à comprendre comment le refresh peut se faire seulement s'il y a des nouveaux messages.. Je patauge un peu là

En faisant quelques tests je me suis rendu compte que si j'envoie un 2e message sans actualiser la page, le message part bien car je le reçois par texto mais il est vide (avec l'api free dans ma configuration php) et le message ne s'affiche pas sur mon site et l'erreur "OOPS ! TON MESSAGE NE VEUT PAS PARTIR.. RÉESSAIE !" apparait. Seul le premier envoi s'affiche. Je n'y comprends plus rien..

Si jamais quelqu'un veut tester tout ça je laisse aussi le sql :

Code SQL :

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
--
-- Database: `commentaires`
--
 
-- --------------------------------------------------------
 
--
-- Table structure for table `tbl_comment`
--
 
CREATE TABLE IF NOT EXISTS `tbl_comment` (
  `comment_id` int(11) NOT NULL,
  `parent_comment_id` int(11) NOT NULL,
  `comment` varchar(200) NOT NULL,
  `comment_sender_name` varchar(40) NOT NULL,
  `email` varchar(50) NOT NULL,
  `date` timestamp NOT NULL DEFAULT CURRENT_TIMESTAMP
) ENGINE=InnoDB DEFAULT CHARSET=utf8;
 
--
-- Indexes for dumped tables
--
 
--
-- Indexes for table `tbl_comment`
--
ALTER TABLE `tbl_comment`
  ADD PRIMARY KEY (`comment_id`);
 
--
-- AUTO_INCREMENT for dumped tables
--
 
--
-- AUTO_INCREMENT for table `tbl_comment`
--
ALTER TABLE `tbl_comment`
  MODIFY `comment_id` int(11) NOT NULL AUTO_INCREMENT;

**Sparky95** · 18/04/2021, 14h20

Ce que tu peux faire est imaginer le code de maniere procédural dans ta tête.
à savoir:
1 je remplis le formulaire
2 je l'envoie
3 je le réceptionnes => j'arrives où
4 je renvoie la/quel réponse
5 quel fonction réceptionne -> que ce passes-t-il
6 est-ce que l'object est écrasé?
7 je recommence le process sans refresh la page
une fois que c'est fais tu test les différentes étapes et tu vérifie que ça se passes comme tu l'avais prévu
et durant toutes ces étapes tu mets des echo, console.info, var_dump,... pour voir si les étapes se sont bien passés

la console du navigateur t'aidera énormément dans ce cas la ;-)

Concernant le refresh automatique ce n'est juste pas très propre
=> imagine tu ouvres Messenger tu as 30 conversations (chats) car tu as parlé avec 30 personnes par le passé. Dès que tu te connectes sur Messenger tu as un refresh toutes les x'' * 30 => (30 conversations = 30 refresh tout les secondes)
=> imagines maintenant tu parles avec 3 potes en mm temps dans différents chats ( (3 * 1 = 3 refresh par secondes) * 2 car il y a les correspondants => 6 refresh par seconde
donc 6 requetes au serveur * 2 car le serveur répond à chaque fois => 12 requetes pour ton serveur par seconde autant dire que ça va vite finir par spam.
Par défaut en web cela se passes toujours que dans un sens le client contact le serveur et celui si répond
pour résoudre se probleme on est passé au système du websocket
le serveur grace au websocket peut envoyer des messages aux client ce qui fait que pour 3 conversations il n'y a plus que des requetes lors d'envoies de messages
donc pour 1 message envoyé il n'y a que 2 requetes
expéditeur => serveur et serveur ->destinataire + 1 requete toutes les x secondes par client pour maintenir le websocket ouvert.

**jeicko** · 19/04/2021, 13h44

Il semblerait que le problème vienne de recaptcha, si je le le mets à 0 je peux envoyer autant de message que je veux, à partir du moment où il est supérieur à 0 je peux envoyer une seule fois un commentaire.. Mais à 0 il ne sert plus à rien.

Quelqu’un a une idée ?

Envoi formulaire sans actualisation de la page

JavaScript

Discussions similaires

Partager

Partager