Envoyé un formulaire de contact en Ajax

**Nicolas Legrand** · 18/03/2021, 14h56

Bonjour à vous, j'essaie de traiter un formulaire de contact en ajax en utilisant php et l'objet XMLHttpRequest en javascript pour pratiquer et m'exercer. Cependant je suis un peu largué. Ma fonction mail (pour envoyer l'email ne s'effectue pas). Quand je met le dossier en ligne pour tester j'ai les erreurs suivantes :

monsite.com/async/script.php[/url] [hTTP/1.1 404 Not Found]
- un tentative a été faite pour déclarer un encodage non UTF-8 pour du JSON récupéré en utlisant XMLHttpRequest. Seul UTF-8 est géré pour le décodage du JSON.

Si quelqu'un peu m'apporter un petit coup de pouce merci d'avance.

Voici mon code HTML:

Code HTML :

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
 
 <!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <link rel="stylesheet" href="css/style.css">
        <title>Accueil</title>
    </head>
<body>
 
 
    <form id="contact">
 
        <fieldset>  
            <p class="title_form">Formulaire de contact</p>
            <span id="form_messages"></span> 
 
 
            <label for="nom">Nom</label> <br>
            <input id="nom" type="text" placeholder="Nom" name="firstname"><br>
 
            <label for="prenom">Prenom</label> <br>
            <input id="prenom" type="text" placeholder="Prénom" name="name"> <br>
 
            <label for="email">Email</label> <br>
            <input id="email" type="email" placeholder="Email" name="email"><br>
 
            <label for="sujet">Sujet</label> <br>
            <input id="sujet" type="text" placeholder="Sujet du message" name="sujet"><br>
 
            <label for="message">Message</label> <br>
            <textarea id="message" name="area" id="" placeholder="Ecrivez votre message"></textarea><br>
 
            <input class="btn" type="submit" value ="Envoyer">
        </fieldset>
     </form> 
 
<script src="js/main.js"></script>
</body>
</html>

code javascript

Code JAVASCRIPT :

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
 
 
document.querySelector("#contact").addEventListener("submit", function(e) {
    e.preventDefault();
 
    var data = new FormData(this);
    console.log(data);
 
    var xhr = new XMLHttpRequest();
    xhr.onreadystatechange = function(){ 
        if(this.readyState == 4 && this.status == 200){
            console.log(xhr.response);
            var obj = this.response;
            const errorElement = document.querySelector("#error");
            errorElement.innerHTML = obj.msg;
 
        } else if(this.readyState == 4){
            alert("Une erreur est survenue...")
        }
    };
 
    xhr.open("POST", "/async/script.php", true); // 
    xhr.responseType= "json"; 
    xhr.send(data); 
 
    return false; 
});

Mon code php

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
 
 
$success = 0; 
$msg = "Oups une erreur .... ";
if(!empty($_POST['name']) AND !empty($_POST['firstname']) AND !empty($_POST['email']) AND !empty($_POST['sujet']) AND !empty($_POST['area'])){
 
    $name = htmlspecialchars($_POST['name']);
    $firstname = htmlspecialchars($_POST['firstname']);
    $email = htmlspecialchars($_POST['email']);
    $sujet = htmlspecialchars($_POST['sujet']);
    $message = htmlspecialchars($_POST['area']);
 
 
    $destinataire = "destinataire@mail.com";
    $objet        = "[Site Web] " . $sujet;
    $contenu      = "Nom de l'expéditeur : " . $firstname . "\r\n";
    $contenu     .= $message . "\r\n\n";
 
    $headers  = "CC: " . $email . " \r\n"; // ici l'expediteur du mail
    $headers  = "From: monsite.com \r\n"; // ici l'expediteur du mail
 
    $headers .= "Content-Type: text/plain; charset=\"ISO-8859-1\"; DelSp=\"Yes\"; format=flowed /r/n";
    $headers .= "Content-Disposition: inline \r\n";
    $headers .= "Content-Transfer-Encoding: 7bit \r\n";
    $headers .= "MIME-Version: 1.0";
    mail($destinataire, $objet, utf8_decode($contenu), $headers);
 
    $msg="ok jusque là";
 
} else {
    $msg = "Il reste des champs vident";
}
 
 $res= ["success" => $success, "msg" => $msg]; //reponse au format json
 echo json_encode($res);

**bourvil** · 18/03/2021, 15h09

Votre page doit etre encode en UTF-8 pour utiliser Ajax.

Code :

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

header('Content-Type: text/html; charset=utf-8');

essayez d'ajouter cela

**Nicolas Legrand** · 18/03/2021, 16h25

Bonjour vous ajoutez le header en haut du fichier script.php ? Si c'est le cas, J'ai essayé mais cela n'a rien changer pour le moment, j'avoue que je bloque complètement sur la façon de procéder et je suis un peu perdu concernant l'encodage en json ou pas concernant le xhr.responseType, ainsi que les différents types de headers à mettre en place. Je vois bien qu'il y a un problème d'encodage mais je n'arrive pas à trouver la solution et comprendre le pourquoi du comment ^^.

**bourvil** · 18/03/2021, 16h59

Code html :

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

<meta charset="UTF-8">

Rajoutez ca, dans le meta de la page contenant le formulaire.
et faire un essai de remplir avec des mots sans accents dans le formulaire

**Nicolas Legrand** · 18/03/2021, 18h12

J'avais déjà encodé en utf-8 de base j'ai juste pas ajouter les méta ect.. pour rendre le code plus court. Bon Je viens de mettre à jour mon code , je suis pas certain d'avoir compris comment j'ai corrigé l'erreur mais il est fonctionnel il me manque juste à effectuer des contrôles et coder ça plus proprement mais le principe y est ^^ .

Envoyé un formulaire de contact en Ajax

AJAX

Discussions similaires

Partager

Partager