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

Version imprimable

1 pièce(s) jointe(s)

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:

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:

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:

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

.

Pièce jointe 513426

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

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:

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

écris :

Code:

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

3- Ensuite, en JavaScript/jQuery :

Code:

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:

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 ??? :koi:
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:

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>
                            ';

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:

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:

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 !

28/10/2019, 18h38
Invité

Bonjour,
ça a l'air correct. :ccool:

1- perso je préfère :

Code:

<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-*.
28/10/2019, 21h28
Jerry80

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

Merci pour tout :chin: !