Envoi formulaire sans actualisation de la page
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:
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:
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:
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..
