Récuperer des données javascript en php

Par CWick, il y a 9 ans

PHP

Bonjour,

Voila je rencontre un petit problème avec mon code.

Ce que je fais

Je cherche à récuperer les données que je fais passer avec javascript en php pour pouvoir faire une requête sql

Voici mon modal :

<!-- Modal --> <div class="modal fade" id="addBookDialog" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-label="Close"> <span aria-hidden="true">&times;</span> </button> <h4 class="modal-title" id="myModalLabel">Action</h4> </div> <div class="modal-body"> ... </div> <div class="modal-footer"> <button type="button" class="btn btn-secondary" data-dismiss="modal">Fermer</button> <button type="button" class="btn btn-primary">Enregistrer</button> </div> </div> </div> </div>

Mon javascript :

$(document).on("click", ".open-AddBookDialog", function () { var myBookId = $(this).data('id'); var myBookSalon = $(this).data('salon'); $(".modal-body #bookId").val( myBookId ); $(".modal-body #bookSalon").val( myBookSalon ); });

Ce que je veux

Je souhaite affiché le contenu de mon "data-id" et "data-salon" sur mon modal et pouvoir récuperer les données pour faire une requête sql.

Ce que j'obtiens

6 réponses

Lartak, il y a 9 ans

Bonsoir.
Il y a plusieurs problèmes avec le code que tu nous montre.

  • Tu veux sélectionner des éléments HTML qui n'existent pas dans ta page, tel que des éléments ayant la classe modal-body ayant comme valeur pour l'attribut id bookId ou bookSalon.
  • Tu utilises val qui n'est pas du tout approprié dans le cas présent.

Ces deux problèmes en sont bien sûr, à moins que tu ne nous donnes pas le code complet de ta modale.

santo17, il y a 9 ans

Hello CWick.
Déjà, tu ne nous montres pas le code complet de ton modal comme le fait savoir Lartak, du coup c'est un peu compliqué de t'aider.
Mais bon, à mon avis comme le dis Lartak, tu sélectionnes et veux modifier des élements HTML qui n'existent pas dans le DOM.
Ce qu'il faut faire dans ton cas, c'est simple:

Modal

<!-- Modal --> <div class="modal fade" id="addBookDialog" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-label="Close"> <span aria-hidden="true">&times;</span> </button> <h4 class="modal-title" id="myModalLabel">Action</h4> </div> <div class="modal-body"> <p id="bookId"></p> <p id="bookSalon"></p> </div> <div class="modal-footer"> <button type="button" class="btn btn-secondary" data-dismiss="modal">Fermer</button> <button type="button" class="btn btn-primary">Enregistrer</button> </div> </div> </div>

Ou ceci (Autre modal)

<!-- Modal --> <div class="modal fade" id="addBookDialog" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-label="Close"> <span aria-hidden="true">&times;</span> </button> <h4 class="modal-title" id="myModalLabel">Action</h4> </div> <div class="modal-body"> <form> <div class="form-group"> <input type="text" id="bookId" class="form-control"> <input type="text" id="bookSalon" class="form-control"> </div> </form> <div class="modal-footer"> <button type="button" class="btn btn-secondary" data-dismiss="modal">Fermer</button> <button type="button" class="btn btn-primary">Enregistrer</button> </div> </div> </div>

Javascript

$(document).on("click", ".open-AddBookDialog", function () { var myBookId = $(this).data('id'); var myBookSalon = $(this).data('salon'); // Si tu utilises des input (Champs de texte) $(".modal-body #bookId").val( myBookId ); $(".modal-body #bookSalon").val( myBookSalon ); /* Si tu utilises autres choses que des input (p, span, div, etc), utilises les methodes .text(), .html(), ou encore append. C'est selon ;) */ $(".modal-body #bookId").text( myBookId ); $(".modal-body #bookSalon").text( myBookSalon ); $("#addBookDialog").modal('toggle'); //Permet d'afficher la boîte modal après avoir ajouté les informations });

J'espère t'avoir aidé. ;)

santo17, il y a 9 ans

Tu passes par un formulaire et tu utilises la methode POST ou GET c'est selon.

CWick, il y a 9 ans

Merci beaucoup :)

santo17, il y a 9 ans

Je t'en prie! Tout le plaisir est pour moi ;) !