incrémentation de plusieurs champs

Version imprimable

Bonjour

Je vais avoir plusieurs champs à incrémenter mais je ne sais pas combien (il s'agit d'un panier). Je dois me charger de la partie Intégration et toute la partie développement c'est une autre société qui va s'en charger et je n'aurais plus accès au code ensuite...

Mon problème est donc le suivant : Comment faire pour incrémenter plusieurs champs de manière totalement distincte sans savoir le nombre de champs à créer ?...

Code:

1
2
3
4
5
6
 
<form class="quantite">  
    <input class="ajouter" type="button" name="ajouter" value=" " />  
    <input readonly="readonly" class="nombre_part" type="text" class="champ" name="nombre_part" value="1" size="1" />  
    <input class="soustraire" type="button" name="soustraire" value=" " />  
</form>

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
 
<!-- Script pour ajouter ou supprimer une quantité dans le champ panier --> 
<script type="text/javascript"> 
    $(function() {    // Décrémente le champ nombre_part  
        $(".soustraire").click(function() {  
            var valeur = $('.nombre_part').val();  
            if (valeur >= 2) {  
            var nouvelleValeur = parseFloat(valeur) - 1;  
            }  
            $('.nombre_part').val(nouvelleValeur);  
        });  
    });  
 
    $(function() {    // Incrémente le champ nombre_part  
        $(".ajouter").click(function() {  
            var valeur = $('.nombre_part').val();  
            var nouvelleValeur = parseFloat(valeur) + 1;  
            $('.nombre_part').val(nouvelleValeur);  
            $('#quantity').attr("value",nouvelleValeur);  
        });  
    });  
</script>

J'espère que je me suis fait comprendre ^_^ Dites moi si je n'ai pas été très claire !

Merci d'avance pour votre aide.

Bonsoir

Exemple (codes corrigés, un seul attribut class qui peut contenir plusieurs classes, élément d'ID "quantity" absent) :

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
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
<!doctype html>
<html lang="fr">
<head>
	<meta charset="utf-8">
	<meta name="Author" content="Daniel Hagnoul">
	<title>Forum jQuery</title>
	<link rel="stylesheet" href="http://danielhagnoul.developpez.com/lib/jPicker/css/jPicker.dvjh-1.1.6.min.css" />
	<style>
		/* Base */
		div,p,h1,h2,h3,h4,h5,h6,ul,ol,dl,form,table,img {margin:0px; padding:0px; }
		body {background-color:rgba(210, 214, 98, 0.5); color:#000000; font-family:sans-serif; font-size:medium; font-style:normal; font-weight:normal; line-height:normal; letter-spacing:normal; }
		h1,h2,h3,h4,h5 {font-family:serif; padding:6px; }
		p, div, td {word-wrap:break-word; }
		pre, code {white-space:pre-wrap; word-wrap:break-word; }
		img, input, textarea, select {max-width:100%; }
        img {border:none; }
		h1 {font-size:2em; text-shadow: 4px 4px 4px #bbbbbb; text-align:center; }
		p {padding:6px; }
        ul,ol,dl {list-style:none; padding-left:6px; padding-top:6px; }
        li {padding-bottom:6px; }
		.conteneur {width:95%; min-width:800px; min-height:400px; margin:12px auto; background-color:#FFFFFF; color:#000000; border:1px solid #666666; }
	</style>
</head>
<body>
	<h1>Forum jQuery</h1>
	<section class="conteneur">
 
<form class="quantite">  
    <input name="ajouter" class="ajouter" type="button" value="+" />  
    <input name="nombre_part" class="nombre_part champ" readonly="readonly" type="text" value="1" size="1" />  
    <input name="soustraire" class="soustraire" type="button" value="-" />  
</form>
 
<form class="quantite">  
    <input name="ajouter" class="ajouter" type="button" value="+" />  
    <input name="nombre_part" class="nombre_part champ" readonly="readonly" type="text" value="1" size="1" />  
    <input name="soustraire" class="soustraire" type="button" value="-" />  
</form>
 
<form class="quantite">  
    <input name="ajouter" class="ajouter" type="button" value="+" />  
    <input name="nombre_part" class="nombre_part champ" readonly="readonly" type="text" value="1" size="1" />  
    <input name="soustraire" class="soustraire" type="button" value="-" />  
</form>
 
<form class="quantite">  
    <input name="ajouter" class="ajouter" type="button" value="+" />  
    <input name="nombre_part" class="nombre_part champ" readonly="readonly" type="text" value="1" size="1" />  
    <input name="soustraire" class="soustraire" type="button" value="-" />  
</form>
 
	</section>
	<footer itemscope itemtype="http://data-vocabulary.org/Person">
		<time datetime="2011-07-08T22:50:00.000+02:00" pubdate>2011-07-08</time> <span itemprop="name">Daniel Hagnoul</span> <a href="http://www.developpez.net/forums/u285162/danielhagnoul/" itemprop="url">@danielhagnoul</a>
	</footer>
	<script charset="utf-8" src="http://code.jquery.com/jquery-1.6.2.min.js"></script>
	<script charset="utf-8" src="http://danielhagnoul.developpez.com/lib/jPicker/jpicker-1.1.6.min.js"></script>
	<script>
		$(function(){
			/* -- */
 
// Décrémente le champ nombre_part  
$(".soustraire").click(function() {  
	var obj = $(this).prev(".nombre_part"),
		valeur = parseInt(obj.val(), 10);
 
	if (!isNaN(valeur) && valeur >= 2) {  
		obj.val(valeur - 1);
	} else {
		obj.val(1);
	}
 
	return false;
});
 
// Incrémente le champ nombre_part  
$(".ajouter").click(function() {  
	var obj = $(this).next(".nombre_part"),
		valeur = parseInt(obj.val(), 10);
 
	if (!isNaN(valeur)) {  
		obj.val(valeur + 1);
	} else {
		obj.val(1);
	}
 
	return false;
});
 
			/* jPicker : http://www.digitalmagicpro.com/jPicker/, outil pour choisir rapidement une couleur */
			$.fn.jPicker.defaults.images.clientPath="http://danielhagnoul.developpez.com/lib/jPicker/images/";
			$(".conteneur").jPicker({window:{expandable:true,title:"jPicker : choissisez une couleur :",
			alphaSupport:true,position:{x:'screenCenter',y:'top'}},color:{ active:new $.jPicker.Color({ r: 210, g: 214, b: 98, a: 128 })}},
			function(color, context){var c = color.val("all");if (c){$("body").css("backgroundColor", "rgba(" +
			c.r + "," + c.g + "," + c.b + "," + (c.a/255).toFixed(2) + ")");}});
		});
	</script>
</body>  
</html>

11/07/2011, 09h56
the_tiger85

Bonjour

Merci de ta réponse rapide.

Ton exemple fonctionne correctement mais pas quand je l'intègre à ma page...

Je suis débutante en JS et je ne comprend pas tout...

Voici ma page : liste.php.

Et voici un lien vers mon code JS : ajout-suppression-quantite.js

Merci d'avance pour ton aide.
11/07/2011, 10h31
danielhagnoul

Bonjour

Si je vois bien, car le terrain est difficile, vous avez inversé les "inputs" "soustraire" et "ajouter" dans votre site par rapport à votre question.

Ce qui a une grande influence sur mon code. Si vous conservez le sens "- +" au lieu de "+ -" il faut inverser le "prev" et le "next" dans mon code.
11/07/2011, 10h40
the_tiger85

Merci, j'ai modifié votre code.

Mais ça ne fonctionne toujours pas... Comme vous avez pu le constater, dans ma page j'ai pas mal de JS, j'ai essayé de tous les désactiver et de ne laisser que le code qui nous intéresse mais rien ni fait ...

Si j'ai inversé les input "ajouter" et "soustraire" c'est parce qu'ils sont mis en position "float:right" et si je les mets correctement ils s’inverserait !

Mon code modifié :

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
// Décrémente le champ nombre_part  
$(".soustraire").click(function() {  
	var obj = $(this).next(".nombre_part"),
		valeur = parseInt(obj.val(), 10);
 
	if (!isNaN(valeur) && valeur >= 2) {  
		obj.val(valeur - 1);
	} else {
		obj.val(1);
	}
 
	return false;
});
 
// Incrémente le champ nombre_part  
$(".ajouter").click(function() {  
	var obj = $(this).prev(".nombre_part"),
		valeur = parseInt(obj.val(), 10);
 
	if (!isNaN(valeur)) {  
		obj.val(valeur + 1);
	} else {
		obj.val(1);
	}
 
	return false;
});

11/07/2011, 11h10
the_tiger85

Merci.

Je suis désolée mais ça ne fonctionne toujours pas... Et je ne vois pas d'où ça peut venir ... :?

C'est bon, sujet résolu, voici les codes pour les suivants ^^

Code HTML

Code:

1
2
3
4
5
6
7
8
 
<form class="quantite" action="#">
	<div>
		<input class="soustraire" type="button" name="soustraire" value="" />
		<input readonly="readonly" class="nombre_part champ" type="text" name="nombre_part" value="1" size="1" />
		<input class="ajouter" type="button" name="ajouter" value="" />
	</div>
</form>

Code JS

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
 
$(function() { 
	$('.nombre_part').each(function() { 
		var field = $(this); 
		$(this).closest('.jqTransformInputWrapper').next().click(function() { 
			updateQuantity(field, 1); 
		}); 
		$(this).closest('.jqTransformInputWrapper').prev().click(function() { 
			updateQuantity(field, -1); 
		}); 
	});
}); 
 
 
function updateQuantity(field, qty) { 
	var val = parseFloat(field.val()) + qty; 
	if (val < 0) val = 0; 
		field.val(val); 
}

Merci danielhagnoul de m'avoir aiguillé