Récupérer une variable PHP dans un code Javascript

**Jerry80** · 27/10/2019, 13h43

Bonjour à tous,

Je débute dans le développement web et je n'arrive pas à appeler une variable citée dans un code PHP, variable composée du résultat d'une requête MySQL, dans un code JS.

Un exemple vaut toujours mieux que 1000 explications.

Mon code 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
<?php
                    // Create connection
                    $con=mysqli_connect("localhost","root","","hospital_center");
                    // Check connection
                    if (mysqli_connect_errno())
                    {
                    echo "Failed to connect to MySQL: " . mysqli_connect_error();
                    }
                    $result = mysqli_query($con,"
                    SELECT * FROM citadelle 
                    WHERE heure BETWEEN '$heure_moins' AND '$heure_plus'
                    AND date='$date'
                    AND localisation= '$localisation'
                    AND statut = 'available'
                    UNION 
                    SELECT * FROM chateau_rouge
                    WHERE heure BETWEEN '$heure_moins' AND '$heure_plus'
                    AND date='$date'
                    AND localisation= '$localisation'
                    AND statut = 'available'
                    UNION
                    SELECT * FROM sainte_rosalie
                    WHERE heure BETWEEN '$heure_moins' AND '$heure_plus'
                    AND date='$date'
                    AND localisation= '$localisation'
                    AND statut = 'available'
                    ");
 while($row = mysqli_fetch_array($result))
                        {
                        echo '<div div id="resultat_requete" class="col-8">';
                        echo $row['date'];
                        echo $row['heure'];
                        echo $row['hopital'];
                        echo '</div>';
                        echo '<button id="button'.$row['id'].'" class="bouton col-4">Réservez maintenant</button>';
                        echo '                
                            <div id="formulaire'.$row['id'].'" class="formulaire col-12">
                                <form id="contact-form" method="get" action="envoi.php" role="form">
                                </form>
                            </div>
                            ';
                        }
?>

Mon code JS:

Code HTML :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
<head>
    <script src="../jquery-3.4.1.min.js"></script>
    <script>
        var id= "<?php echo $row['id']; ?>";
        alert(id);
        $(document).ready(function(){
            $("#button"+id).click(function(){
                $("#formulaire"+id).slideToggle(300);
            });
        });
    </script>
</head>

Le but de l'animation JS est que le formulaire en-dessous du résultat X (avec la propriété hidden) de la requête PHP slideDown quand on clique sur le bouton correspond au résultat X de la requête PHP et slideUp quand on reclique dessus.

Cependant, quand j'exécute ma page .php dans un serveur local (via Wamp), la console m'indique cette erreur: "Uncaught SyntaxError: Invalid or unexpected token". La ligne correspond à la ligne ou j'appelle la variable PHP dans le JS, c'est à dire :

Code JavaScript :

Sélectionner tout - Visualiser dans une fenêtre à part

var id= "<?php echo $row['id']; ?>";

.

Nom : Capture.PNG
Affichages : 1562
Taille : 87,1 Ko

Est-ce quelqu'un aurait une idée de comment résoudre mon problème? Je suis quasi certain que le problème vient du fait que la variable $row est mal appelée dans le code JS.

Je vous remercie d'avance pour vos réponses!

Jerry

Invité · 27/10/2019, 14h21

Bonjour,

1-

PHP agit "coté serveur".
Donc, quand JavaScript agit, "coté client", il n'y a plus de PHP.

2- Au lieu d'écrire :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

                        echo '<button id="button'.$row['id'].'" class="bouton col-4">Réservez maintenant</button>';

écris :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

                        echo '<button class="bouton col-4 btn_reservation" data-id="'.$row['id'].'" >Réservez maintenant</button>';

3- Ensuite, en JavaScript/jQuery :

Code HTML :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
    <script>
        $(document).ready(function(){
            $("form").on("click", ".btn_reservation", function(){
                var id = $(this).data("id");
                $("#formulaire"+id).slideToggle(300);
            });
        });
    </script>

4- Par contre :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
                        echo '                
                            <div id="formulaire'.$row['id'].'" class="formulaire col-12">
                                <form id="contact-form" method="get" action="envoi.php" role="form">
                                </form>
                            </div>
                            ';

A quoi ça sert ???

De plus, id="contact-form" : un attribut id DOIT être UNIQUE (or, ici, tu es dans une boucle xhile).

Si tu veux transmettre l'id à la page envoi.php, c'est comme ça qu'il faut s'y prendre :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
                        echo '                
                            <div class="formulaire col-12">
                                <form method="get" action="envoi.php" role="form">
                                   <input type="hidden" value="'.$row['id'].'" />
                                </form>
                            </div>
                            ';

**Jerry80** · 28/10/2019, 16h41

Bonjour jreaux62,

Merci beaucoup pour ta réponse!

Après quelques bidouillages ça marche exactement comme je le voulais ! J'ai juste rajouté une div qui inclut le résultat de la requête, le bouton, et la div du formulaire, et lui ai donné la classe "all".

Le code JS donne donc ceci:

Code HTML :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
    <script>
        $(document).ready(function(){
            $(".all").on("click", ".btn_reservation", function(){
                var id = $(this).data("id");
                $("#formulaire"+id).slideToggle(300);
            });
        });
    </script>

J'ai maintenant bien compris que l'ID doit être unique (ce que je ne savais pas), et j'ai réécrit le code du formulaire ainsi:

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
<div id="formulaire'.$row['id'].'" class="formulaire col-12" style="border:1px solid black; display:none">
                                <form method="get" action="envoi.php" role="form">
                                    <div class="row">
                                        <div class="col-6">
                                            <label for="firstname">Prénom <span class="blue">*</span></label>
                                                <input id="firstname" type="text" name="firstname" class="form-control" placeholder="Votre prénom">
                                            <p class="comments"></p>
                                        </div>
                                        <div class="col-6">
                                            <label for="name">Nom <span class="blue">*</span></label>
                                        <input id="name" type="text" name="name" class="form-control" placeholder="Votre Nom">
                                            <p class="comments"></p>
                                        </div>
                                        <div class="col-6">
                                            <label for="numero_national">Numéro national (NISS) <span class="blue">*</span></label>
                                                  <input id="numero_national" name="numero_national" class="form-control" placeholder="XXXXXX-XXX-XX"/>
                                            <p class="comments"></p>
                                        </div>
                                        <div class="col-6">
                                            <label for="phone">Téléphone <span class="blue">*</span></label>
                                                <input id="phone" type="tel" name="phone" class=form-control placeholder="+32 4XX XX XX XX">
                                            <p class="comments"></p>
                                        </div>
                                        <p class="blue col-6"><strong>* Ces informations sont requises.</strong></p>
                                        <input type="submit" class="button1 col-6" name="sub_btn" value="Envoyer">
                                    </div>   
                                </form>
                            </div>

Est-ce que ça te parait plus correct ?

Je tiens encore à te remercier pour ta réponse, c'est super sympa.

A plus !

Invité · 28/10/2019, 18h38

Bonjour,
ça a l'air correct.

1- perso je préfère :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

 <form method="post"

et récupération en $_POST.
Ça évite que les paramètres transmis soient visibles dans l'URL (où ils sont TRÈS/TROP facilement modifiables).

2- En savoir + sur l'attribut data-*.

**Jerry80** · 28/10/2019, 21h28

Ah oui juste, je m'occupe de changer ca.

Merci pour tout

!

Récupérer une variable PHP dans un code Javascript

PHP & Base de données

Discussions similaires

Partager

Partager