Cellule Cliquable

Par Kemokoba BAYO, il y a 5 ans

Les bases HTML/CSS
Javascript

Bonsoir j'envoie ce petit message pour vous demander un peu d'aide. Pour le contexte, je suis en train de travailler sur un captcha en image comme reCaptcha mais le souci c'est que j'ai une fonction clicked en javascript pour selectionner une cellule de mon tableau ce que j'aimerai faire c'est, au moment où un utilisateur va cliquer sur une cellule on va un effet de selection qui va etre enregistrer (surbrillance ou bien "enfoncement" de l'image) comme sur le captcha de Google en exemple.. Y'a t'il un moyen de le faire avec du CSS ou il est aussi possible de le faire en js ? je vous montre le code

<div class="card border-0"> <table width="465" border="0" cellspacing="0" cellpadding="0" height="465" onclick="tes(event);"> <tr> <td id="i1" class="i1" value="TOP-LEFT"></td> <td id="i2" class="i2" value="TOP-CENTER"></td> <td id="i3" class="i3" value="TOP-LEFT"></td> </tr> <tr> <td id="i4" class="i4" value="CENTER-LEFT"></td> <td id="i5" class="i5" value="CENTER-CENTER"></td> <td id="i6" class="i6" value="CENTER-RIGHT"></td> </tr> <tr> <td id="i7" class="i7" value="BOTTOM-LEFT"></td> <td id="i8" class="i8" value="BOTTOM-CENTER"></td> <td id="i9" class="i9" value="BOTTOM-RIGHT"></td> </tr> </table> </div>

et voici le petit code js :

function tes(event) { if (event.target.nodeName == "TD") { alert('TD got clicked'); } }

Merci D'avance

8 réponses

Mickael Christine, il y a 5 ans

Hello , petite correction fetch n'est pas supporté par IE, si tu cible ce navigateur aussi il te faudra utiliser autre chose ou ajouter un polyfill pour IE.

lhapaipai, il y a 5 ans

tu peux ajouter une classe à ta cellule lorsque tu as cliqué dessus ?

function tes(event) { if (event.target.nodeName == "TD") { event.target.classList.add('selected'); } } td.selected { box-shadow: inset 0 0 0 3px green; }
Kemokoba BAYO, il y a 5 ans

Bonsoir, Merci de votre réponse. Au final c'est exactement ce que j'ai fait. ca fonctionne la sélectionne des cases se fait bien. Maintenant ce que j'aimerai maintenant pouvoir recuperer les valeurs de des cases selectionne pour les envoyés dans une bases de données avez vous une idée ? Dois-je utiliser ajax ? ou je dois utiliser un listener ?

Merci d'avance

lhapaipai, il y a 5 ans

le listener vous l'avez déjà. vous pouvez effectivement faire une requête ajax depuis votre fonction tes.

Kemokoba BAYO, il y a 5 ans

D'acoord je vais faire ca, et je reviendrai vers vous je vous remercie de vos réponses

Kemokoba BAYO, il y a 5 ans

D'acoord je vais faire ca, et je reviendrai vers vous je vous remercie de vos réponses

Up: J'ai essayer de regarder la doc d'Ajax() vu que je n'en ai jamais fait. Comment faire une requete à partir de la fonction tes pour recuperer l'id de l'image selectionner ?

ce que je voyais pour pouvoir le faire

var selected = document.querySelectorAll('td.clicked'); sell = selected.id; function envoi(){ var selected = document.querySelector('#td.clicked') } $.ajax({ url: 'traitement.php', type:'POST', data: (selected, success: function(){ alert('ok'); } }); }

J'ai pensé à reférencer l''evenement td.clicked pour pouvoir l'envoyer mais j'ai l'impression que ce n'est pas ca et que je me complique la vie

Merci d'avance

lhapaipai, il y a 5 ans

tu peux créer un objet FormData pour contenir les valeurs que tu souhaites envoyer.

let formData = new FormData(); formData.append('id', selected.id); fetch('traitement.php', { method: 'POST', body: formData });

tu n'es pas obligé d'utiliser jQuery pour faire ta requête. Tous les navigateurs actuels le gèrent très bien en natif via fetch.
article de javascript.info sur fetch et formData

Kemokoba BAYO, il y a 5 ans

Hello Merci deja pour vos reponse. Alors j'ai teste et fais les modifs qu'il y avait à faire pour que ca fonctionne pour mon code mais petit souci il me dise que selected n'est pas défini, pourquoi ce message d'erreur ?

Merci d'avance pour vos réponses

pourtant j'ai bien mis

function tes(event) { if (event.target.nodeName == "TD") { event.target.classList.toggle("clicked") let formData = new FormData(); formData.append('id', clicked.id); fetch('../model/captchaModel.php', { method: 'POST', body: formData }); //.then(console.log, console.error) } }