incrémentation de plusieurs champs

**the_tiger85** · 08/07/2011, 17h45

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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.

**danielhagnoul** · 08/07/2011, 22h52

Bonsoir

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

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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>

**the_tiger85** · 11/07/2011, 09h56

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.

**danielhagnoul** · 11/07/2011, 10h31

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.

**the_tiger85** · 11/07/2011, 10h40

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 !

**danielhagnoul** · 11/07/2011, 11h06

Mon code modifié :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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;
});

incrémentation de plusieurs champs

jQuery

Vue hybride

Discussions similaires

Partager

Partager