Connaître quel élément est cliqué

Version imprimable

21/10/2021, 08h58
BartRoX

Connaître quel élément est cliqué

Bonjour à tous,

J'ai une page en html/php avec une centaine de boutons, tous avec un "name" different,
et je voudrai savoir sur quel bouton l'utilisateur a cliqué pour pouvoir traiter en fonction. (Le traitement est globalement le même, envoyer une valeur à la base de données, cette valeur étant donnée par le bouton en question)

Au départ j'ai pensé partir sur des "submit" à la place de boutons classiques, mais c'est peux être pas mieux car je ne vois toujours pas comment faire...
22/10/2021, 07h54
cavo789

sous-forum javascript

Bonjour

Tu devrais poster dans la section Javascript pour avoir des aides plus précises puisque ce ne sera pas en PHP que tu le feras.

Selon moi (mais cela fait quelques années que je n'ai plus fait du Javascript), tu peux assigner une seule fonction onClick à ta page; cette fonction va donc être utilisée par la centaine de boutons de ta page. Chaque bouton aura un ID qui lui est propre et, donc, dans la fonction onClick il suffira de détecter le ID de l'objet qui l'a déclenché.

Comme je l'ai dit, cela fait longtemps que je n'ai plus codé en JS aussi je ne saurais être plus précis mais nul doute que ce sera la piste qui sera proposée et étoffée par d'autres intervenants plus habitués.

Bonne journée.
22/10/2021, 11h58
SpaceFrog

Tout dépend de comment le click est attribué ...
Il est possible de passer par this dans le onclik du bouton ou e.target dans un eventListener ...

On pourrait t'en dire plus si tu nous montrais un bout de code ...
22/10/2021, 12h10
jreaux62
Bonjour,

ça dépend aussi :
- si il y a autant de formulaires que de boutons (1 bouton = 1 formulaire)
- ou s'il n'y a qu'un seul formulaire.
Mais sans avoir plus de détail sur le code, on ne peut pas en dire plus.
25/10/2021, 08h49
BartRoX

Merci à cavo789 et au Modérateur d'avoir déplacé le sujet, étant encore plutôt novice en web appli je n'aurai pas pensé au Javascript.

Pour ce qui est du code, je ne vois pas bien ce que je pourrai vous donner... Etant surtout en recherche de solution.
La partie html peut être aussi bien un bouton, un submit, ou même autre chose, tant que cela fonctionne. A retenir juste que pour le moment je suis parti du principe d'avoir un "name" différent pour chaque bouton (Mais peut être que cela ne suffit pas).
Et pour la partie php/javascript, je n'ai rien puisque c'est le sujet de ce topic (à part la partie base de données, mais ça c'est la finalité donc peu importe cela ne change rien, ça pourrai être pour faire autre chose que cela ne changerai pas la question).

Du coup,
SpaceFrog>> Pourrais-tu détailler les 2 solutions dont tu parles, bien que je vois de quoi tu parles je ne les ai jamais utilisé (je comprends le concepte par analogie au C#).

jreaux62>> Jusqu'à présent je n'ai toujours utilisé qu'un seul formulaire dans mes pages, mais encore une fois peu importe, du moment que le résultat est là. Néanmoins ça me parait faire beaucoup de formulaire si on part sur un par bouton (si on part sur des formulaires, donc des input="submit" d'ailleurs).
25/10/2021, 09h04
SpaceFrog

Deux posibilités parmi plein d'autres ...

https://jsfiddle.net/4qk2c7sa/

On peut selectionner les éléments par la name (ou le début du name), par une class, on peut passer par des attributs data- ...
Il y a tellement de possibilités, c'est pour cela que je te demandais un début de code HTML pour voir la structure existante ...
25/10/2021, 10h16
BartRoX

Oh, je vois l'idée, merci beaucoup pour les examples !
Je pense que je devrais pouvoir me débrouiller avec ça et adapter à ce que je veux en faire.

Question subsidiaire, est-ce qu'il y a un endroit où il est bon de placer le code javascipt ? Proche de la où ça m'arrange ? A la fin du fichier php ? Dans un autre fichier que j'importe en en-tête de mon fichier php ?
25/10/2021, 10h29
Doksuri

l'ideal etant un fichier separe (integre dans le header) (pour qu'il soit mis en cache dans le navigateur) avec le mode defer (pour ne pas bloquer le chargement de la page) https://developer.mozilla.org/fr/doc...Element/script

Code:

<script src="tonJS.js" defer></script>
25/10/2021, 10h38
BartRoX

OK, merci !
Je regarde tout ça et je reviendrai si jamais j'ai d'autres questions ! ;)
10/11/2021, 05h58
BartRoX

Je réouvre le sujet car après avoir avancé je me retrouve de nouveau confronté à un problème.

J'ai implémenté un script en javascript pour changer la valeur de mes boutons à chaque clique/appui, et cela fonctionne parfaitement bien!
Par contre lorsque j'envoie le formulaire par la suite, c'est encore la valeur ("value") qu'il y avait avant qui est prise en compte...
Est-ce que les modifications apportées par le javascript ne sont pas prise en compte par php...?

Je précise que le code en full php avec des radioboutons à la place fonctionne parfaitement bien.
J'utilise $_POST["le nom du bouton"] pour récupérer la valeur ("value") de ce dernier.
10/11/2021, 08h07
SpaceFrog

Citation:

J'ai implémenté un script en javascript pour changer la valeur de mes boutons à chaque clique/appu

Quel est ce script mystérieux que tu nous caches ?? Pour avoir une idée de ce qui se passe il nous faudrait voir comment tu procèdes ...
Comment le formulaire est-il soumis ?

Je ne cache rien de mysterieux, je ne vois juste pas l'intérêt de le poster vu que cela fonctionne et ce qu'il y a d'important à retenir c'est qu'il change la "value" des boutons.
Mais pour les curieux voila le code:
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 <script type="text/javascript"> function buttonClick(elt) { var str = elt.name.substring(0, 2); if (str == 'Br') { if (elt.value == 'X') { elt.value = 'O'; } else { elt.value = 'X'; } } else if (str == 'Lu') [...] } </script>
Ensuite j'envoie le formulaire via un submit

Code:

<input type="submit" class="buttonSubmit" name="buttonEdit" value="Edit" onclick="">

Rien de bien extravagant.

10/11/2021, 10h13
SpaceFrog

Citation:

"value" des boutons.

???
des inputs type button ???
Si c'est le cas c'est pour cela que ton post ne reçoit pas les values modifiées ...

Quelle est ta motivation d'utiliser des inputs buttons au lieu d'input text ?
10/11/2021, 13h32
jreaux62

Bonjour,

Citation:

Envoyé par BartRoX

Est-ce que les modifications apportées par le javascript ne sont pas prise en compte par php...?

Non, puisque JS est coté client et PHP coté serveur.

A moins d'utiliser Ajax, bien sûr.
12/11/2021, 03h32
BartRoX

C'est bien ce que je craignais...
Du coup ça marche comment Ajax ? :lol:
12/11/2021, 09h07
Doksuri
avec une eponge https://driveimg4.intermarche.com/fr...B2305D6E62.jpg
(desole, j'etais oblige ^^)

pour faire simple, tu utilises fetch developer.mozilla.org/fr/docs/Web/API/Fetch_API/Using_Fetch

fetch('tonUrl.php') tu peux ajouter au header de la requete des parametres (qui seront traites par ta page php)
=> ta page php peu retourner une reponse qui sera traitee par le js (retour de fetch)
Code:

1 2 3 4 5 6 <?php /* exempleData.php */ $data = ['toto' => 'ok']; //autres trucs echo json_encode($data); ?>
Code:

1 2 3 4 5 fetch('exempleData.php') .then(res => res.json())//comme le php nous retourne un JSON, on formate la reponse en JSON .then(data => { console.log(data); });
grosso-modo, c'est comme ca, que ca fonctionne ... facile hien ! :ccool: