IdentifiantMot de passe
Loading...
Mot de passe oublié ?Je m'inscris ! (gratuit)
Navigation

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les réponses en temps réel, voter pour les messages, poser vos propres questions et recevoir la newsletter

Langage PHP Discussion :

Formulaire contenant du PHP, du HTML/CSS et un peu de JavaScript


Sujet :

Langage PHP

  1. #1
    Membre à l'essai
    Homme Profil pro
    Administrateur de base de données
    Inscrit en
    octobre 2021
    Messages
    23
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 19
    Localisation : France, Seine et Marne (Île de France)

    Informations professionnelles :
    Activité : Administrateur de base de données
    Secteur : Administration - Collectivité locale

    Informations forums :
    Inscription : octobre 2021
    Messages : 23
    Points : 14
    Points
    14
    Par défaut Formulaire contenant du PHP, du HTML/CSS et un peu de JavaScript
    Bonjour, je fais le formulaire suivant pour un ami travaillant dans le domaine animalier :

    Nom : final form-min.png
Affichages : 87
Taille : 707,9 Ko

    Je voudrais que quand il appuie sur le bouton "Envoyer", que le message suivant s'affiche :

    Code JavaScript : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
     
             }, success: function (response) {
              $('#myForm')[0].reset();
              $('.sent-notification').text("Message Sent Successfully.");
            }

    Car pour l'instant, quand j'appuie sur le bouton, rien ne se passe....

    Je voudrai aussi que mon ami reçoit les réponses de ce formulaire dans sa boîte email, que les réponses des clients soient claires et précises dans le mail.

    Après il a quelques clients, ce n'est pas encore une star des animaux .

    Quelques renseignements:

    -J'utilise Wampserver 3.2.9
    - J'ai phpmailer (6.6.3)



    Voici mon code html (formulaire.php) :

    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
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    77
    78
    79
    80
    81
    82
    83
    84
    85
    86
    87
    88
    89
    90
    91
    92
    93
    94
    95
    96
    97
    98
    99
    100
    101
    102
    103
    104
    105
    106
    107
    108
    109
    110
    111
    112
    113
    114
    115
    116
    117
    118
    119
    120
    121
    122
    123
    124
    125
    126
    127
    128
    129
    130
    131
    132
    133
    134
    135
    136
    137
    138
    139
    140
    141
    142
    143
    144
    145
    146
    147
    148
    149
    150
    151
    152
    153
    154
    155
    156
    157
    158
    159
    160
    161
    162
    163
    164
    165
    166
    167
    168
    169
    170
    171
    172
    173
    <!DOCTYPE html>
     
    <html lang="fr">
     
    <head>
      <title>Formulaire de rendez-vous</title>
      <link rel="stylesheet" type="text/css" href="formulaires.css">
      <meta charset="utf-8" />
      <meta name="viewport" content="width=device-width, initial-scale=1" />
    </head>
    <body>
     
      <a class = "porte" href="index.php"><img alt="Pour revenir sur index.php" src="img/porte.png"></a> 
     
      <h1 class="titre">Formulaire de rendez-vous</h1> 
     
     
      <div class="menu">
        <form id="myForm">
    <div class="namee">
            <label for="name"><span>.</span> Nom</label> 
            <input id="name" type="text" placeholder="Nom (prénom facultatif)">
            <br>
          </div>
     
          <div class="eemail" >   
            <label for="email"><span>.</span> Email</label>
            <input id="email" type="email" placeholder="Email">
            <br>
          </div> 
     
          <div class= "subjectt">      
            <label for="subject"><span>.</span> Sujet</label>
            <input  id="subject" type="text" placeholder="Sujet de la visite"> 
            <br>
          </div>  
     
          <div class="date">
            <label for="date"><span>.</span> Date (durée : 1H) </label>
            <input  id="date" type="datetime-local">
            <br>
          </div>
     
     
          <div class="prenomm">
            <label><span>.</span> Le prénom de votre animal</label>
            <br>
            <input id="prenom" type="text" placeholder="prénom chien/chat " >
            <br>
          </div>
     
     
          <div class="racee"> 
            <label><span>.</span > Race de votre chien/chat</label>
            <input id="race" type="text" placeholder=" race chien/chat" >
            <br>
          </div>
     
     
     
     
          <div class="caracteree">
            <label><span>.</span> Facultatif : Le caractère de votre animal</label>
            <br>
            <input  type="checkbox" name="calme" value="calme" id="calme">
            <label for="calme">calme</label>
     
     
            <input type="checkbox" name="craintif" value="craintif" id="craintif">
            <label for="craintif">craintif</label>
     
     
            <input type="checkbox" name="agressif" value="agressif" id="agressif">
            <label for="agressif">agressif</label>
     
     
            <input type="checkbox" name="joueur" value="joueur" id="joueur">
            <label for="joueur">joueur</label>
     
     
            <input type="checkbox" name="dynamique" value="dynamique" id="dynamique">
            <label for="dynamique">dynamique</label>
     
     
          </div>
     
     
          <div class="taillee" >
            <label for="taille"><span>.</span> Facultatif : La taille de votre animal </label>
            <input   id="taille" type="text" placeholder="Pour un rendez-vous idéal">
            <br>
          </div>
     
     
     
          <div class="poidss">
            <label for="poids"><span>.</span> Facultatif : Le poids de votre animal </label>
            <input id="poids" type="text" placeholder="Pour un rendez-vous idéal">
            <br>
          </div>
     
     
          <div class="bodyy">
            <label for="boda" ><span>.</span>  Autre</label> 
            <textarea  id="boda" rows="5" placeholder="Autre chose à signaler" ></textarea>
            <br> 
          </div>
     
     
     
     
          <button class="Envoyer" type="button" onclick="sendEmail()" value="Send An Email">Envoyer</button> 
        </form>
      </div>
     
     
      <script src="http://code.jquery.com/jquery-3.3.1.min.js"></script>
      <script>
        // ton code ICI
     
        function sendEmail() {
          var name = $("#name");
          var email = $("#email");
          var subject = $("#subject");
          var body = $("#body");
          var date = $("#date");
          var prenom = $("#prénom");
          var race = $("#race");
          var caractere = $("#caractere");
          var taille = $("#taille");
          var poids = $("#poids");
          var boda = $("#boda");
     
     
          if (isNotEmpty(name) && isNotEmpty(email) && isNotEmpty(subject) && isNotEmpty(body) && isNotEmpty(date) && isNotEmpty(prenom) && isNotEmpty(race) && isNotEmpty(caractere) && isNotEmpty(taille) && isNotEmpty(poids) && isNotEmpty(boda)) {
            $.ajax({
             url: 'sendEmail.php',
             method: 'POST',
             dataType: 'json',
             data: {
               name: name.val(),
               email: email.val(),
               subject: subject.val(),
               body: body.val(),
               date: date.val(),
               prenom:  prenom.val(),
               race: race.val(),
               caractere: caractere.val(),
               taille: taille.val(),
               poids: poids.val(),
               boda: boda.val()
     
             }, success: function (response) {
              $('#myForm')[0].reset();
              $('.sent-notification').text("Message Sent Successfully.");
            }
          });
          }
        }
     
        function isNotEmpty(caller) {
          if (caller.val() == "") {
            caller.css('border', '1px solid red');
            return false;
          } else
          caller.css('border', '');
     
          return true;
        }
      </script>
     
    </body>
    </html>


    Voici mon code css (formulaires.css) :

    Code CSS : 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
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    77
    78
    79
    80
    81
    82
    83
    body
    {
    	background-image: url(img/dog-2606759_1920);
    	background-size:1400px 800px;
    }
     
    form {
        text-align: center;
    }
     
    .titre
    {
    	background-color: black;
            font-style: italic;
        font-family: Impact;
        color: #c8ad7f;
        text-shadow: 6px 6px 6px red;
        width: 30%;
        display: block;
      margin: auto;
    }
     
     
     
    .menu
    {
    margin-left: auto;
    margin-right: auto;
        width: 300px;
    background-color: black;
    opacity: 0.74;
     
     
    }
    label
    {
    	color: white;
     
    }
     
    .porte
    {
        margin-left: 97%;
     
    }
     
    .porte:hover
    {
        background-image: url("http://Hypyny/img/Horizontale.png");
    }
     
    .namee, .eemail, .subjectt, .date, .prenomm, .racee, .caracteree, .taillee, .poidss, .bodyy
    {
        margin-top: 11px;
    }
     
    .namee
    {
    padding-top: 8px;
    }
     
    .bodyy {
        display: flex;
        align-content: flex-start;
        justify-content: center;
    }
     
    #boda
    {
      margin-left: 15px;
    }
    .Envoyer
    {
      display: block;
      margin-top: 3px;
      margin-left: 37%;
    }
     
    span
    {
      font-weight: bold;
      color: orange;
    }


    Merci beaucoup si vous me partagez vos connaissances, bonne journée à vous.

  2. #2
    Expert éminent sénior
    Avatar de mathieu
    Profil pro
    Inscrit en
    juin 2003
    Messages
    9 237
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : juin 2003
    Messages : 9 237
    Points : 14 152
    Points
    14 152
    Par défaut
    vous n'avez pas besoin de code javascript pour faire cela.
    regardez la pièce jointe du message suivant, il y a un formulaire, un traitement après l'envoi et ensuite l'affichage d'un message donc ça ressemble à ce que vous cherchez à faire :
    https://www.developpez.net/forums/d2.../#post11858587

    est ce que le site sur lequel vous travaillez est seulement constitué de pages en html fixe ?
    suivant les projets d'améliorations, ça serait peut être utile de passer à un cms qui va simplifier les futurs ajouts comme ce formulaire par exemple.

  3. #3
    Membre à l'essai
    Homme Profil pro
    Administrateur de base de données
    Inscrit en
    octobre 2021
    Messages
    23
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 19
    Localisation : France, Seine et Marne (Île de France)

    Informations professionnelles :
    Activité : Administrateur de base de données
    Secteur : Administration - Collectivité locale

    Informations forums :
    Inscription : octobre 2021
    Messages : 23
    Points : 14
    Points
    14
    Par défaut
    Bonjour merci pour votre réponse,

    C'est vrai que le système formulaire => traitement après l'envoi => affichage d'un message convient parfaitement à ce que je veux faire.


    Désolé pour cette question mais que définie "pages en html fixe" ? Cela veut dire aucune "animation css", pas de déroulement de menu ?
    Si c'est le cas je ne sais pas. J'ai juste mis des "autofocus" pour faire des "animations visuelles" lorsque la souris est sur un élément du menu (ou sur la porte pour sortir sur index.php), je ne sais si on peut toujours qualifier ceci de pages en html fixe ...

    Après pour les CMS, je souhaite m'entrainer en php, cela pourrait nuire à quelques notions d'apprentissages en programmation par la simplicité ? Mais si cela est nécessaire pourquoi pas.

    J'ai regardé les fichiers de "prénom.zip":


    - J'ai regardé début.php, le système de prénom est intéressant, mais on peut seulement "trier", on ne peut pas dire non. Moi je voudrais que les réponses de mon formulaire se transforment en un affichage de message dans la boite email de mon ami, j'ai phpmailer , je connais le SMTP de mon FAI, mais je ne sais pas du tout comment traduire cela en code. J'ai regardé un tuto sur internet mais je n'ai pas réussi.

    Merci beaucoup si vous pouvez me précisez ce qu'il faut faire,
    Bonne journée à vous.

  4. #4
    Expert éminent sénior
    Avatar de mathieu
    Profil pro
    Inscrit en
    juin 2003
    Messages
    9 237
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : juin 2003
    Messages : 9 237
    Points : 14 152
    Points
    14 152
    Par défaut
    par "html fixe" je pensais à des pages html qui n'utilisent pas de php.
    mais si vous souhaitez prendre le temps de bien comprendre ce qu'il se passe, ça peut être intéressant de faire cela vous même.

    à ce sujet, vous pouvez commencer par envoyer un e-mail en utilisant la fonction suivante qui utilisera la configuration du serveur smtp configurée dans le fichier php.ini :
    https://www.php.net/manual/fr/function.mail.php

    par contre dés que vous aurez besoin d'un e-mail plus évolué avec par exemple des pièce-jointe ou un e-mail hybride "texte / html", je vous conseille fortement de ne pas cherchez à comprendre tous les détails du format et d'utiliser phpmailer. dans votre client e-mail, vous pouvez certainement regarder le code source de vos e-mails et vous verrez la complexité de ce format. heureusement, phpmailer gère cela très bien et c'est une bibliothèque de référence depuis plusieurs années.
    pour l'utilisation de phpmailer, vous pouvez voir des exemples de code là :
    https://github.com/PHPMailer/PHPMail...aster/examples

  5. #5
    Membre à l'essai
    Homme Profil pro
    Administrateur de base de données
    Inscrit en
    octobre 2021
    Messages
    23
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 19
    Localisation : France, Seine et Marne (Île de France)

    Informations professionnelles :
    Activité : Administrateur de base de données
    Secteur : Administration - Collectivité locale

    Informations forums :
    Inscription : octobre 2021
    Messages : 23
    Points : 14
    Points
    14
    Par défaut
    D'accord, merci pour votre nouvelle réponse.

    J'ai essayé d'utiliser la fonction mail, je me suis aidé du fichier "gmail.phps" dans votre lien github et je me suis (beaucoup) aidé d'un tuto youtube pour faire un "formulaire classique", le voici visuellement :

    Nom : send and mail.png
Affichages : 52
Taille : 23,5 Ko


    Le code php\html pour écrire :

    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
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    <!DOCTYPE html>
    <html>
    <head>
        <title>Send an Email</title>
    </head>
    <body>
     
    	<center>
    		<h4 class="sent-notification"></h4>
     
    		<form id="myForm">
    			<h2>Send an Email</h2>
     
    			<label>Name</label>
    			<input id="name" type="text" placeholder="Enter Name">
    			<br><br>
     
    			<label>Email</label>
    			<input id="email" type="text" placeholder="Enter Email">
    			<br><br>
     
    			<label>Subject</label>
    			<input id="subject" type="text" placeholder=" Enter Subject"> 
    			<br><br>
     
    			<p>Message</p>
    			<textarea id="body" rows="5" placeholder="Type Message"></textarea>
    			<br><br>
     
    			<button type="button" onclick="sendEmail()" value="Send An Email">Submit</button> 
    		</form>
    	</center>
     
    	<script src="http://code.jquery.com/jquery-3.3.1.min.js"></script>
    	<script type="text/javascript">
            function sendEmail() {
                var name = $("#name");
                var email = $("#email");
                var subject = $("#subject");
                var body = $("#body");
     
                if (isNotEmpty(name) && isNotEmpty(email) && isNotEmpty(subject) && isNotEmpty(body)) {
                    $.ajax({
                       url: 'sendEmail.php',
                       method: 'POST',
                       dataType: 'json',
                       data: {
                           name: name.val(),
                           email: email.val(),
                           subject: subject.val(),
                           body: body.val()
                       }, success: function (response) {
                            $('#myForm')[0].reset();
                            $('.sent-notification').text("Message Sent Successfully.");
                       }
                    });
                }
            }
     
            function isNotEmpty(caller) {
                if (caller.val() == "") {
                    caller.css('border', '1px solid red');
                    return false;
                } else
                    caller.css('border', '');
     
                return true;
            }
        </script>
     
    </body>
    </html>

    Le code de traitement (sendEmail.php):

    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
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    <?php
       use PHPMailer\PHPMailer\PHPMailer;
    use PHPMailer\PHPMailer\SMTP;
    use PHPMailer\PHPMailer\Exception;
     
     
        if (isset($_POST['name']) && isset($_POST['email'])) {
            $name = $_POST['name'];
            $email = $_POST['email'];
            $subject = $_POST['subject'];
            $body = $_POST['body'];
     
        require "C:\PHPMailer-6.6.3\PHPMailer-6.6.3\src\PHPMailer.php";
    require "C:\PHPMailer-6.6.3\PHPMailer-6.6.3\src\SMTP.php";
    require "C:\PHPMailer-6.6.3\PHPMailer-6.6.3\src\Exception.php";
     
            $mail = new PHPMailer();
     
            //SMTP Settings
            $mail->isSMTP();
            $mail->SMTPDebug = SMTP::DEBUG_SERVER;
            $mail->Host = 'smtp.gmail.com';
            $mail->SMTPAuth = true;
            $mail->Username = 'monemail@gmail.com'; //enter you email address
            $mail->Password = 'tvgcvyagttfkyjdy'; //enter you email password
            $mail->Port = 465;
            $mail->SMTPSecure = 'ssl';
     
            //Email Settings
            $mail->isHTML(true);
            $mail->setFrom($email, $name);
            $mail->addAddress("monemail@gmail.com"); //enter you email address
            $mail->Subject = ("$email ($subject)");
            $mail->Body = $body;
     
            if ($mail->send()) {
                $status = "success";
                $response = "Email is sent!";
            } else {
                $status = "failed";
                $response = "Something is wrong: <br><br>" . $mail->ErrorInfo;
            }
     
            exit(json_encode(array("status" => $status, "response" => $response)));
        }
    ?>

    Quand j'appuie sur "Envoyer", je reçois bien les informations dans ma boîte gmail, cependant je ne reçois pas le message qui confirme que mon mail a été bien envoyé :
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    }, success: function (response) {
                            $('#myForm')[0].reset();
                            $('.sent-notification').text("Message Sent Successfully.");
                       }
                    });
                }

    Pourquoi ?


    Je vais essayer de m'inspirer de ce formulaire "simple" pour faire celui de mon site.

    Merci pour votre aide


    EDIT 1: Voici les codes actuels pour le vrai formulaire de mon site :

    formulaire.php :

    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
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    77
    78
    79
    80
    81
    82
    83
    84
    85
    86
    87
    88
    89
    90
    91
    92
    93
    94
    95
    96
    97
    98
    99
    100
    101
    102
    103
    104
    105
    106
    107
    108
    109
    110
    111
    112
    113
    114
    115
    116
    117
    118
    119
    120
    121
    122
    123
    124
    125
    126
    127
    128
    129
    130
    131
    132
    133
    134
    135
    136
    137
    138
    139
    140
    141
    142
    143
    144
    145
    146
    147
    148
    149
    150
    151
    152
    153
    154
    155
    156
    157
    158
    159
    160
    161
    162
    163
    164
    165
    166
    167
    168
    169
    170
    171
    172
    173
    <!DOCTYPE html>
     
    <html lang="fr">
     
    <head>
      <title>Formulaire de rendez-vous</title>
      <link rel="stylesheet" type="text/css" href="formulaires.css">
      <meta charset="utf-8" />
      <meta name="viewport" content="width=device-width, initial-scale=1" />
    </head>
    <body>
     
      <a class = "porte" href="index.php"><img alt="Pour revenir sur index.php" src="img/porte.png"></a> 
     
      <h1 class="titre">Formulaire de rendez-vous</h1> 
     
     
      <div class="menu">
        <form id="myForm">
    <div class="namee">
            <label for="name"><span>.</span> Nom</label> 
            <input id="name" type="text" placeholder="Nom (prénom facultatif)">
            <br>
          </div>
     
          <div class="eemail" >   
            <label for="email"><span>.</span> Email</label>
            <input id="email" type="email" placeholder="Email">
            <br>
          </div> 
     
          <div class= "subjectt">      
            <label for="subject"><span>.</span> Sujet</label>
            <input  id="subject" type="text" placeholder="Sujet de la visite"> 
            <br>
          </div>  
     
          <div class="date">
            <label for="date"><span>.</span> Date (durée : 1H) </label>
            <input  id="date" type="datetime-local">
            <br>
          </div>
     
     
          <div class="prenomm">
            <label><span>.</span> Le prénom de votre animal</label>
            <br>
            <input id="prenom" type="text" placeholder="prénom chien/chat " >
            <br>
          </div>
     
     
          <div class="racee"> 
            <label><span>.</span > Race de votre chien/chat</label>
            <input id="race" type="text" placeholder=" race chien/chat" >
            <br>
          </div>
     
     
     
     
          <div class="caracteree">
            <label><span>.</span> Facultatif : Le caractère de votre animal</label>
            <br>
            <input  type="checkbox" name="calme" value="calme" id="calme">
            <label for="calme">calme</label>
     
     
            <input type="checkbox" name="craintif" value="craintif" id="craintif">
            <label for="craintif">craintif</label>
     
     
            <input type="checkbox" name="agressif" value="agressif" id="agressif">
            <label for="agressif">agressif</label>
     
     
            <input type="checkbox" name="joueur" value="joueur" id="joueur">
            <label for="joueur">joueur</label>
     
     
            <input type="checkbox" name="dynamique" value="dynamique" id="dynamique">
            <label for="dynamique">dynamique</label>
     
     
          </div>
     
     
          <div class="taillee" >
            <label for="taille"><span>.</span> Facultatif : La taille de votre animal </label>
            <input   id="taille" type="text" placeholder="Pour un rendez-vous idéal">
            <br>
          </div>
     
     
     
          <div class="poidss">
            <label for="poids"><span>.</span> Facultatif : Le poids de votre animal </label>
            <input id="poids" type="text" placeholder="Pour un rendez-vous idéal">
            <br>
          </div>
     
     
          <div class="bodyy">
            <label for="boda" ><span>.</span>  Autre</label> 
            <textarea  id="boda" rows="5" placeholder="Autre chose à signaler" ></textarea>
            <br> 
          </div>
     
     
     
     
          <button class="Envoyer" type="button" onclick="sendEmail()" value="Send An Email">Envoyer</button> 
        </form>
      </div>
     
     
      <script src="http://code.jquery.com/jquery-3.3.1.min.js"></script>
      <script>
        // ton code ICI
     
        function sendEmail() {
          var name = $("#name");
          var email = $("#email");
          var subject = $("#subject");
          var body = $("#body");
          var date = $("#date");
          var prenom = $("#prénom");
          var race = $("#race");
          var caractere = $("#caractere");
          var taille = $("#taille");
          var poids = $("#poids");
          var boda = $("#boda");
     
     
          if (isNotEmpty(name) && isNotEmpty(email) && isNotEmpty(subject) && isNotEmpty(body) && isNotEmpty(date) && isNotEmpty(prenom) && isNotEmpty(race) && isNotEmpty(caractere) && isNotEmpty(taille) && isNotEmpty(poids) && isNotEmpty(boda)) {
            $.ajax({
             url: 'parametre.php',
             method: 'POST',
             dataType: 'json',
             data: {
               name: name.val(),
               email: email.val(),
               subject: subject.val(),
               body: body.val(),
               date: date.val(),
               prenom:  prenom.val(),
               race: race.val(),
               caractere: caractere.val(),
               taille: taille.val(),
               poids: poids.val(),
               boda: boda.val()
     
             }, success: function (response) {
              $('#myForm')[0].reset();
              $('.sent-notification').text("Message Sent Successfully.");
            }
          });
          }
        }
     
        function isNotEmpty(caller) {
          if (caller.val() == "") {
            caller.css('border', '1px solid red');
            return false;
          } else
          caller.css('border', '');
     
          return true;
        }
      </script>
     
    </body>
    </html>
    Et parametre.php pour le traitement:

    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
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    <?php
     
    use PHPMailer\PHPMailer\Exception;
     
     
        if (isset($_POST['name']) && isset($_POST['email'])) {
            $name = $_POST['name'];
            $email = $_POST['email'];
            $subject = $_POST['subject'];
            $body = $_POST['body'];
            $date = $_POST ['date'];
            $prenom = $_POST ['prenom'];
            $race = $_POST ['race'];
            $caractere = $_POST ['caractere'];
            $taille = $_POST ['taille'];
            $poids = $_POST ['poids'];
            $boda = $_POST ['boda'];
     
     
            require_once "C:\PHPMailer-6.6.3\PHPMailer-6.6.3\src\PHPMailer.php";
            require_once "C:\PHPMailer-6.6.3\PHPMailer-6.6.3\src\SMTP.php";
            require_once "C:\PHPMailer-6.6.3\PHPMailer-6.6.3\src\Exception.php";
     
            $mail = new PHPMailer();
     
            //SMTP Settings
            $mail->isSMTP();
            $mail->Host = 'smtp.gmail.com';
            $mail->SMTPAuth = true;
            $mail->Username = 'lunetdevinf@gmail.com'; //enter you email address
            $mail->Password = 'tvgcvyagttfkyjdy'; //enter you email password
            $mail->Port = 465;
            $mail->SMTPSecure = 'ssl';
     
            //Email Settings
            $mail->isHTML(true);
            $mail->setFrom($email, $name);
            $mail->addAddress("lunetdevinf@gmail.com"); //enter you email address
            $mail->Subject = ("$email($subject)");
            $mail->Body = $body;
     
            if ($mail->send()) {
                $status = "success";
                $response = "Email is sent!";
            } else {
                $status = "failed";
                $response = "Something is wrong: <br><br>" . $mail->ErrorInfo;
            }
     
            exit(json_encode(array("status" => $status, "response" => $response)));
        }
    ?>
    Je vous épargne le code ccs actuel de mon formulaire.

    Problèmes : Quand j'appuie sur le bouton "Envoyer", rien ne s'envoie et je n'ai pas le message pour dire que le mail est envoyé.

    -J'ai aussi dans mon formulaire des champs que je voudrais "facultatif", mais je ne sais pas comment les rendre non obligatoire.
    On m'a dis que cela est par défaut pour les types text, mais quand je laisse un vide pour les types text, il y a un cadre rouge qui me dit de remplir quand j'appuie sur "Envoyer" ...

    -Je voudrai aussi que les "checkbox" cochées dans mon formulaire apparaissent dans le mail de mon ami.




    Désolé pour le pavé gargantuesque, merci beaucoup si vous avez le courage de m'aider

  6. #6
    Expert confirmé Avatar de Toufik83
    Homme Profil pro
    Développeur informatique
    Inscrit en
    janvier 2012
    Messages
    2 091
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 39
    Localisation : Suisse

    Informations professionnelles :
    Activité : Développeur informatique
    Secteur : High Tech - Éditeur de logiciels

    Informations forums :
    Inscription : janvier 2012
    Messages : 2 091
    Points : 4 045
    Points
    4 045
    Par défaut
    Bonjour,

    D'après ce que je vois, la page est rechargée après le clic sur le bouton d'envoi <button class="Envoyer" type="button" onclick="sendEmail()" value="Send An Email">Envoyer</button>, ce qu'il faut empêcher avec event.preventDefault();.

    Lorsqu'on utilise jQuery, il ne faut pas voir ce genre d'attribut onclick="sendEmail()", il faudrait plutôt attacher l'écouteur d'événement avec la syntaxe de jQuery :
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    $("button.Envoyer").click(function(e){
        e.preventDefault();//empêcher le rechargement de la page
        sendEmail();//appel à la fonction
    });
    Puis je pense qu'il faut toujours utiliser le callback error d'ajax afin de vous assurer qu'il n'y a pas d'erreur :
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    $.ajax({
        method: 'POST',
        dataType: 'json',
       .....,
       success:function(response){},
       error:function(error){alert("Erreur ajax :"+error.reponseText);}
    })

Discussions similaires

  1. [Stage] 2-3moi Développeur en PHP/SQL/HTML/CSS/JavaScript/Java/AS3
    Par Ckpierre dans le forum Demandes
    Réponses: 0
    Dernier message: 29/06/2011, 11h41
  2. [Professionnalisation/Alternance] Développeur C#.NET / PHP / Web( HTML, CSS, JS) / SQL
    Par Takumi dans le forum Demandes
    Réponses: 0
    Dernier message: 13/07/2010, 21h36

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo