Envoyer des données à partir d'un click sur une image

Version imprimable

06/01/2020, 02h54
X3M0S

Envoyer des données à partir d'un click sur une image

Bonjour/Bonsoir,

Pour poser un peu le contexte, je suis étudiant et j'ai un jeu d'énigmes à réaliser en ligne. Dans l'une des énigmes, le joueur dois choisir entre 5 propositions d'images différentes.
Donc, au click (sur l'image) je doit aller vérifier si l'image sur laquelle il a clické est la bonne.

J'ai donc mes images au format :

Code:

<a id="rep_X_eni_X" class="rep_eni_X" href=""><img src="'.base_url().'/assets/img/eni_X/rep_a.png" alt="Réponse X : XXXXXX"></a>

(je suis même pas sûr d'avoir besoin de la balise <a></a> du coup ..? (je pose la question pour être sûr)

Je cherche donc à faire mon appel ajax à partir de ça. :?

Niveau : Débutant

Merci pour votre aide !
06/01/2020, 09h13
Doksuri
Bonjour et bienvenu sur le forum

vu que ton traitement est a faire en JS, tu n'as effectivement pas besoin de la balise <a>

de plus :
si ton exercice te force a faire de l'ajax, ok... sinon, tu n'as même pas besoin de faire un appel ajax pour cet exercice

ce que tu peux faire c'est <img src="'.base_url().'/assets/img/eni_X/rep_a.png" alt="Réponse X : XXXXXX" onclick="traitementImage()">

et dans sont script JS :
Code:

1 2 3 function traitementImage() { console.log("faire l'ajax ici"); }
au cas ou ton exercice t'obliges a faire de l'ajax : tu peux utiliser fetch() developer.mozilla.org/en-US/docs/Web/API/Fetch_API/Using_Fetch
06/01/2020, 13h41
X3M0S

Bonjour Doksuri,

Tout d'abord merci pour ta réponse rapide :)

Ensuite effectivement, l'exercice nous oblige à utiliser l'appel Ajax.

D'accord pour le script JS, c'est l'idée que je me faisais, maaaaaaiiisss .. Dans mon appel Ajax, comment je fais pour envoyer les "data". Comment je les remplient avec des valeurs étant donné que je n'ai que des images.

Et pour la fonction fetch() .. Je n'ai pas bien compris à quoi elle servait. Es le moyen d'envoyer mes data à partir d'une image ?

Niveau : Débutant

Merci pour votre aide !
06/01/2020, 13h57
Invité

Bonjour,

Montre comment tu t'y prends quand ce ne sont pas des images.

Bonjour jreaux62,

Et bien, par exemple, pour vérifié les donnés d'un formulaire voici ce que j'avais fait :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<form action="validation.php" method="post">
		<fieldset>
			<legend style="padding: 1em;">Ceci est un jour sans connexion</legend>
			<label for="nom">Votre nom</label>
			<input id="nom" type="text" name="nom" placeholder="John" style="padding: 4px; margin-bottom: 10px;">
			<span id="erreurNom" style="color: #ff4646;"></span><br>
 
			<label for="mail">Votre mail</label>
			<input id="mail" type="mail" name="mail" placeholder="john@exemple.ex" style="padding: 4px;">
			<span id="erreurMail" style="color: #ff4646;"></span>
 
			<p style="color:red; font-size: 0.8em; font-weight: bold;">Tous les champs sont obligatoire</p><br>
			<input type="submit" value="Envoyer">
			<span id="success"></span>
		</fieldset>
	</form>

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
44
45
46
47
48
49
50
51
52
53
<script>
	$(document).ready(function() {
		$('form').submit(function(event){
			console.info('Envoi du formulaire') ;
			event.preventDefault(); // On empêche l'envoi du formulaire
			console.log("1) Envoi du formulaire en AJAX");
			envoiFormulaire();
			var data ={};
			$("#prenom").val("");
			$("#email").val("");
			console.log("2) Formulaire envoyé en AJAX");
		});
 
		function envoiFormulaire() {
			var data = {};
 
			$.ajax({
				dataType: 'json',
				type: 'POST',
				url: 'validarion.php',
				data: {'nom': $('#nom').val(), 'mail': $('#mail').val()
				},
				success: function(reponse){
					console.log(reponse);
 
					if (reponse === true){
						console.log('Mail envoyé');
						$("#nom").css("background-color","white");
						$("#erreurNom").html("");
						$("#mail").css("background-color","white");
						$("#erreurMail").html("");
						$("#success").html("<p style='background-color: #4bb54b54; border: 2px #028602b5 solid; padding: 0.5em 0.8em; border-radius: 3px; max-width: 15vw; text-align: center;'>Le mail vous a bien été envoyé !</p>");
					} else {
						$.each(reponse, function(champ, erreur){
							console.log("Erreur sur "+champ+" : "+erreur);
							if (champ==="nom") {
								$("#nom").css("background-color","#ff7676");
								$("#erreurNom").html(erreur);
							}
							if (champ==="mail") {
								$("#mail").css("background-color", "#ff7676");
								$("#erreurMail").html(erreur);
							}
						});
					}
				},
				error: function(){
					console.log('Problème de validation');
				}
			});
		}
	});
</script>

Niveau : Débutant

Merci pour votre aide !

OK.
Déjà, on peut voir que tu codes en jQuery.

Que ce soit avec des images ou autre chose, une (bonne) solution ici est d'utiliser les attributs data-*.

1- Le formulaire :
Code:

1 2 3 4 <img src=".........../rep_a.png" alt="Réponse X : XXXXXX" data-imgid="rep_a" class="groupe-images"> <img src=".........../rep_b.png" alt="Réponse Y : YYYYYY" data-imgid="rep_b" class="groupe-images"> <img src=".........../rep_c.png" alt="Réponse Z : ZZZZZZ" data-imgid="rep_c" class="groupe-images"> ...
2- jQuery
Code:

1 2 3 4 5 6 $('form').on( 'click', '.groupe-images', function(){ imgid = $(this).data('imgid'); // on récupère le data-imgid de l'image cliquée // ici, on peut faire l'appel Ajax // .... });
Si tu veux que le choix soit pris en compte à la soumission du formulaire, il ne faut pas non plus oublier qu'on peut utiliser :

<input type="radio" name="machin" /> pour un choix unique
<input type="checkbox" name="truc[]" /> pour les choix multiples (name avec des [])

Ex. :
Code:

1 2 3 4 <label><input type="radio" name="groupe-images" data-imgid="rep_a" class="groupe-images" /><img src=".........../rep_a.png" alt="Réponse X : XXXXXX"></label> <label><input type="radio" name="groupe-images" data-imgid="rep_b" class="groupe-images" /><img src=".........../rep_b.png" alt="Réponse Y : YYYYYY"></label> <label><input type="radio" name="groupe-images" data-imgid="rep_c" class="groupe-images" /><img src=".........../rep_c.png" alt="Réponse Z : ZZZZZZ"></label> ...
Ainsi, on peut voir qu'avec images ou textes, c'est le même principe.

06/01/2020, 15h37
X3M0S

Ohooo d'accord, j'y vois beaucoup plus claire à présent !

Mais petite question du coup. Moi ma vérification se fait instantanément quand je clic sur mon image, autrement dit, pas de validation de réponse. Donc en soit, je n'ai pas besoin de ça,

Citation:

Envoyé par jreaux62

<input type="radio" name="machin" /> pour un choix unique
<input type="checkbox" name="truc[]" /> pour les choix multiples (name avec des [])

Est-ce exact ?

Niveau : Débutant

Merci pour votre aide !
06/01/2020, 16h56
Invité

Toi seul connait l'intitulé exact de ton "jeu d'énigmes".

On te donne des pistes, à toi de (sa)voir ce dont tu as besoin.

Ok, alors j'ai essayé de mettre ça en place comme ceci :

Code:

1
2
3
4
5
6
7
<div id="eni_8" class="d-flex justify-content-between align-items-center h-100 w-100">
    <form>
        <img id="rep_X_eni_X" class="rep_eni_X" data-imgid="rep_X" onclick="verif_rep_eni_X()" src="..." >
        <img id="rep_Y_eni_X" class="rep_eni_Y" data-imgid="rep_Y" onclick="verif_rep_eni_X()" src="..." >
        <img id="rep_Z_eni_X" class="rep_eni_Z" data-imgid="rep_Z" onclick="verif_rep_eni_X()" src="..." >
    </form>
</div>

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<script>
		function verif_rep_eni_X(){
			var data = {};
			imgid = $(this).data('imgid');
			console.log(imgid);
			$.ajax({
				dataType: 'json',
				type: 'POST',
				url: 'Enigmes/verif_rep_eni_X',
				data: {'rep': imgid},
				success: function (reponse) {
					console.log(reponse);
				},
				error: function () {
					console.log('Problème');
				}
			});
		};
	</script>

J'ai remplacé le

Code:

$('form').on( 'click', '.groupe-images', function(){

car il ne faisait strictement rien au clic.

Cependant, maintenant, mon imgid n'est pas définit au clic ...
Pourquoi ?

Niveau : Débutant

Merci pour votre aide !

Oh ! C'est bon j'ai réussis. Je crois que c'était une erreur de ma part pour le message précédent.

Voici donc l'idée pour ceux qui chercheraient aussi !

Code:

1
2
3
4
5
6
7
<div id="eni_X" class="d-flex justify-content-between align-items-center h-100 w-100">
 
        <img class="rep_eni_X" data-imgid="rep_X" src="..." alt="..." />
        <img class="rep_eni_X" data-imgid="rep_Y" src="..." alt="..." />
        <img class="rep_eni_X" data-imgid="rep_Z" src="..." alt="..." />
 
</div>

Jquery :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
		$('#eni_X').on( 'click', '.rep_eni_X', function(){
			var data = {};
			imgid = $(this).data('imgid');
			console.log(imgid);
			$.ajax({
				dataType: 'json',
				type: 'POST',
				url: 'Enigmes/verif_rep_eni_X',
				data: {'rep': imgid},
				success: function (reponse) {
					console.log(reponse);
				},
				error: function () {
					console.log('Problème');
				}
			});
		});

********* CE MESSAGE A ETE MODIFIE *********

Merci beaucoup pour votre aide !

PROBLEME RESOLU

Correction :

Code:

1
2
3
4
5
6
7
<div id="eni_X" class="d-flex justify-content-between align-items-center h-100 w-100">
 
        <img class="rep_eni_X" data-imgid="rep_X" src="..." alt="..." />
        <img class="rep_eni_X" data-imgid="rep_Y" src="..." alt="..." />
        <img class="rep_eni_X" data-imgid="rep_Z" src="..." alt="..." />
 
</div>

Il faut la même classe "rep_eni_X"
J'ai supprimé ce qui est inutile