Validation formulaire sans rechargement de la page

Version imprimable

Bonjour à tous,

J'ai mis en place une fenêtre modale au chargement de ma page d'accueil pour l'inscription à une newsletter. Le traitement se fait sur la même page.
Or, lorsque l'utilisateur valide sa saisie, je la fait disparaître mais le chargement présent fait qu'elle se réaffiche.... Je sais pas si je suis bien clair.

Voici mon code :

Code:

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
<form action="" method="post">
                                <div class="form-group">
                                    <input type="text" name="ville" class="form-control" placeholder="Ville" required>
                                </div>
                                <div class="form-group">
                                    <input type="email" name="email" class="form-control" placeholder="Adresse email" required>
                                </div>
                                <button type="submit" class="btn btn-primary" id="fermer">S'inscrire</button>
                                <?php
 
                                    if(!empty($_POST['ville']) && !empty($_POST['email']))
                                    {
                                        try
                                        {
                                            $bdd = new PDO('mysql:host=***;dbname=***;charset=utf8', '***', '***');
                                        }
                                        catch(Exception $e)
                                        {
                                            die('Erreur : '.$e->getMessage());
                                        }
 
                                        $reponse = $bdd->query('INSERT INTO *** (***, ***) VALUES ("'.$_POST['ville'].'","'.$_POST['email'].'")');
 
                                        ?>
 
                                        <script type="text/javascript">
                                        $(function () {
                                            $("#fermer").on('click', function() {
                                                $('#myModal').modal('hide');
                                            });
                                        });
                                        </script>
 
                                        <?php
                                    }
                                    else
                                    {
 
                                    }
                                    
                                    mysqli_close();
                                ?>
                            </form>

Merci d'avance !

16/03/2017, 17h02
ABCIWEB

Salut,

Es-tu certain de cette ligne : $('#myModal').modal('hide');. Essaies plutôt $('#myModal').hide();
16/03/2017, 17h09
ParisElliot

Alors voila l'exemple en question : https://www.cirque-noel.fr/

@ABCIWEB : J'ai vérifié et c'est bien cela dans la doc de bootstrap.
16/03/2017, 17h41
ABCIWEB

J'ai jamais utilisé boostrap donc je peux rien dire mais la syntaxe $ fait plutôt penser à du jQuery.
17/03/2017, 09h13
ParisElliot

Oui parce que j'utilise le fichier bootstrap.min.js.
Voici la doc de la fenêtre modale : http://getbootstrap.com/javascript/#modals

Elle se ferme bien quand on valide l'inscription si les champs sont remplis, cette partie est bonne. Par contre il y a un chargement entre le fait qu'il valide sa saisie et l'envoi des données dans la BDD. Ce qui fait que la fenêtre se réaffiche. C'est ce chargement que je voudrais supprimer.
17/03/2017, 18h15
ABCIWEB

Citation:

Envoyé par ParisElliot

Elle se ferme bien quand on valide l'inscription si les champs sont remplis, cette partie est bonne. Par contre il y a un chargement entre le fait qu'il valide sa saisie et l'envoi des données dans la BDD. Ce qui fait que la fenêtre se réaffiche. C'est ce chargement que je voudrais supprimer.

Voilà c'est plus clair maintenant. Pourquoi ne fais-tu pas une requête ajax pour enregistrer tes données ? C'est le standard dans ces cas là.
20/03/2017, 08h53
ParisElliot

Hum c'est bien ce que je craignais, je n'ai absolument aucune connaissance en AJAX...

J'ai réussi. Je poste donc ma solution ici en espérant que ça puisse aider des gens.

Code de la fenêtre modale :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
 
<div id="myModal" class="modal fade">
                <div class="modal-dialog">
                    <div class="modal-content">
                        <div class="modal-header">
                            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                            <h4 class="modal-title">Inscrivez-vous à notre newsletter</h4>
                        </div>
                        <div class="modal-body">
                            <p>Recevez nos offres exceptionnelles lors de notre arrivée dans votre ville.</p>
                            <form id="form" action="" method="post">
                                <div class="form-group">
                                    <input type="text" name="ville" class="form-control" placeholder="Ville" required>
                                </div>
                                <div class="form-group">
                                    <input type="email" name="email" class="form-control" placeholder="Adresse email" required>
                                </div>
                                <button type="submit" class="btn btn-primary" id="fermer">S'inscrire</button>
                            </form>
                        </div>
                    </div>
                </div>
            </div>

Requête AJAX :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
 
<script type="text/javascript">
            $(function (){
                $("#form").submit(function(){
                    ville = $(this).find("input[name=ville]").val();
                    email = $(this).find("input[name=email]").val();
                    $.post("inscription_newsletter.php",{ville: ville, email: email},function(data){
                        $("#myModal").modal('hide');
                    })
                    return false;
                });
            });
        </script>

Merci a tous !

22/03/2017, 17h43
ABCIWEB

Merci pour le retour.

C'est bien de t'y être mis. Ajax est incontournable aujourd'hui et cela t'ouvriras de nombreuses possibilités ;)