Sujet Précédent Sujet Suivant

Formulaire de contact en ajax

ameb2908 Messages postés 89 Date d'inscription jeudi 17 mars 2022 Statut Membre Dernière intervention 25 novembre 2024 - 23 févr. 2024 à 16:52
jordane45 Messages postés 38346 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 16 décembre 2024 - 27 févr. 2024 à 21:20

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 23402 Date d'inscription lundi 9 juin 2008 Statut Contributeur Dernière intervention 20 décembre 2024 Ambassadeur 1 557
23 févr. 2024 à 19:05

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 23402 Date d'inscription lundi 9 juin 2008 Statut Contributeur Dernière intervention 20 décembre 2024 1 557
23 févr. 2024 à 19:16

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 38346 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 16 décembre 2024 4 717
23 févr. 2024 à 20:37

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 89 Date d'inscription jeudi 17 mars 2022 Statut Membre Dernière intervention 25 novembre 2024
27 févr. 2024 à 18:50

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 38346 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 16 décembre 2024 4 717
27 févr. 2024 à 21:20

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
Whatsapp: différences entre bloquer et supprimer contact
Fjsoz -
Paul49140 -

1 réponse
Site chaud contact
joseph -
Afrikarnak -

43 réponses
formulaire resiliation freebox
bonzai470 -
bonzai470 -

5 réponses
Messenger - Perte de ma liste de contacts
Utilisateur anonyme -
yanez -

32 réponses