par
jeicko » 20 avr. 2021, 18:45
Ok je pense avoir compris :
Code : Tout sélectionner
//Connexion Recaptcha
grecaptcha.ready(function () {
grecaptcha
.execute("***", {
action: "homepage",
})
.then(function (token) {
document.getElementById("recaptchaResponse-com").value = token;
});
});
$(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();
}
},
});
//on renouvelle le token pour envoyer un 2nd commentaire
grecaptcha
.execute("***", {
action: "homepage",
})
.then(function (token) {
document.getElementById("recaptchaResponse-com").value = token;
});
});
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, 10000);
}
});
Pour le formulaire de contact (que j'ai fait il y a bien longtemps) le code n'était pas fait de la même façon, j'ai suivi le même principe, ça fonctionne mais je me permets de te le montrer aussi dans le doute car pour moi, le JS et PHP n'est pas aussi fluide que toi, j'ai peur de faire une bourde. Si t'as 5min pour regarder je te remercie.
Code : Tout sélectionner
$("#contact-form").submit(function (event) {
event.preventDefault(); // Empêcher la soumission directe du formulaire
$("#alert").text("Envoi en cours...").fadeIn(0); // Afficher "Traitement" pour informer l'utilisateur que le formulaire est en cours d'envoi
grecaptcha.ready(function () {
// Clef REcaptcha site ci dessous
grecaptcha
.execute("***", {
action: "contact",
})
.then(function (token) {
var recaptchaResponse = document.getElementById("recaptchaResponse");
recaptchaResponse.value = token;
// Passez l'appel Ajax ici
$.ajax({
url: "contact.php",
type: "post",
data: $("#contact-form").serialize(),
dataType: "json",
success: function (_response) {
// La requête Ajax est un succès. _response est un objet JSON
var error = _response.error;
var success = _response.success;
if (error != "") {
// En cas d'erreur, affichez-le à l'utilisateur
$("#alert").html(error);
} else {
// En cas de succès, affichez-le à l'utilisateur et supprimez le bouton d'envoi (non utilisé pour le moment)
$("#alert").html(success);
$("").remove();
$("#contact-form")[0].reset();
}
},
error: function (jqXhr, json, errorThrown) {
// En cas d'erreur Ajax également, affiche le résultat
var error = jqXhr.responseText;
$("#alert").html(error);
$("#contact-form")[0].reset();
},
});
//on renouvelle le token pour envoyer un 2nd message
grecaptcha
.execute("***", {
action: "contact",
})
.then(function (token) {
document.getElementById("recaptchaResponse").value = token;
});
});
});
});
Ok je pense avoir compris : [code]//Connexion Recaptcha
grecaptcha.ready(function () {
grecaptcha
.execute("***", {
action: "homepage",
})
.then(function (token) {
document.getElementById("recaptchaResponse-com").value = token;
});
});
$(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();
}
},
});
//on renouvelle le token pour envoyer un 2nd commentaire
grecaptcha
.execute("***", {
action: "homepage",
})
.then(function (token) {
document.getElementById("recaptchaResponse-com").value = token;
});
});
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, 10000);
}
});
[/code]
Pour le formulaire de contact (que j'ai fait il y a bien longtemps) le code n'était pas fait de la même façon, j'ai suivi le même principe, ça fonctionne mais je me permets de te le montrer aussi dans le doute car pour moi, le JS et PHP n'est pas aussi fluide que toi, j'ai peur de faire une bourde. Si t'as 5min pour regarder je te remercie.
[code]$("#contact-form").submit(function (event) {
event.preventDefault(); // Empêcher la soumission directe du formulaire
$("#alert").text("Envoi en cours...").fadeIn(0); // Afficher "Traitement" pour informer l'utilisateur que le formulaire est en cours d'envoi
grecaptcha.ready(function () {
// Clef REcaptcha site ci dessous
grecaptcha
.execute("***", {
action: "contact",
})
.then(function (token) {
var recaptchaResponse = document.getElementById("recaptchaResponse");
recaptchaResponse.value = token;
// Passez l'appel Ajax ici
$.ajax({
url: "contact.php",
type: "post",
data: $("#contact-form").serialize(),
dataType: "json",
success: function (_response) {
// La requête Ajax est un succès. _response est un objet JSON
var error = _response.error;
var success = _response.success;
if (error != "") {
// En cas d'erreur, affichez-le à l'utilisateur
$("#alert").html(error);
} else {
// En cas de succès, affichez-le à l'utilisateur et supprimez le bouton d'envoi (non utilisé pour le moment)
$("#alert").html(success);
$("").remove();
$("#contact-form")[0].reset();
}
},
error: function (jqXhr, json, errorThrown) {
// En cas d'erreur Ajax également, affiche le résultat
var error = jqXhr.responseText;
$("#alert").html(error);
$("#contact-form")[0].reset();
},
});
//on renouvelle le token pour envoyer un 2nd message
grecaptcha
.execute("***", {
action: "contact",
})
.then(function (token) {
document.getElementById("recaptchaResponse").value = token;
});
});
});
});
[/code]
