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