incrémentation de plusieurs champs [Résolu]

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

the_tiger85 · 11/07/2011, 11h10

Merci.

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

the_tiger85 · 11/07/2011, 17h17

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

Code HTML

Code :

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

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 :

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
 
$(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é

11/07/2011, 10h31	#4
danielhagnoul Rédacteur Daniel Hagnoul Étudiant perpétuel Inscription : février 2009 Messages : 3 221 Détails du profil Informations personnelles : Nom : Daniel Hagnoul Âge : 61 Localisation : Belgique Informations professionnelles : Activité : Étudiant perpétuel Secteur : Enseignement Informations forums : Inscription : février 2009 Messages : 3 221 Points : 6 767 Points : 6 767	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. __________________ FAQ jQuery Mon cahier d’exercices sur jQuery & Co Si un message vous a aidé ou vous semble pertinent, votez pour lui !
	00

11/07/2011, 09h56	#3
the_tiger85 Candidat au titre de Membre du Club Intégratrice Web Inscription : mai 2007 Messages : 40 Détails du profil Informations personnelles : Sexe : Âge : 25 Localisation : France, Finistère (Bretagne) Informations professionnelles : Activité : Intégratrice Web Secteur : High Tech - Multimédia et Internet Informations forums : Inscription : mai 2007 Messages : 40 Points : 12 Points : 12	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.
	00

11/07/2011, 10h40	#5
the_tiger85 Candidat au titre de Membre du Club Intégratrice Web Inscription : mai 2007 Messages : 40 Détails du profil Informations personnelles : Sexe : Âge : 25 Localisation : France, Finistère (Bretagne) Informations professionnelles : Activité : Intégratrice Web Secteur : High Tech - Multimédia et Internet Informations forums : Inscription : mai 2007 Messages : 40 Points : 12 Points : 12	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 !
	00

11/07/2011, 11h10	#7
the_tiger85 Candidat au titre de Membre du Club Intégratrice Web Inscription : mai 2007 Messages : 40 Détails du profil Informations personnelles : Sexe : Âge : 25 Localisation : France, Finistère (Bretagne) Informations professionnelles : Activité : Intégratrice Web Secteur : High Tech - Multimédia et Internet Informations forums : Inscription : mai 2007 Messages : 40 Points : 12 Points : 12	Merci. Je suis désolée mais ça ne fonctionne toujours pas... Et je ne vois pas d'où ça peut venir ...
	00

Outils de la discussion
Afficher une version imprimable Envoyer un lien vers cette page par email