Formulaire pour un site [Résolu]

Signaler
-
Messages postés
12
Date d'inscription
mercredi 29 avril 2020
Statut
Membre
Dernière intervention
5 août 2020
-
Holà,
Me voila avec un autre sujet...
je suis entrain de faire un site de formulaire mais pour l'instant le teste dans locale ...

Ma question, mon formulaire n'affiche pas les message qu'il faut lors qu'on click envoyer sans remplir les cases ni envoyer à un e-mail. pourtant j'ai fait quand meme attention à ne pas tout mélanger. et que dans le console, j'ai trouve aucune errore donc, j'aimerais bien me guide la ou il y a le problème un d'entre vous svp!





CECI EST LA PARTIE

JS
$(function()
{
 $("#contact-form").submit(function(e)
 {
 e.preventDefault();
  $('.comments').empty();
  var postdata = $('#contact-form').serialize();
  
  $.ajax({
   type: 'POST',
   url: '[https://www.commentcamarche.net/php/phpintro.php3 php]/contact.php',
   data: postdata,
   dataType: 'json',
   success: function(result)
   {
    if(result.isSuccess)
     {
      $("#contact-form").append("<p class='thank-you> Votre message a bien été encoyé. Merci de m'avoir contacté:)</p>");
      $("#contact-form")[0].reset();
     }
    else
     {
      $("#firstname + .comments").html(result.firstnameError);
      $("#name + .comments").html(result.nameError);
      $("#email + .comments").html(result.emailError);
      $("#phone + .comments").html(result.phoneError);
      $("#message + .comments").html(result.messageError);
     }
   }
  });
   
  });      
})



CECI EST LA PARTIE PHP

<?php

$array = array("firstname" => "", "name" => "", "email" => "" ,"phone" => "", "message" => "", "firstnameError" => "", "nameError" => "", "emailError" => "" ,"phoneError" => "", "messageError" => "", "isSuccess" => false);

$emailTo = "***@***";

 

if($_SERVER["REQUEST_METHOD"] == "POST")

{

 $array["firstname"] = verifyInput($_POST["firstname"]);

 $array["name"] = verifyInput($_POST["name"]);

 $array["email"] = verifyInput($_POST["email"]);

    $array["phone"] = verifyInput($_POST["phone"]);

 $array["message"] = verifyInput($_POST["message"]);

 $array["isSuccess"] = true;

 $emailText = "";

 

 if (empty($array["firstname"]))

 {

  $array["firstnameError"] = "Je veux connaitre ton prénom!";

  $array["isSuccess"] = false;

 }

 else

 {

  $emailText .= "Firstname: {$array["firstname"]}\n";

 }

 if (empty($array["name"]))

 {

  $array["nameError"] = "Je veux connaitre même ton nome!";

  $array["isSuccess"] = false;

 }

 else

 {

  $emailText .= "Name: {$array["name"]}\n";

 }

 

 if (! isEmail($array["email"]))

 {

  $array["emailError"] = "T'essaies de me rouler? C'est pas un email ça !";

 $array["isSuccess"] = false;

 }

 else

 {

  $emailText .= "Email: {$array["email"]}\n";

 }

 if(isPhone($array["phone"]))

 {

 $array["phoneError"] = "que des chiffres et des espaces, stp";

  $array["isSuccess"] = false;

 }

 else

 {

  $emailText .= "Phone: {$array["phone"]}\n";

 }

 if (empty($array["message"]))

 {

  $array["messageError"]= "que veut tu me dire!";

  $array["isSuccess"] = false;

 }

 else

 {

  $emailText .= "Message: {$array["message"]}\n";

 }

 if($array["isSuccess"])

 {

  $headers = "from: {$array["firstname"]} {$array["name"]} <{$array["email"]}>\r\nReply-To: {$array["email"]}";

  mail($emailTo, "voici ton mesages d'EHA", $emailText, $headers);

 }

 echo json_encode($array);

}

function isPhone($var)

{

 return preg_match("/^[0-9 ]*$/", $var);

}

function isemail($var)

{

 return filter_var($var, FILTER_VALIDATE_EMAIL);

}

function verifyInput($var)

{

 $var= trim($var);

 $var= stripslashes($var);

 $var= htmlspecialchars($var);

 

 return $var;

} 


?>
CECI EST LA PARTIE js dans un autre fichier qui s'est applé dans le html

JS
$(function()
{
 $("#contact-form").submit(function(e)
 {
 e.preventDefault();
  $('.comments').empty();
  var postdata = $('#contact-form').serialize();
  
  $.ajax({
   type: 'POST',
   url: '[https://www.commentcamarche.net/php/phpintro.php3 php]/contact.php',
   data: postdata,
   dataType: 'json',
   success: function(result)
   {
    if(result.isSuccess)
     {
      $("#contact-form").append("<p class='thank-you> Votre message a bien été encoyé. Merci de m'avoir contacté:)</p>");
      $("#contact-form")[0].reset();
     }
    else
     {
      $("#firstname + .comments").html(result.firstnameError);
      $("#name + .comments").html(result.nameError);
      $("#email + .comments").html(result.emailError);
      $("#phone + .comments").html(result.phoneError);
      $("#message + .comments").html(result.messageError);
     }
   }
  });
   
  });      
})





Mercie par avance, et excusez moi car je vois que c'est question qui se poser plain fois sauf que le mien je vois pas le problème. ce serait super si qqun pourrait le tester.

7 réponses

Messages postés
29544
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
15 septembre 2020
2 776
Bonjour,

Pour commencer, active l'affichage des erreurs PHP sur ta page php
Conseils à lire et à appliquer disponibles ici :

https://www.commentcamarche.net/faq/48399-php-gestion-des-erreurs-debogage-et-ecriture-du-code

.
Ensuite, que t'affiche la console exactement au niveau de ton appel ajax ?
A savoir qu'il est préférable d'utiliser firefox pour débuguer de l'ajax, plus simple à utiliser dans ce cas...
Il faudrait déplier la ligne de ton ajax et nous montrer le contenu des ongles parametres et réponse.
Pense à activer le debugage xhr pour le voir.

Messages postés
29544
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
15 septembre 2020
2 776
IL faut aussi ajouter le "error" dans le script js de l'ajax
error: function (err) {
   console.log("Erreur Ajax : ",err);
   alert("Erreur Ajax !  Regardez la console pour plus d’informations...");
}
Mercie pour ton réponse!

Alors, si jamais j'utilise Firefox et et dont le débogage xhr, je vois rien comme error.
par contre, l'affichage d'apache error.log est comme ceci:

[Tue Apr 28 09:42:53.988310 2020] [php7:notice] [pid 12172:tid 1924] [client ::1:51101] PHP Notice: Undefined index: name in C:\\xampp\\htdocs\\HAC\\php\\contact.php on line 10, referer: http://localhost:8090/HAC/Contact.php

on parle saulement de la dernière ligne;)

suite, j'ai debguer et c'est ici qu'il n'arrive pas à passer...


$(function()
{
 $("#contact-form").submit(function(e)
 {
 e.preventDefault();
  $('.comments').empty();
  var postdata = $('#contact-form').serialize();
  
  $.ajax({
   type: 'POST',
   url: 'php/contact.php',
   data: postdata,
   dataType: 'json',
   
   success: function(result)                                     // ici il n'arrive pas à passer.
   {
    if(result.isSuccess)
     {
      $("#contact-form").append("<p class='thank-you> Votre message a bien été encoyé. Merci de m'avoir contacté:)</p>");
      $("#contact-form")[0].reset();
     }
    else
     {
      $("#firstname + .comments").html(result.firstnameError);
      $("#name + .comments").html(result.nameError);
      $("#email + .comments").html(result.emailError);
      $("#phone + .comments").html(result.phoneError);
      $("#message + .comments").html(result.messageError);
     }
   }
  });
   
  });      
})


EDIT : Ajout du LANGAGE dans les balises de code afin d'avoir la coloration syntaxique et l'indentation du code !

Et en cas de volontiers pour le tester, je mis ici le dossier complait:

https://plnkr.co/edit/Zio9Gz3GbdnasQ2J?open=lib%2Fscript.js

Et puis Mercie pour la ligne de condition, c'est vrai que j'ai pas été regarder, je vais voir cela vers le soir....
Messages postés
29544
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
15 septembre 2020
2 776

Alors, si jamais j'utilise Firefox et et dont le débogage xhr, je vois rien comme error.

Tu n'as pas ajouté, dans ton code js, la gestion des erreurs tel que je te l'ai demandé....
$(function() {
  $("#contact-form").submit(function(e) {
    e.preventDefault();
    $('.comments').empty();
    var postdata = $('#contact-form').serialize();
    
    $.ajax({
      type: 'POST',
      url: 'php/contact.php',
      data: postdata,
      dataType: 'json',
      success: function(result) {
      if(result.isSuccess){
        $("#contact-form").append("<p class='thank-you> Votre message a bien été encoyé. Merci de m'avoir contacté:)</p>");
        $("#contact-form")[0].reset();
       } else {
        $("#firstname + .comments").html(result.firstnameError);
        $("#name + .comments").html(result.nameError);
        $("#email + .comments").html(result.emailError);
        $("#phone + .comments").html(result.phoneError);
        $("#message + .comments").html(result.messageError);
       }
      },
      error: function (err) {
       console.log("Erreur Ajax : ",err);
       alert("Erreur Ajax !  Regardez la console pour plus d’informations...");
      }
    });  
  });      
})


Par contre, le fait que tu aies des erreurs côté PHP explique pourquoi ton JS ne fonctionne pas.
Il faut corriger l'erreur indiquée dans ton error.log

Undefined index: name in C:\\xampp\\htdocs\\HAC\\php\\contact.php on line 10


Je t'invite, par ailleurs, à lire et à appliquer dans tes prochains codes, les conseils donnés ici :
https://www.commentcamarche.net/faq/48399-php-gestion-des-erreurs-debogage-et-ecriture-du-code

Ce qui donne pour ton code actuel, un truc du genre
<?php
//----------------------------------------------------//
// Affichage des erreurs PHP
//----------------------------------------------------//
error_reporting(E_ALL);
ini_set('display_errors', TRUE);
ini_set('display_startup_errors', TRUE);

//----------------------------------------------------//
// FONCTIONS
//----------------------------------------------------//
function isPhone($var){
 return preg_match("/^[0-9 ]*$/", $var);
}

function isemail($var){
 return filter_var($var, FILTER_VALIDATE_EMAIL);
}

function verifyInput($var) {
 $var= !empty($_POST[$var])trim($_POST[$var]) : ""; // récupération PROPRE des variables AVANT de les utiliser
 $var= stripslashes($var);
 $var= htmlspecialchars($var); // à n'utiliser que pour de l'affichage (jamais pour une base de données... juste au cas où ! )
 return $var;

} 

//----------------------------------------------------//
// Début du traitement
//----------------------------------------------------//
$array = array("firstname" => "", "name" => "", "email" => "" ,"phone" => "", "message" => "", "firstnameError" => "", "nameError" => "", "emailError" => "" ,"phoneError" => "", "messageError" => "", "isSuccess" => false);

$emailTo = "***@***";

 

if($_SERVER["REQUEST_METHOD"] == "POST") {
 $array["firstname"] = verifyInput("firstname");
 $array["name"] = verifyInput("name");
 $array["email"] = verifyInput("email");
 $array["phone"] = verifyInput("phone");
 $array["message"] = verifyInput("message");
 $array["isSuccess"] = true;

 $emailText = "";


 if (empty($array["firstname"])) {
  $array["firstnameError"] = "Je veux connaitre ton prénom!";
  $array["isSuccess"] = false;
 }  else {
  $emailText .= "Firstname: {$array["firstname"]}\n";
 }

 if (empty($array["name"]))  {
  $array["nameError"] = "Je veux connaitre même ton nome!";
  $array["isSuccess"] = false;
 } else {
  $emailText .= "Name: {$array["name"]}\n";
 }
 

 if (! isEmail($array["email"]))  {
  $array["emailError"] = "T'essaies de me rouler? C'est pas un email ça !";
  $array["isSuccess"] = false;
 } else {
  $emailText .= "Email: {$array["email"]}\n";

 }

 if(isPhone($array["phone"])){
  $array["phoneError"] = "que des chiffres et des espaces, stp";
  $array["isSuccess"] = false;
 } else {
  $emailText .= "Phone: {$array["phone"]}\n";
 }

 if (empty($array["message"])){
  $array["messageError"]= "que veut tu me dire!";
  $array["isSuccess"] = false;
 } else {
  $emailText .= "Message: {$array["message"]}\n";
 }

 if($array["isSuccess"]) {
  $headers = "from: {$array["firstname"]} {$array["name"]} <{$array["email"]}>\r\nReply-To: {$array["email"]}";
  if(mail($emailTo, "voici ton mesages d'EHA", $emailText, $headers)){
     $array["isSuccess"] = true; 
  }else{
     $array["isSuccess"] = false; 
     $array["messageError"]= "Erreur lors de l'envoi du mail.";
  }
  
  echo json_encode($array);
 }



}


Mercie Encore une fois!

Alors, c'est plus la ligne de 10. par contre la fonction err affiche bien qu'il y a un problème à ajx et l'error est comme ceci:

 Erreur [https://www.commentcamarche.net/contents/5-ajax-asynchronous-javascript-and-xml Ajax] :  
Object { readyState: 4, getResponseHeader: getResponseHeader(a), getAllResponseHeaders: getAllResponseHeaders(), setRequestHeader: setRequestHeader(a, b), overrideMimeType: overrideMimeType(a), statusCode: statusCode(a), abort: abort(a), state: state(), always: always(), then: then(), … }


Peut-tu me dire stp de quoi il s'agit! j'ai aussi checker en allant à mon code php mais rien de particulaire...
Messages postés
29544
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
15 septembre 2020
2 776
peux tu me mettre une capture écran de la réponse ajax dans la console ?
Messages postés
12
Date d'inscription
mercredi 29 avril 2020
Statut
Membre
Dernière intervention
5 août 2020



Et l'affichage dans la appache error.log et comme ceci:
unexpected 'trim' (T_STRING) in C:\\xampp\\htdocs\\HAC\\php\\contact.php on line 21, referer: http://localhost:8090/HAC/Contact.php


si j'ai bien compris, comme dnas mon cods line 21, c'est bien cette line qui est dans la fection verfiyInput, .....
 $var= !empty($_POST[$var])trim($_POST[$var]) : ""; // 
Messages postés
29544
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
15 septembre 2020
2 776
oh purée
j'ai un point d’interrogation qui a sauté
à corriger par
$var= !empty($_POST[$var]) ? trim($_POST[$var]) : "";


après... si tu avais regardé le lien que je t'avais donné, tu aurais pu voir l'erreur par toi même/
Messages postés
12
Date d'inscription
mercredi 29 avril 2020
Statut
Membre
Dernière intervention
5 août 2020

Hello Jordane;
désolé pour la tardiveté,! j'ai eu juste un petit autre error de frappe.

ma formulaire fonction enfin à affiche des message lorsque les cases sont vide sauf que ça me l'affiche aussi lorsque c'est remplis. c'est à dire que j'ai remplis un par un et correctement mais finalement, l’envoie d’e-mail ne marche pas. pas d'affichage de ajax mais aussi dans le console.

Et d'après le débaguege, dans le fonction résulte de linge 14 et 15 justement la quand c'est un Succès, il soute et arriver dans les message d’errer.

celle-ci sont les ligne de 14 et 15 dans l'ajax:
$("#contact-form").append("<p class='thank-you> Votre message a bien été encoyé. Merci de m'avoir contacté:)</p>");
    $("#contact-form")[0].reset();


Et cela, c'est image de aphe.error:


peut-tu jeter un œil une dernière fois stp?
shishay
Messages postés
29544
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
15 septembre 2020
2 776
Désolé... mais ton français est tellement approximatif que j'ai du mal à comprendre ce que tu écris....

Quoi qu'il en soit, il y a obligatoirement, dans la console de ton navigateur, une ligne correspondant à ton appel ajax.
(il faut que la console soit ouverte AVANT de lancer ton code ! )

Pour ce qui est du fichier error.log d'apche, il remonte des informations en rapport avec PDO ... sauf que dans le code que tu nous montres... il n'y aucune interaction avec la base de données...
Ca ne concerne donc pas le code actuel.

Au passage, dans ton JS, tu peux ajouter des console.log histoire de voir ce qu'il s'y passe.
Par exemple, juste avant le if

console.log('result ajax', result);
if(result.isSuccess){

Là tu auras forcément quelque chose d'écrit dans la console.

Ne reviens pas sans le contenu de la console...

.
Messages postés
12
Date d'inscription
mercredi 29 avril 2020
Statut
Membre
Dernière intervention
5 août 2020

Alors, il me dit que dans la ligne 7 qu'il manque une accolade mais je vois pas ou il manque...

le voici l'affichage de mon console:


Et mon code js
$(function() {
	$("#contact-form").submit(function(e) {
	  e.preventDefault();
	  $('.comments').empty();
	  var postdata = $('#contact-form').serialize();
	  
	  $.ajax({
		type: 'POST',
		url: 'php/contact.php',
		data: postdata,
		dataType: 'json',
		success: function(result) {
		console.log('result ajax', result);
		if(result.isSuccess){
		  $("#contact-form").append("<p class='thank-you> Votre message a bien été encoyé. Merci de m'avoir contacté:)</p>");
		  $("#contact-form")[0].reset();
		 } else {
		  $("#firstname + .comments").html(result.firstnameError);
		  $("#name + .comments").html(result.nameError);
		  $("#email + .comments").html(result.emailError);
		  $("#phone + .comments").html(result.phoneError);
		  $("#message + .comments").html(result.messageError);
		 }
		}
		error: function (err) {
		 console.log("Erreur Ajax : ",err);
		 alert("Erreur Ajax !  Regardez la console pour plus d’informations...");
		}
	  });  
	});      
  })


Et c'est noté pour mon orthographe, en fin pour faire le mieux. je suis encore en apprentissage au français, à la base je perle autre langue
Messages postés
29544
Date d'inscription
mercredi 22 octobre 2003
Statut
Modérateur
Dernière intervention
15 septembre 2020
2 776
Alors pour le français chapeau... car tu le parles et l'écrit déjà très bien.
c'est juste que parfois tes phrases ne sont pas très compréhensible.

Sinon, pour ce qui est du souci, il manque une virgule entre l'accolade du 'success" et le début du 'error'
}
error: function (err) {

A corriger par
},
error: function (err) {
Messages postés
12
Date d'inscription
mercredi 29 avril 2020
Statut
Membre
Dernière intervention
5 août 2020

Bingo!!!
Je tiens à te remercie mon cher!!!!
Je pense pouvoir me mettre à me former un plus en php, donc très volontiers si tu veux me recommander des bonnes site ...

Bon après-midi!!