11484 sujets

JavaScript, DOM et API Web HTML5

Bonjour,

Cela fait maintenant quelques jours que je suis bloqué sur mon problème. Je vais vous détailler tous ça ! (J'espère bien m'exprimer)
J'ai eu beaucoup de mal à trouver un titre, je vais tout de même faire mon possible pour tout expliquer.

Info : Je suis sous Wordpress. J'utilise Popup Maker pour afficher une pop-up avec mon formulaire sur la page, et WP Forms Lite pour le formulaire.

Fonctionnement
Sur une page, il y a plusieurs dates (3), lorsqu'on clique sur l'une de ces dates, une pop-up apparaît avec le formulaire intégrer.
/ ! \ Les dates sont justes des liens

Le plugin
La pop-up est une <div> qui intègre le formulaire, par un shortcode (dans mon cas).
La pop-up (formulaire) est déjà présente sur la page (en display:none), il se lance grâce à une classe sur le lien (nommé : popmake-monformulaire), ce qui fait passer la pop-up en display:block.


But
Lorsque que l'utilisateur clique sur l'une des dates, la bonne date doit être intégré dans le formulaire :
- soit dans un champ prévu pour, nommé "date" par exemple
- soit dans un champ existant, mais dans ce cas, il faut que la date se rajoute seulement derrière le contenu (dans mon cas : "Formation Photoshop - 24 janvier" par exemple)

A savoir
Les dates sont des données récupérés en XML, et traité en PHP pour l'affichage (par shortcode).
Le nom de la formation (dans le formulaire) est récupéré dynamiquement par rapport au nom de la page.

Où j'en suis ?
Actuellement, j'ai réussi a faire une alerte qui récupère le contenu de la balise <a>, lors de l'ouverture du pop-up :

(function ($, document, undefined) {
	$('#pum-5336').on('pumAfterOpen', function () {   // Après l'ouverture de la pop-up
		alert($('#datesession').html());  // Affiche une alerte avec le contenu du <a>
	});
}(jQuery, document))

Mais c'est seulement le contenu de la première date. (Oui j'ai très peu fait et j'en suis très loin)

Voilà à quoi ressemble le code des dates :

<a id="datesession" href="http://localhost/formation/photoshop" class="popmake-devis">lundi 30 au mercredi 2 mai</a>

J'ai mis en clair le contenu de <a>, mais normalement ce sont des variables qui récupère les données par rapport à un tableau, qui lui récupère les données d'un fichier XML.
Le code est dans un for each car je parcours un tableau pour récupérer touts les dates de la formation concerné.

J'ai cherché de mon côté, mais les différentes réponses ne m'apportait pas ce que je voulais.

La solution la plus simple, est de mettre en paramètre la date dans la balise <a> et lors d'un clique dessus, l'utilisateur apparaît sur une nouvelle page, avec le formulaire, puis récupéré le paramètre par GET et l'insérer dans le formulaire (facile à faire)
Mais, la pop-up n'est pas une option, j'aimerais la garder pour l'avantage qu'elle apporte (revenir rapidement à la page mère).

J'aimerai une trame, ou un indice sur quoi me pencher exactement.
S'il existe d'autre solution que le JS ? Pourquoi pas !
Utiliser autre chose qu'un lien pour la date ?

N'ayant aucune connaissance en JS (ou très très peu), j'aimerai de l'aide Smiley smile
Si besoin de plus de détails, pas de soucis !

Merci d'avance !

Cordialement,
KaeSor
Modifié par Kaesor (26 Apr 2018 - 15:51)