Incrémentation d'un total

**openeyes** · 28/03/2013, 02h05

Bonjour,

Je me permets de faire appel à vos cerveaux pour essayer de me dépérer de ce problème.

J'ai créé une page qui est composée principalement d'un formulaire.

A chaque champs de ce formulaire est associée une valeur (dans cet exemple : 10). Ce formulaire servira pour de potentiels acheteurs.

But : l'utilisateur arrive sur le formulaire vierge. Il remplit le premier champs, dès qu'il rentre un caractère, le total doit être incrémenté de 10. Il quitte le premier champs pour aller au second, une fois remplit , le total est incrémenté de 10 (soit 20 au total). Finalement il décide de se rétracter et efface le deuxième champs. Le total diminue de 10 (soit 10 au total).

Voici une explication du projet.

J'ai bien avancé mais je bloque sur l'incrémentation du total. Avez vous une idée?

Voici mon code (pour l'instant il affiche une alerte du prix par champs)

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
$(document).ready(function(){
	$(':input').bind('change',function(){
		// calcul de tous les champs pour avoir un prix global
		var prix = 0;
		$(':input').each(function(){
			if($(this).val().length>0 && $(this).attr('price')){// le champ est rempli et il a un prix
				prix+= parseInt($(this).attr('price'));// on utilise l id pour avoir le prix
			}
		});
		alert(prix);
	});
});

Code html :

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
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
<body>
	<div class="main">
		<div class="wrapper">
 
			<div class="header">
				<h1>OPEYI</h1>
			</div>
 
			<div class="product_des">
				<div class="product_details">
					<span>
						<label>Choix de l'&icirc;le</label>
<input type="radio" id="10" name="ile"/>Martinique<input price="10" type="radio" id="caase" name="ile"/>Guadeloupe<input type="radio" id="caase" name="ile"/>Guyane<input type="radio" id="caase" name="ile"/>R&eacute;union
					</span>
 
					<span>
						<label>Choix de la cat&eacute;gorie</label>
						<select name="cat" id="10" onchange="updateAmount();">
							<option value="0">Commune</option>						
							<option value="10">Actualit&eacute;</option>
							<option value="0">Tourisme</option>
							<option value="0">Culte religieux</option>
							<option value="0">Loisirs</option>
							<option value="0">Musique</option>
							<option value="0">Spectacle</option>
							<option value="0">Concert</option>
							<option value="0">Presta artistes</option>
							<option value="0">Soir&eacute;es</option>
							<option value="0">Restos</option>
							<option value="0">Bons plan</option>
							<option value="0">Club bar</option>
							<option value="0">Rumeur</option>
							<option value="0">Cin&eacute;ma</option>
							<option value="0">Sant&eacute;</option>
						</select>
					</span>
 
					<span>
						<label>Titre</label>
						<input id="10" name="titre" onkeyup="updateAmount();" onmouseout="sortie_champ();"/>
					</span>
 
					<span>
						<label>Lien internet</label>
						<input id="10" name="internet" onkeyup="updateAmount();" onmouseout="sortie_champ();"/>
					</span>
 
					<span>
						<label>Lien acheter/r&eacute;server</label>
						<input id="10" name="acheter" onkeyup="updateAmount();" onmouseout="sortie_champ();"/>
					</span>
 
					<span>
						<label>Description courte</label>
						<textarea id="10" name="courte" rows="10" cols="20"></textarea>
					</span>
 
					<span>
						<label>Description longue</label>
						<textarea rows="10" name="longue" cols="20"></textarea>
					</span>
 
					<span>
						<label>Adresse de l'&eacute;v&eacute;nement</label>
						<input id="10" name="adresse" name="20" onkeyup="updateAmount();" onmouseout="sortie_champ();"/>
					</span>
 
					<span>
						<label>Ville de l'&eacute;v&eacute;nement</label>
						<input id="10" name="ville" onkeyup="updateAmount();" onmouseout="sortie_champ();"/>
					</span>
 
					<span>
						<label>Genre de l'&eacute;v&eacute;nement</label>
						<input id="10" name="genre" onkeyup="updateAmount();" onmouseout="sortie_champ();"/>
					</span>
 
					<span>
						<label>Date</label>
						<input type="date" id="10" name="date" />
					</span>
 
					<span>
						<form enctype="multipart/form-data" action="_URL_" method="post"> 
							<input type="hidden" name="MAX_FILE_SIZE" value="1000"> 
							<label>Envoyer un fly:</label> <input id="10" name="fly" name="userfile" type="file"> 
							<input type="submit" value="Envoyer"> 
						</form> 
					</span>
 
					<span>
						<form enctype="multipart/form-data" action="_URL_" method="post"> 
							<input type="hidden" name="MAX_FILE_SIZE" value="1000"> 
							<label>Envoyer un thumb:</label> <input id="10" name="thumb" type="file"> 
							<input type="submit" value="Envoyer"> 
						</form> 
					</span>
 
					<span>
						<label>Bouton "J'aime"</label>
						<input id="10" name="jaime" onkeyup="updateAmount();" onmouseout="sortie_champ();"/>
					</span>
 
					</div>
					<div class="buy_product">
						<div class="product_price">
							<span id="price">
								<p>0 €</p>
							</span>
							<input type="button" value="Commander"/>
						</div>
					</div>
				</div>
			</div>
		</div>
</body>

Merci de votre aide!

**SpaceFrog** · 28/03/2013, 08h23

Code :

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

<input price="10"

Code :

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

prix+= parseInt($(this).attr('price'));

=>

Code :

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

<input data-price="10"

Code :

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

prix+= parseInt($(this).data('price'),10);

**openeyes** · 28/03/2013, 09h01

Merci, mais là le popup affiche 0 lorsque je clique sur un radio d'une île.

**Lorenzo77** · 28/03/2013, 16h04

salut,

tu te rends compte que tu utilises 20 fois l'ID 10

2 extrait de la REF HTML du W3C concernant l'attribut ID :

ID and NAME tokens must begin with a letter ([A-Za-z]) and may be followed by any number of letters, digits ([0-9]), hyphens ("-"), underscores ("_"), colons (":"), and periods (".").

This name must be unique in a document.

http://www.w3.org/TR/1999/REC-html40...l.html#h-7.5.2
http://www.w3.org/TR/1999/REC-html40...html#type-name

essaye de corriger toutes les erreurs, sinon tu risques d'avoir des problemes avec les navigateurs un peu trop chatouilleux

**SpaceFrog** · 28/03/2013, 16h06

This name must be unique in a document.

heu non the id must be unique...

**Lorenzo77** · 28/03/2013, 16h08

Envoyé par SpaceFrog

heu non the id must be unique...

this name = le nom de l'ID !
a lire : http://www.w3.org/TR/1999/REC-html40...l.html#h-7.5.2

**openeyes** · 28/03/2013, 16h45

Ok merci je le sais très bien mais comment récupérer des valeurs indépendantes dans ce cas? Je suis bien obligé de le mettre dans un attribut?

Certains champs n'auront pas forcément 10 mais 4, 5, 16, ...

**Lorenzo77** · 28/03/2013, 18h02

pas dans l'ID, ID = identifiant (nom unique (commençant par une lettre) utilisé pour cibler l'élément)

comme expliqué précédemment, utilise data-xxxxx, c'est un attribut rajouté en HTML5 mais il ne posera pas de problemes avec les versions antérieur (au pire tu ne passeras pas la validation strict mais c'est pas très important), sans compter que JQ a une méthode spéciale pour gérer cet attribut et même l'émuler sur les navigateurs qui le supporte pas !
http://api.jquery.com/jQuery.data/

-----
j'ai oublié de préciser que tu peux stocker ce que tu veux dans l'attribut data-xxxx, meme un objet complexe

Incrémentation d'un total

jQuery

Discussions similaires

Partager

Partager