Discussion :

[Coombaya]

Bonjour à tous,

Je suis bloqué sur un formulaire, si quelqu'un voudrait bien me venir aide..

J'aimerais dire : "Si le formulaire est correctement envoyé, je laisse les champs pseudo et email remplis et je supprime le champs texte, mais s'il y a une erreur lors de l'envoi, je laisse tous les champs remplis.

Je vous montre ce que j'ai essayé de faire :

Code JS :

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
//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_content = $("#comment_content");
  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_content.val(""); //ici je vide seulement le texte saisi après validation
          $comment_message.html(data.error);
          $comment_form[0].comment_id.value = "0";
          load_comment();
        }
      }, //ici j'essaie de ne pas vider le formulaire en cas d'erreurs
      error: function (data) {
        if (data.error !== "") {
          $comment_message.html(data.error);
          $comment_form[0].comment_id.value = "0";
          load_comment();
        }
      },
    });
    //on renouvelle le token pour envoyer un 2nd commentaire
    // Clef REcaptcha site ci dessous
    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 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
<?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);
?>

[mathieu]

le souci est à quelle étape ?

[Coombaya]

A cette étape : //ici j'essaie de ne pas vider le formulaire en cas d'erreurs
Ligne 37 du code JS

J’arrive à vider seulement le texte en conservant le pseudo et le mail mais à cette étape, en théorie ça ne devrait rien vider et ça me vide quand même le texte

[SpaceFrog]

Tout dépend de quel coté se fait la vérification ...

Si elle se fait en JS coté client (avant le submit) , le formulaire n'est pas envoyé, le page pas rechargée, et donc les données ne sont pas effacées.

Si la vérification se fait (en php par exemple) coté serveur (après le submit), la page se recharge il faut donc renseigner les champs du formulaire avec les données reçues en get ou en post lors de la soumission.

[Coombaya]

Je débute mais si j’ai bien compris ce que tu me dis la vérification se fait en JS..

[SpaceFrog]

Tu es dans un

Code :

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

$comment_form.on("submit",

il y a bien un preventDefault qui inhibe l'envoi du form
à priori la vérification se fait en ajax coté serveur.
il faudrait savoir ce que contient data sur le retour que ce soit en success ou error...

success / error ne veut pas dire que le serveur a détécté des erreurs de saisie ou non, ça veut dire que l'ajax a réussi ou pas ...