Action Javascript en fonction du boutton cliqué

Version imprimable

Bonjour,

J'ai une page web sur laquelle j'ai 3 boutons. Le premier bouton a comme valeur 2 euros, le second 5 euros et le troisième 10 euros. J'ai un code javascript associe et je veux que le code réagissent en fonction du button que j'ai cliqué. Actuellement, il ne réagit qu'au premier bouton de 2 euros. Auriez-vous une idée de comment faire réagir le code javascript en fonction du bouton cliqué.
Merci d'avance.

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
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<script src="https://code.jquery.com/jquery-3.4.1.min.js">
	</script>
</head>
<body>
	<button id="boutton" value="2">	
		Envoyer 
	</button>
	<button id="boutton" value="5">	
		Envoyer
	</button>
	<button id="boutton" value="10">	
		Envoyer
	</button>
</body>
 
<script type="text/javascript"> 
 
        const btn = document.querySelector('#boutton');
        const btVal = btn.value;
        
 
        bouton.addEventListener("click", function(){
                $.ajax({
                url:'test.php',
                type: 'POST',
                data: {amount: parseInt(btVal},
                        
 
                success: function (json_data) {
                        window.location.replace(json_data);
                },
                error: function() {
                    console.log("data not found");
                }
        });
        }); 
</script>
 
</html>

18/04/2020, 17h25
javatwister

Salut,

Déjà, tu aurais une id pour chaque bouton, ce serait un peu plus cohérent...

Imaginons une classe css "boutons"; tu récupères l'ensemble des éléments de la classe avec

Code:

const mes_boutons=document.querySelectorAll(".boutons");

Et puis tu lances le gestionnaire "click" pour chacun des éléments:
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 const mes_boutons=document.querySelectorAll(".boutons"); mes_boutons.forEach(b => {b.addEventListener("click", function(){ $.ajax({ url:'test.php', type: 'POST', data: {amount: this.value}, success: function (json_data) { window.location.replace(json_data); }, error: function() { console.log("data not found"); } }); }); })
Quelque chose comme ça;

18/04/2020, 19h08
lemzo84

En fait, le code Javascript doit réagir uniquement en fonction du bouton que j'ai cliqué. En testant avec ton code, je n'ai pas de réaction de la part des boutons. Ce que je propose c'est de mettre un ID différent a chaque bouton. Par exemple, bouton1, bouton2 et bouton3. Que me suggérerais-tu dans ce cas ? Merci d'avance.

Code:

1
2
3
<button class="boutons" value="2">Envoyer</button>
<button class="boutons" value="5">Envoyer</button>
<button class="boutons" value="10">Envoyer</button>

18/04/2020, 19h33
lemzo84
Ça marche. Merci bcp Javatwister pour ton aide super précieuse. Cependant, j'ai une erreur au niveau de la ligne suivante:
Code:

1 2 mes_boutons.forEach(b => {b.addEventListener("click", function(){
J'ai essayé avec le Array.from() comme ceci mais sans succes:
Code:

1 2 Array.from(mes_boutons).forEach(b => {b.addEventListener("click", function(){
J'ai regardé dans la doc de forEach mais je ne vois rien. Aurais-tu une idée?
Merci encore.

c'est parce que tu testes avec Explorer... auquel je n'ai pas pensé;
Code:

1 2 3 4 5 for(let i = 0; i < mes_boutons.length; i++) { mes_boutons[i].addEventListener("click", function(){ // action }) }

Bonjour JavaTwister,

J'ai toujours une erreur sur IE au niveau de la ligne commençant par for.
Ensuite sur chaque bouton, je veux insérer un code produit de telle sorte que lorsque je clique sur un bouton, en plus du montant en euros, il me prend en compte le code du produit. Aurais-tu une idée si possible.
Un grand Merci à toi.

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
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<script src="https://code.jquery.com/jquery-3.4.1.min.js">
	</script>
</head>
<body>
 
<button class="boutons" value="2" CODE="CodeProduit1">Envoyer</button>
<button class="boutons" value="5" CODE="CodeProduit2">Envoyer</button>
<button class="boutons" value="10" CODE="CodeProduit3">Envoyer</button>
 
</body>
 
<script type="text/javascript">
 
const mes_boutons=document.querySelectorAll(".boutons");
for(let i = 0; i < mes_boutons.length; i++) {
        mes_boutons[i].addEventListener("click", function(){
        $.ajax({
                url:'test.php',
                type: 'POST',
                data: {amount: this.value},
                success: function (json_data) {
                        window.location.replace(json_data);
                },
                error: function() {
                        console.log("data not found");
                }
        });
}); 
})
 
</script>

26/04/2020, 15h51
ProgElecT

Salut

Il me semble bien que toutes les versions de Ie ne supporte pas le let, remplacer par un var.
26/04/2020, 16h16
lemzo84

1 pièce(s) jointe(s)

Bonjour,

J'ai tjrs une erreur. J'ai attaché la capture d'ecran.
Merci.
Pièce jointe 560404
26/04/2020, 16h26
ProgElecT

Que donne console.log("Valeur de mes_boutons",mes_boutons); que tu mes juste avant la ligne For?
26/04/2020, 16h38
lemzo84

Les boutons ne réagissent pas et je n'ai aucun message qui apparaît sur IE ou sur Chrome.
26/04/2020, 16h44
javatwister

Parenthèse fermante en trop à la fin...
26/04/2020, 16h51
lemzo84

Parenthèse enlevée et plus d'erreurs affichées mais tjrs aucune réaction des boutons...

@ javatwister, en effet, j'ai corrigé pour essayer, voici le code

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
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
</head>
<body>
 
<button class="boutons" value="2" CODE="CodeProduit1">Envoyer</button>
<button class="boutons" value="5" CODE="CodeProduit2">Envoyer</button>
<button class="boutons" value="10" CODE="CodeProduit3">Envoyer</button>
 
 
<script>
 
const mes_boutons=document.querySelectorAll(".boutons");
console.log("Valeur de mes_boutons",mes_boutons);
for(let i = 0; i < mes_boutons.length; i++) {
        mes_boutons[i].addEventListener("click", function(){
        $.ajax({
                url:'test.php',
                type: 'POST',
                data: {amount: this.value},
                success: function (json_data) {
                        window.location.replace(json_data);
                },
                error: function() {
                        console.log("data not found");
                }
        });
});
};
 
</script>
</body>
</html>

@lemzo84, Je n'ai pas d'erreur en console sous Ie mais data not found pour tout les butons cliqués.

@ProgElecT, çà marche. En fait les valeurs des boutons sont trop faibles et c'est pour cela que tu avais data not found. J'ai remplacé let par var et ça fonctionne sur IE et sur Chrome (enfin....:D). Il reste le fait d'associer le code produit de chaque bouton pour qu'en plus du montant, je puisse récupérer le code produit. Auriez-vous une idée?
Voici le code:

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
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
</head>
<body>
 
<button class="boutons" value="2000" id ="CodeProduit1" >Envoyer</button>
<button class="boutons" value="5000" id ="CodeProduit2">Envoyer</button>
<button class="boutons" value="10000" id ="CodeProduit3">Envoyer</button>
 
 
<script>
 
const mes_boutons=document.querySelectorAll(".boutons");
console.log("Valeur de mes_boutons",mes_boutons);
 
for(var i = 0; i < mes_boutons.length; i++) {
        mes_boutons[i].addEventListener("click", function(){
        $.ajax({
                url:'test.php',
                type: 'POST',
                data: {amount: this.value},
                success: function (json_data) {
                        window.location.replace(json_data);
                },
                error: function() {
                        console.log("data not found");
                }
        });
});
};
 
</script>
</body>
</html>

Pour récupérer le code du produit, voila ce que j'ai essayer mais ça ne marche pas (ça ne récupère que le montant). Auriez-vous une idée ?
Merci encore.

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
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
</head>
<body>
 
<button class="boutons" value="2000" id="CodeProduit1" >Envoyer</button>
<button class="boutons" value="5000" id="CodeProduit2">Envoyer</button>
<button class="boutons" value="10000" id="CodeProduit3">Envoyer</button>
 
 
<script>
const mes_boutons=document.querySelectorAll(".boutons");
console.log("Valeur de mes_boutons",mes_boutons);
const product = document.querySelectorAll(".id");
const productID = product.innerHTML;
 
for(var i = 0; i < mes_boutons.length; i++) {
        mes_boutons[i].addEventListener("click", function(){
        $.ajax({
                url:'test.php',
                type: 'POST',
                data: {amount: this.value, productId: productID,},
                success: function (json_data) {
                        window.location.replace(json_data);
                },
                error: function() {
                        console.log("data not found");
                }
        });
});
};
 
</script>
</body>
</html>

27/04/2020, 07h46
Beginner.

Salut,

Citation:

Envoyé par lemzo84

Pour récupérer le code du produit, voila ce que j'ai essayer mais ça ne marche pas (ça ne récupère que le montant). Auriez-vous une idee ?

Tu peux supprimer les lignes 18 et 19 et à la ligne 26 remplace productID par this.id...
27/04/2020, 10h09
javatwister
et pendant que tu y es, élimines ces 2 lignes comiques:
Code:

1 2 const product = document.querySelectorAll(".id"); const productID = product.innerHTML;
27/04/2020, 15h05
Beginner.

Salut,

Citation:

Envoyé par javatwister

et pendant que tu y es, élimines ces 2 lignes comiques:

Oui c'est de ces lignes (18 & 19) dont je parlais...

Salut, j'ai fait les modifs mais je n'arrive toujours pas a recuperer le id. D'autres idees ?
Voici le code:

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
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
</head>
<body>
 
<button class="boutons" value="2000" id="CodeProduit1" >Envoyer</button>
<button class="boutons" value="5000" id="CodeProduit2">Envoyer</button>
<button class="boutons" value="10000" id="CodeProduit3">Envoyer</button>
 
 
<script>
const mes_boutons=document.querySelectorAll(".boutons");
console.log("Valeur de mes_boutons",mes_boutons);
 
for(var i = 0; i < mes_boutons.length; i++) {
        mes_boutons[i].addEventListener("click", function(){
        $.ajax({
                url:'test.php',
                type: 'POST',
                data: {amount: this.value, productId: this.id,},
                success: function (json_data) {
                        window.location.replace(json_data);
                },
                error: function() {
                        console.log("data not found");
                }
        });
});
};
 
</script>
</body>
</html>

27/04/2020, 22h33
javatwister

Ligne 26: virgule à effacer...
27/04/2020, 22h56
Beginner.

Salut,

Citation:

Envoyé par lemzo84

Salut, j'ai fait les modifs mais je n'arrive toujours pas a recuperer le id. D'autres idees ?

Ben si tu récupères bien la propriété amount tu devrais aussi pouvoir récupérer la propriété productId... Comment procèdes-tu ?

Citation:

Envoyé par javatwister

Ligne 26: virgule à effacer...

Tu veux dire ligne 24 ? Chez moi ça marche même avec mais autant l'enlever tu as raison...
28/04/2020, 09h27
NoSmoking
Bonjour,
:koi:
on peut lire dans ton code $.ajax mais tu utilises des document.querySelectorAll, cela reste une mauvaise pratique que de mélanger les écritures.
Code:

1 2 3 $(".boutons").on("click", function () { // le code });
en jQuery, le code est plus concis, mais tu peux aussi décider de rester en « Vanilla » JavaScript, c'est juste un soucis de cohérence.
29/04/2020, 13h58
lemzo84

Bonjour Messieurs,

Ça marche.:D
Merci beaucoup pour votre aide précieuse.