Discussion :

[Kraster]

Salut à tous,
Je viens de créer un formulaire de contact très simple en PHP et j'aimerai souscrire ce formulaire en Ajax sans l'actualisation de la page, le probleme c'est que la partie PHP contient 2 redirections, mon code Ajax marche bien mais je veux savoir s'il y a un truck pour contourner les redirections et rester sur la meme page.
voici mes 2 codes:

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
<?php
$errors = [];
 
$nom = htmlspecialchars($_POST['nom']);
$email = htmlspecialchars($_POST['email']);
$message = htmlspecialchars($_POST['message']);
 
if(!array_key_exists('nom', $_POST) || $_POST['nom'] == ''){
   $errors['nom'] = "Vous n'avez pas renseign&eacute votre nom !";
} 
 
if(!array_key_exists('email', $_POST) || $_POST['email'] == '' || !filter_var($_POST['email'], FILTER_VALIDATE_EMAIL)){
   $errors['email'] = "Vous n'avez pas renseign&eacute un email valide !";
}
 
if(!array_key_exists('message', $_POST) || $_POST['message'] == ''){
	$errors['message'] = "Vous n'avez pas renseign&eacute votre message !";
	} 
 
session_start();
if(!empty($errors)){
 
   $_SESSION['errors'] = $errors;
   header('Location: ../contact.php#contactform');
 
} else {
   $_SESSION['success'] = 1;
 
   $to = "exemple@exemple.org";
 
   $headers ="MIME-Version: 1.0\r\n";
   $headers ='From:'.$nom.'<'.$email.'>'."\r\n";
   $headers.='Content-Type:text/html; charset="UTF-8"'."\r\n";
   $headers.='Content-Transfert-Encoding: 8bit';
      'Reply-To: $email' . "\r\n" .
      'X-Mailer: PHP/' . phpversion();	
 
   mail($to, "Form contact", $message, $headers);
   header('Location: ../contact.php#contactform');
}
 
die();					
?>

et le code Javascript:

Code :

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
 
$("#contactform").submit(function(){
   var action = $(this).attr('action');
   var nom = $(".nom").val();
   var email = $(".email").val();
   var message = $(".message").val();
 
   $('button[type="submit"]').hide().after('<img src="imgs/zZTBdeLybMk/ajaxl.gif" class="fleft inline ajaxll">');
   $('button[type="reset"]').hide();
 
   $.post(action,{
      nom:nom,
      email:email,
      message:message
   },function(){
      $(".message").html(data);
      $('.ajaxll').fadeOut();
      $('button[type="submit"]').fadeIn();
      $('button[type="reset"]').fadeIn();
   });
   return false;
});

[ABCIWEB]

Rien ne t'empêche de supprimer les redirections php et de les faire en javascript en fonction d'une valeur que renverra php.

[Kraster]

Merci pour votre réponse Monsieur ABCIWEB, mais la vérité c'est que je ne suis pas super doué en PHP ni en Javascript. En fait, je viens de commencer à les apprendre en suivant les tutos, je sais qu'il y a plusieurs solutions pour résoudre ce problème (la vérification du header X-Requested-With: XMLHttpRequest par exemple..) mais j'arrive pas à formuler le code, merci de bien vouloir m'aider à ce propos )

[ABCIWEB]

Je suppose que le code javascript est dans le fichier "contact.php". Si oui, puisque le code javascript fait une requête vers le code php que tu as montré (destination de la requête ajax), alors le retour du script php ira nécessairement vers le fichier qui l'a appelé donc pas besoin de faire de redirection dans le code php vers "contact.php".

Faut faire plus de tutos avant de coder, là tu n'as pas encore compris le principe de base d'ajax... Le code php peut retourner des informations dans la requête ajax, avec un simple "echo" pour renvoyer une chaine de caractères (qui peut être du html), ou avec "json_encode()" pour renvoyer un tableau.
Tu pourras récupérer ces données dans le retour ajax mais encore faut-il définir un argument dans "function()" pour désigner la variable que tu utiliseras, et puisque tu utilises "data" pour peupler la balise html ayant la classe "message" :

Code :

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

1
2
3
4
5
6
7
8
//...
function(data){
      $(".message").html(data);
      $('.ajaxll').fadeOut();
      $('button[type="submit"]').fadeIn();
      $('button[type="reset"]').fadeIn();
   });
//...

Et donc cette variable "data" contiendra ce que le serveur affichera, par exemple :

Code :

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
 
//...
if(!empty($errors))
{
     // Si tu affiches toutes les erreurs dans un même élément, autant construire le message html en php. J'insère un retour ligne entre les erreurs :
    $html_error_user = implode("<br>", $errors);
    echo $html_error_user;
    exit;
}
else 
{
//...
 
    if(mail($to, "Form contact", $message, $headers))
    {
        echo "message envoyé";
        exit;
    }
    else
    {
        echo "Un problème technique est survenu lors de l'envoi du mail";
        exit;      
    }
}

Tu peux donc supprimer tes variables de session et autres redirections.

Pour contrôler le retour ajax, faire F12 pour afficher les outils javascript du navigateur et consulter l'onglet "réseau".
L'onglet "console" quant à lui affichera les erreurs javascript, ou ce que tu feras afficher dans ton code javascript avec "console.log()" en phase de débugage.

[Kraster]

Merci, c'est gentil de votre part, je vais essayer d’intégrer le code