Formulaire de contact en ajax

ameb2908 Messages postés 93 Date d'inscription   Statut Membre Dernière intervention   -  
jordane45 Messages postés 38486 Date d'inscription   Statut Modérateur Dernière intervention   -

Bonjour, j'ai réalisé un formulaire de contact en ajax, mais rien n'est envoyé en bdd et boite de messagerie. Si quelqu'un pourrait m'éclairer. Merci d'avance.

index.php

<!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Formulaire de contact en Ajax</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div id="wrapper">
        <div id="success"></div>
        <form id="contact" action="contact.php" method="post">
          <h3>formulaire de contact</h3>
          <input type="text" id="username" name="username" placeholder="Votre nom" autocomplete="off">
          <div class="error-name"></div>
          <input type="email" id="mail" name="mail" placeholder="Votre e-mail" autocomplete="off">
          <div class="error-mail"></div>
          <input type="text" id="subject" name="subject" placeholder="Sujet" autocomplete="off">
          <div class="error-subject"></div>
          <textarea id="message" name="message" rows="5" placeholder="message" autocomplete="off"></textarea>
          <div class="error-text"></div>
          <input type="submit" id="submit" name="submit" value="envoyer le message">
        </form>
        <div id="load"><i class="fa-solid fa-spinner fa-spin-pulse fa-2xl" style="color: #74C0FC;"></i></div>
    </div>
    <script src="jquery.min.js"></script>
    <script src="script.js"></script>
</body>
</html>

contact.php

<?php

if(isset($_POST['submit'])) {

	if(empty($_POST['username']) OR !filter_var($_POST['mail'], FILTER_VALIDATE_EMAIL)
	OR empty($_POST['subject']) OR empty($_POST['message'])) {

		$message = '<div class="error-msg">veuillez remplir tous les champs !</div>';
	}
	else {

		$username = strip_tags(trim($_POST['username']));
		$mail = strip_tags(trim($_POST['mail']));
		$subject = nl2br(strip_tags(trim($_POST['subject'])));
		$msg = strip_tags(trim($_POST['message']));
        
        try {
		    
            $db = new PDO('mysql:host=localhost; charset=utf8; dbname="tuto", "root", "ameb@2908"');
            $db->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);
        }
        catch(PDOException $e) {

            die('Erreur : ' . $e->getMessage());
        }

		$sql = 'SELECT id, nom, email, message FROM contact WHERE message = ' . $msg;

        $rs_select = $db->prepare($sql);
        $rs_select->execute();
        $result = $rs_select->fetch(PDO::FETCH_ASSOC);
                
        if(!$result) {

            $sql = 'INSERT INTO contact (nom, email, message) VALUES (:nom, :email, :message)';
            $rs_insert = $db->prepare($sql);
            $rs_insert->execute(array(':nom' => $nom, ':email' => $email, ':message' => $msg));
            $rs_insert->closeCursor();
			
            $destinataire = '***@***';
            $subject = $username . ' Vous envoie un message';
            $msg = nl2br($msg);
            
            $headers = 'From:'.$destinataire."\r\n";
            $headers.= 'MIME-Version: 1.0'."\r\n";
            $headers.= 'Content-Type: text/html; charset=utf-8'."\r\n";
            $headers.= 'Content-transfert-Encoding: 8bit';

            mail($destinataire, $subject, $msg, $headers);

			$message = '<div class="success-msg">message envoyé avec succès.</div>';
		}
		else {

			$message = '<div class="error-msg">message déjà envoyé !</div>';
		}
    }
}

script.js

$(document).ready(function() {
    
    $('#success').hide();
    $('#load').hide();
    
    $('#contact').submit(function() {

      valid = true;
      
      if($('#username').val() == '') {
        
        $('#username').css('border', '1px solid #8b0000');
        $('.error-name').text('Merci de remplir votre nom !').css('color', '#8b0000');

        valid = false;
      }
      else {
        
        $('#username').css('border', '1px solid green');
        $('.error-name').text('');
      }
      
      if(!$('#mail').val().match(/^[a-z0-9._-]+@[a-z0-9.-]{2,}[.][a-z]{2,3}$/)) {
        
        $('#mail').css('border', '1px solid #8b0000');
        $('.error-mail').text('Merci de renseigner un email valide !').css('color', '#8b0000');

        valid = false;
      }
      else {
        
        $('#mail').css('border', '1px solid green');
        $('.error-mail').text('');
      }

      if($('#subject').val() == '') {
        
        $('#subject').css('border', '1px solid #8b0000');
        $('.error-subject').text('Merci de remplir votre sujet !').css('color', '#8b0000');

        valid = false;
      }
      else {
        
        $('#subject').css('border', '1px solid green');
        $('.error-subject').text('');
      }
      
      if($('#message').val() == '') {
        
        $('#message').css('border', '1px solid #8b0000');
        $('.error-text').text('Merci de remplir votre message !').css('color', '#8b0000');

        valid = false;
      }
      else {
        
        $('#message').css('border', '1px solid green');
        $('.error-text').text('');
      }

      if(valid == true) {

        var username = $('#username').val();
        var mail = $('#mail').val();
        var subject = $('#subject').val();
        var message = $('#message').val();
        var dataString = 'nom = ' + username + ' & mail = ' + mail + ' & sujet = ' + subject + ' & message = ' + message;
        
        $.ajax({
            type: 'post',
            url: 'contact.php',
            data: dataString,
            
            beforeSend: function() {
              
              $('#load').fadeIn();
            },

            success: function() {
            
              $('#load').fadeOut(6000);
              $('#contact').slideUp(6000);
              $('#success').slideDown(6000);
              $('#success').text('Votre message a bien été envoyé.');
            }
          });
        }
        
        return false;
    });
});


Windows / Chrome 122.0.0.0

4 réponses

Réponse 1 / 4
yg_be Messages postés 23541 Date d'inscription   Statut Contributeur Dernière intervention   Ambassadeur 1 584
 

bonjour,

Si je lis bien, ta page php contact.php attend les cinq données suivantes dans le POST: 'submit', 'username', 'mail', 'subject', et 'message'.

Dans ton code ajax, tu lui envoies quatre données: 'nom', 'mail', 'sujet', et 'message'

Il manque donc une des données, et tu as deux qui sont mal nommées.
        
0
yg_be Messages postés 23541 Date d'inscription   Statut Contributeur Dernière intervention   1 584
 

De plus, il me semble que, dans ton code ajax, tu spécifies "post" comme type, et tu prépares tes données comme si c'était un "get".

0
Réponse 2 / 4
jordane45 Messages postés 38486 Date d'inscription   Statut Modérateur Dernière intervention   4 753
 

Bonjour

En complément de ce que t'a déjà dit yg_be..

Les données, en 'post', ll est préférable de les envoyer au format json.

var dataString = {
     nom:username
     ,mail:mail
     ,sujet:subject
     ,message:message
   };

Ton autre souci vient du fait que tu "submit" ton formulaire.

La page se recharge sans avoir traité ton js.

Pour remédier à ça ..  soit tu ajoutes un "preventDefault" dans ton js au momment de "submit" ..  soit tu remplaces ton bouton par un type "button"  ... et tu utilises, sur ton bouton un ONCLICK pour lancer ton code.
0
Réponse 3 / 4
ameb2908 Messages postés 93 Date d'inscription   Statut Membre Dernière intervention   1
 

Bonsoir, j'ai fait comme tu m'as dit. rien de change.

script.js

$(document).ready(function() {
    
    $('#success').hide();
    $('#load').hide();
    
    $('#contact').submit(function(event) {

      event.preventDefault();

      valid = true;
      
      if($('#username').val() == '') {
        
        $('#username').css('border', '1px solid #8b0000');
        $('.error-name').text('Merci de remplir votre nom !').css('color', '#8b0000');

        valid = false;
      }
      else {
        
        $('#username').css('border', '1px solid green');
        $('.error-name').text('');
      }
      
      if(!$('#mail').val().match(/^[a-z0-9._-]+@[a-z0-9.-]{2,}[.][a-z]{2,3}$/)) {
        
        $('#mail').css('border', '1px solid #8b0000');
        $('.error-mail').text('Merci de renseigner un email valide !').css('color', '#8b0000');

        valid = false;
      }
      else {
        
        $('#mail').css('border', '1px solid green');
        $('.error-mail').text('');
      }

      if($('#subject').val() == '') {
        
        $('#subject').css('border', '1px solid #8b0000');
        $('.error-subject').text('Merci de remplir votre sujet !').css('color', '#8b0000');

        valid = false;
      }
      else {
        
        $('#subject').css('border', '1px solid green');
        $('.error-subject').text('');
      }
      
      if($('#message').val() == '') {
        
        $('#message').css('border', '1px solid #8b0000');
        $('.error-text').text('Merci de remplir votre message !').css('color', '#8b0000');

        valid = false;
      }
      else {
        
        $('#message').css('border', '1px solid green');
        $('.error-text').text('');
      }

      if(valid == true) {

        var submit = $('#submit').val();
        var username = $('#username').val();
        var mail = $('#mail').val();
        var subject = $('#subject').val();
        var message = $('#message').val();
        var dataString = {
          
          submit : submit,
          username : username,
          mail : mail,
          subject : subject,
          message : message
        };

        var form_url = $(this).attr('action');
        var form_method = $(this).attr('method');
        
        $.ajax({
            type: form_method,
            url: form_url,
            data: dataString,
            
            beforeSend: function() {
              
              $('#load').fadeIn();
            },

            success: function() {
            
              $('#load').fadeOut(6000);
              $('#contact').slideUp(6000);
              $('#success').slideDown(6000);
              $('#success').text('Votre message a bien été envoyé.');
            }
        });
      }
    });
});
0
Réponse 4 / 4
jordane45 Messages postés 38486 Date d'inscription   Statut Modérateur Dernière intervention   4 753
 

Peux tu placer des console.log  dans ton code histoire de voir où il passe, la valeur des variables...

Et puis, il faudrait également regarder dans la console de ton navigateur si il y a des messages ..  ne serait-ce que la réponse de l'appel ajax.

(pour débuguer l'ajax, merci de suivre ceci :  https://forums.commentcamarche.net/forum/affich-37772066-php-jquery-debugage-ajax?v8th5MQcMDx5M3B0rKm5-neTZwY_nmCtrBX4svMXzV8 )
0

Discussions similaires

Contact LEBONCOIN
myalysee -
MPMP10 -

3 réponses
Contacter le "bon coin"
babet56 -
SUDEST13 -

28 réponses
contacter le bon coin
breton -
MPMP10 -

2 réponses
Civilité (Mr,Mme,Melle) n' apparait pas lors de l'exécution du formulaire
azixe -
cs_Le Pivert -

1 réponse
Comment supprimer un contact
Lilou -
Lilou -

2 réponses