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

hermann_k Messages postés 1 Date d'inscription   Statut Membre Dernière intervention   -  
 Zero -
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

Réponse 1 / 2
jordane45 Messages postés 38486 Date d'inscription   Statut Modérateur Dernière intervention   4 752
 
Bonjour
Il faudrait le code entier de ta page que l'on sache où et dans quel ordre sont placées les instructions
0
Réponse 2 / 2
Zero
 
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

Discussions similaires

Echec d'envoi message sur Messenger
Kris68 -
Colibri -

2 réponses
Envoie impossible messenger
LynaMorgana -
Kuroni -

1 réponse
Colis en cours de transport vers votre site de livraison ?
Ninan_5568 -
JulieVdr -

7 réponses