formulaire Résolu/Fermé

Question

Bonjour, J'ai un formulaire qui une fois vérifier dans un script js me renvoie vers une page php pour le vérifier côté serveur, j'aimerais que la vérification côté serveur se fasse sans me faire changez de page.. const btn = document.querySelector('button');// recuperation du bouton /* ------------------------------------------------------ recuperation des trois inputs */ const nom = document.querySelector('#nom'); const mail = document.querySelector('#mail'); const msg = document.querySelector('#msg'); /* -------------------------------------------------------- recuperation du formulaire entier */ const notsend = document.querySelector('.notsend'); function send(){ /* --------------------------------------------------- récuperation des valeurs des input */ let nomval = nom.value; let mailval = mail.value; let msgval = msg.value; /* --------------------------------------------------- phrases d'erreur */ const notnom = document.querySelector('.notnom'); const notmail = document.querySelector('.notmail'); /* ---------------------------------------------------- reset */ nom.style.border = "5px solid rgba(255, 255, 255, 0)"; mail.style.border = "5px solid rgba(255, 255, 255, 0)"; notnom.innerHTML = ""; notmail.innerHTML = ""; /* ----------------------------------------------------- nom vide */ if ( nomval == '' ) { nom.style.border = "5px solid red"; notnom.innerHTML = "Le champs est vide !"; notnom.style.color = "red"; } else /* ----------------------------------------------------- mail vide */ if( mailval == '' ) { mail.style.border = "5px solid red"; notmail.innerHTML = "Le champs est vide !"; notmail.style.color = "red"; } else /* ---------------------------------------------------- nom moins de deux caractères */ if (nomval.length < 2) { nom.style.border = "5px solid red"; notnom.innerHTML = "Exemple : Max"; notnom.style.color = "red"; } /* --------------------------------------------------- mail incorrect */ const re = /^(([^<>()\.,;:\s@"]+(\.[^<>()\.,;:\s@"]+)*)|(".+"))@(($$[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}$$)|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/; if (re.test(String(mailval).toLowerCase()) == false) { mail.style.border = "5px solid red"; notmail.innerHTML = "Exemple : exemple@gmail.com"; notmail.style.color = "red"; } else { let sendmail = document.querySelector('.send');//recuperer l'icon du button btn.textContent = "Merci !";//remplacer le texte dans le button btn.appendChild(sendmail);//replacer l'icon dans le button ajaxC(); return true //Envoie du formulaire } return false //refus d'envoie du formulaire } \r\n";//de préférence une adresse avec le même domaine de là où, vous utilisez ce code, cela permet un envoie quasi certain jusqu'au destinataire $Entetes .= "Reply-To: Formulaire <".$_POST['mail'].">\r\n"; //on prépare les champs: $Mail=$_POST['mail']; $Sujet='=?UTF-8?B?'.base64_encode($_POST['nom']).'?=';//Cet encodage (base64_encode) est fait pour permettre aux informations binaires d'être manipulées par les systèmes qui ne gèrent pas correctement les 8 bits (=?UTF-8?B? est une norme afin de transmettre correctement les caractères de la chaine) $Message=htmlentities($_POST['msg'],ENT_QUOTES,"UTF-8");//htmlentities() converti tous les accents en entités HTML, ENT_QUOTES Convertit en + les guillemets doubles et les guillemets simples, en entités HTML //en fin, on envoi le mail if(mail($VotreAdresseMail,$Sujet,nl2br($Message),$Entetes)){//la fonction nl2br permet de conserver les sauts de ligne et la fonction base64_encode de conserver les accents dans le titre echo "Le mail à été envoyé avec succès!"; } else { echo "Une erreur est survenue, le mail n'a pas été envoyé"; } } } } } } ?> J'ai trouvé une fonction js qui peut peut etre m'aider : function ajaxC(){ var xhr = new XMLHttpRequest(); xhr.open("GET", "./php/mail.php" + a + "&firstname=" + b + "&mail=" + c + "&tel=" + d + "&content=" + e); xhr.onload = function(){ if(xhr.status === 200) { let response = document.querySelector("#mailValid"); response.innerHTML = "

" + xhr.responseText + "

"; if(xhr.responseText === "Votre mail a bien Ã©tÃ© envoyÃ© !"){ response.style.color = "#00bcd4"; response.style.border = "2px solid #00bcd4"; } else if(xhr.responseText === "Votre mail n'a pas pu Ãªtre envoyÃ©") { response.style.color = "red"; response.style.border = "2px solid red"; } else { response.style.color = "orange"; response.style.border = "2px solid orange"; } response.style.display = "block"; } else { console.log(xhr.status); } }; xhr.send(); } Configuration: Windows / Chrome 98.0.4758.82

jordane45 · Answer

Bonjour,

A la ligne de code

xhr.open("GET", "./php/mail.php" + a + "&firstname=" + b + "&mail=" + c + "&tel=" + d + "&content=" + e);
   


D'où viennent les variables a,b,c,d et e ?

En plus tu y as mis tel et content .. sauf que tu n'as pas ça dans ton formulaire..

Et enfin.. la "forme" de l'url n'est pas juste.

ça devrait plutôt être du style :

xhr.open("GET", "./php/mail.php?nom=" + nom + "&mail="+mail+"&msg="+msg); 
 

sachant que nom,mail et msg devraient être transmis en paramètres de la fonction..
par exemple

function ajaxC(nom,mail,msg){


que tu transmets depuis son appel dans ta fonction send

ajaxC(nomval , mailval,msgval  );


Pour finir (cette fois c'est vraiment la fin :-) )  ... il faut penser à regarder dans la console javascript de ton navigateur ce qui s'y affiche...
Et pour débuguer de l'ajax je te conseille fortement d'utiliser firefox ( et de bien penser à y activer le débugage xhr )

anthonyr_25 · Answer

bha comme je le disais ce bout de code dont tu me parle je l'ai chopper au hazard en penssant qu'il pouvais m'aider, je vais voir ce que je peux faire avec sa et oui je regarde la console mdr enfin pas tout le temps c'est vrai je vais y faire plus atention ! 
et je vais faire egalement ce que tu m'as dit pour firefox ;)
merci !

jordane45 · Answer

Par contre, vu que tu passes par de l'ajax maintenant .. il ne faut plus "submit" ton formulaire. Donc, 1 - Change le type de bouton

anthonyr_25 · Answer

c'est bon c réglé en laissant le button en type submit en plus ;) je vous met le code : \r\n"; $Entetes .= "Reply-To: Formulaire <".$_GET['mail'].">\r\n"; //on prépare les champs: $Mail=$_GET['mail']; $Sujet='=?UTF-8?B?'.base64_encode($_GET['nom']).'?=';//Cet encodage (base64_encode) est fait pour permettre aux informations binaires d'être manipulées par les systèmes qui ne gèrent pas correctement les 8 bits (=?UTF-8?B? est une norme afin de transmettre correctement les caractères de la chaine) $Message=htmlentities($_GET['msg'],ENT_QUOTES,"UTF-8");//htmlentities() converti tous les accents en entités HTML, ENT_QUOTES Convertit en + les guillemets doubles et les guillemets simples, en entités HTML //en fin, on envoi le mail if(mail($VotreAdresseMail,$Sujet,nl2br($Message),$Entetes)){//la fonction nl2br permet de conserver les sauts de ligne et la fonction base64_encode de conserver les accents dans le titre echo "Le mail à été envoyé avec succès!"; } else { echo "Une erreur est survenue, le mail n'a pas été envoyé"; } } } } } } ?> const btn = document.querySelector('button');// recuperation du bouton /* ------------------------------------------------------ recuperation des trois inputs */ const nom = document.querySelector('#nom'); const mail = document.querySelector('#mail'); const msg = document.querySelector('#msg'); /* -------------------------------------------------------- recuperation du formulaire entier */ const notsend = document.querySelector('.notsend'); function send(){ /* --------------------------------------------------- récuperation des valeurs des input */ let nomval = nom.value; let mailval = mail.value; let msgval = msg.value; /* --------------------------------------------------- phrases d'erreur */ const notnom = document.querySelector('.notnom'); const notmail = document.querySelector('.notmail'); /* ---------------------------------------------------- reset */ nom.style.border = "5px solid rgba(255, 255, 255, 0)"; mail.style.border = "5px solid rgba(255, 255, 255, 0)"; notnom.innerHTML = ""; notmail.innerHTML = ""; /* ----------------------------------------------------- nom vide */ if ( nomval == '' ) { nom.style.border = "5px solid red"; notnom.innerHTML = "Le champs est vide !"; notnom.style.color = "red"; } else /* ----------------------------------------------------- mail vide */ if( mailval == '' ) { mail.style.border = "5px solid red"; notmail.innerHTML = "Le champs est vide !"; notmail.style.color = "red"; } else /* ---------------------------------------------------- nom moins de deux caractères */ if (nomval.length < 2) { nom.style.border = "5px solid red"; notnom.innerHTML = "Exemple : Max"; notnom.style.color = "red"; } /* --------------------------------------------------- mail incorrect */ const re = /^(([^<>()\.,;:\s@"]+(\.[^<>()\.,;:\s@"]+)*)|(".+"))@(($$[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}$$)|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/; if (re.test(String(mailval).toLowerCase()) == false) { mail.style.border = "5px solid red"; notmail.innerHTML = "Exemple : exemple@gmail.com"; notmail.style.color = "red"; } else { let sendmail = document.querySelector('.send');//recuperer l'icon du button btn.textContent = "Merci !";//remplacer le texte dans le button btn.appendChild(sendmail);//replacer l'icon dans le button ajaxC(nomval , mailval,msgval ); return true //Envoie du formulaire } return false //refus d'envoie du formulaire } function ajaxC(nom,mail,msg){ /* let nomval = nom.value; let mailval = mail.value; let msgval = msg.value; */ var xhr = new XMLHttpRequest(); xhr.open("GET", "./php/mail.php?submit=true&nom=" + nom + "&mail="+mail+"&msg="+msg); xhr.onload = function(){ if(xhr.status === 200) { let response = document.querySelector("#mailValid"); response.innerHTML = "

" + xhr.responseText + "

"; if(xhr.responseText === "Votre mail a bien Ã©tÃ© envoyÃ© !"){ response.style.color = "#00bcd4"; response.style.border = "2px solid #00bcd4"; } else if(xhr.responseText === "Votre mail n'a pas pu Ãªtre envoyÃ©") { response.style.color = "red"; response.style.border = "2px solid red"; } else { response.style.color = "orange"; response.style.border = "2px solid orange"; } response.style.display = "block"; } else { console.log(xhr.status); } }; xhr.send(); } Un formulaire avec 3 input qui fonctionne whaho sa fait du bien quand sa marche !!! haha

Formulaire

4 réponses

Discussions similaires