Afficher un modal apres la confirmation d'envoi d'un formulaire

Fermé
hermann_k Messages postés 1 Date d'inscription lundi 12 novembre 2018 Statut Membre Dernière intervention 12 novembre 2018 - 12 nov. 2018 à 08:44
 Zero - 14 nov. 2018 à 15:26
Bonjour
j'ai réalisé un formulaire dans une modal bootstrap et j'aimerais qu’après l'envoi une autre modal s'affiche mais je n'obtiens qu'une page blanche. Quand j'affiche le code source de cette dernière, j'obtiens le script mis en echo dans le code php.
Ci-dessous, vous trouverez les différents codes. ils sont tous dans le même fichier.
Je n'ai pas trouvé de solution pour ça! Veuillez me proposer une idée pour résoudre ce problème si vous savez quelque chose, et merci d'avance.


Le code php pour le traitement.
<?php
if ($_SERVER['REQUEST_METHOD']=='POST') {
    $nom = htmlentities($_POST['nom']);
    $email = htmlentities($_POST['email']);
    $message = htmlentities($_POST['message']);
    $sujet = htmlentities($_POST['sujet']);
    
    $destinataire = '*****@*****';
    $contenu = '<p>Bonjour, vous avez reçu un message à partir de votre site web.</p>';
    $contenu .= '<p><strong>Nom</strong>: '.$nom.'</p>';
    $contenu .= '<p><strong>Email</strong>: '.$email.'</p>';
    $contenu .= '<p><strong>Message</strong>: '.$message.'</p>';
    $contenu .= '</body></html>'; 
    
    $headers = 'MIME-Version: 1.0'."\r\n";
    $headers .= 'Content-type: text/html; charset=iso-8859-1'."\r\n";
    
    @mail($destinataire, $sujet, $contenu, $headers); 
    echo "<script type='text/javascript'>$('#Merci').modal('show')</script>";

}
?>


Le code HTML du modal contenant le formulaire
<div class="modal fade" id="Modal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="exampleModalLabel">Contactez nous</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Fermer">
                        <span aria-hidden="true">×</span>
                    </button>
                </div>
                <div class="modal-body">
                    <form method="post" action="<?php echo strip_tags($_SERVER['REQUEST_URI']); ?>">
                        <div class="form-row">
                            <div class="form-group col-md-6">
                                <label for="name">Nom</label>
                                <input type="text" class="form-control" id="name" name="nom">
                            </div>
                            <div class="form-group col-md-6">
                                <label for="email" required="required">Email<span style="color:#ff0000;">*</span></label>
                                <input type="email" class="form-control" id="email" name="email">
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="sujet">Sujet</label>
                            <input type="text" class="form-control" name="sujet">
                        </div>
                        <div class="form-group">
                            <label for="message-text" required="required">Message<span style="color:#ff0000;">*</span></label>
                            <textarea class="form-control" required="required" name="message" id="message-text"></textarea>
                        </div>
                        <button type="submit" name="submit" value="envoyer" class="btn btn-primary">Envoyer</button>
                    </form>
                </div>
            </div>
        </div>
    </div>


Le code HTML du modal de remerciement
<div class="modal fade" id="merci" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel">Votre message a été envoyé</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">×</span>
        </button>
      </div>
    </div>
  </div>
</div>
A voir également:

2 réponses

jordane45 Messages postés 38145 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 25 avril 2024 4 650
12 nov. 2018 à 08:47
Bonjour
Il faudrait le code entier de ta page que l'on sache où et dans quel ordre sont placées les instructions
0
Hello !

Je te conseille de passer par de l'ajax avec jQuery.
Il faudra que tu changes le type du bouton de la modal formulaire en type="button" et le form.

<div class="modal fade" id="Modal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="exampleModalLabel">Contactez nous</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Fermer">
                        <span aria-hidden="true">×</span>
                    </button>
                </div>
                <div class="modal-body">
                    <form id="form">
                        <div class="form-row">
                            <div class="form-group col-md-6">
                                <label for="name">Nom</label>
                                <input type="text" class="form-control" id="name" name="nom">
                            </div>
                            <div class="form-group col-md-6">
                                <label for="email" required="required">Email<span style="color:#ff0000;">*</span></label>
                                <input type="email" class="form-control" id="email" name="email">
                            </div>
                        </div>
                        <div class="form-group">
                            <label for="sujet">Sujet</label>
                            <input type="text" class="form-control" name="sujet">
                        </div>
                        <div class="form-group">
                            <label for="message-text" required="required">Message<span style="color:#ff0000;">*</span></label>
                            <textarea class="form-control" required="required" name="message" id="message-text"></textarea>
                        </div>
                        <button type="button" name="submit" value="envoyer" class="btn btn-primary">Envoyer</button>
                    </form>
                </div>
            </div>
        </div>
    </div>


le bout de JS à adapter :
$(document).ready(function() {
 $('#Modal button:last').click(function() {
  $.ajax({
   url: 'traitements.php', 
   type: 'POST',
   data: $('#form').serialize(),
   success: function(data){
    $('#Modal').modal('toggle');
    $('#Merci').modal();
   }
  });
 });
});     


Cdt.
0