Valider plusieurs fois un formulaire sans actualiser la page
Posté : 19 avr. 2021, 11:25
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 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 suis bloqué. J’ai passé des heures dessus et c’est la dernière partie de mon site après mon site est terminé..
Si quelqu’un veut bien me montrer ce que je fais de mal svp
Je mets tout le code si quelqu’un veut l’essayer.
En espérant que quelqu’un veut bien m’aider
Je vous montre mon code :
add_comment.php
Fetch_comment.php
Commentaires.Js
Html
Sql
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 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 suis bloqué. J’ai passé des heures dessus et c’est la dernière partie de mon site après mon site est terminé..
Si quelqu’un veut bien me montrer ce que je fais de mal svp
Je mets tout le code si quelqu’un veut l’essayer.
En espérant que quelqu’un veut bien m’aider
Je vous montre mon code :
add_comment.php
Code : Tout sélectionner
<?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);
?>Code : Tout sélectionner
<?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;
}
?>Commentaires.Js
Code : Tout sélectionner
$(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);
}
});Code : Tout sélectionner
<!-- 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 -->Code : Tout sélectionner
--
-- 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;