Envoyé un formulaire de contact en Ajax
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:
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:
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:
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); |
