[Aide: pur noob] Création formulaire dynamique en JS pur

Version imprimable

22/02/2007, 20h40
Pahcixam

[Aide: pur noob] Création formulaire dynamique en JS pur

Bonjour,

Je viens soliciter votre aide en temps que pur noob en javascript. Je code actuelement un projet en PHP/MySQL, pour lequel j'ai déjà demandé un peu d'aide il y a peu pour une fonction confirm ! Je remercie d'ailleur les personnes qui m'ont aidées.

J'ai donc terminé le projet, mais il me manque encore une chose.

Je voudrais creer un formulaire avec 6 champs de textes. En fait deux groupes de 3. Il s'agit en fait d'un convertisseur de prix. Le prix peu être décomposé en 3 types de pièces, le type G, M et N, sachant qu'il y a un taux fixe pour passer d'un type à l'autre.

J'ai donc ceci:

compte 1: |__| G |__| M |__| N
compte 2: |__| G |__| M |__| N

Les champs sont préremplie par une requete dans ma BDD.

J'aimerai donc faire deux boutons, qui permettent de déplacer de l'argent d'un compte à l'autre.

Et si possible un bouton pour chaque type de monnaie pour aller plus vite.

Voilà, j'aimerai donc avoir vos conseilles, et si c'est très long à faire, quelles notions dois-je apprendre pour réaliser le code, et quels "plan" devrais-je suivre pour y arriver ?

Merci d'avance.

comprend pas trop ce que tu veux faire

pour faire une conversion avec un taux fixe, tu peux faire "basiquement", un truc dans le genre.
Code:

1 2 3 4 5 6 function convert(taux,idChampDepart,idChampArrive){ var valeurDepart = document.getElementById(idChampDepart).value; var valeurArrive = valeurDepart*taux; document.getElementById(idChampArrive).value=valeurArrive; }
sur ton bouton tu mets :

onclick="convert(0.5,'champg1','champm1');

(où champg1 et champm1 sont les id de tes champs du formulaires)

Ca t'aide ou je suis a côté de la plaque ?

23/02/2007, 10h07
Pahcixam

Salut,

merci de m'avoir répondu.

J'ai essayé ton truc en l'adaptant un poil au niveau des champs de formulaire. Ca marche bien quand je veut convertir une valeur d'un champs et l'afficher dans un autre champs.

Mais ce que je voulais faire ce n'était pas ça.

Je vais situer le truc ça sera plus simple. Je fait un système de banque pour un forum RPG sur le monde d'Harry Potter. Tous leur prix sont donc en Gallion, Mornilles, Noise. (sachant que 1 Gallion = 17 Mornilles, 1 Mornille = 29 Noises, 1 Gallion = 493 Noises).

J'ai donc deux comptes, 1 épargne et 1 compte courant.

Je gère parfaitement le transfert d'argent d'un compte à l'autre en PHP. Pour celà je converti à chaque fois prix en noises pur et fait les calcules avec.

Mais pour le banquier, je voudrais faire un truc sympa en javascript.

C'est à dire que j'aiffiche les montant des deux comptes comme le l'ai fait plus haut:

Compte 1: |__| Gallion(s) |__| Mornille(s) |__| Noise(s)
Compte 2: |__| Gallion(s) |__| Mornille(s) |__| Noise(s)

Où |__| représente un champs text d'un formulaire, que je préremplie de la valeur stockée dans la base de donnée.

Le but final est de faire une fleche vers le haut et une vers le bas qui permettent au clic de déplacer une noise d'un compte à l'autre.

Et si possible ensuite, pour aller plus vite, une mornille et/ou un galion.

Sachant que pour réccuperer les valeur, je n'ai pas besoin de tout transformer en noise, car j'ai une fonction php qui me le fait.

Voilà, j'espère avoir été plus clair.

Merci encore.

Bon, j'ai pris mon courage à deux main, et je me suis lancé dans un code.

Pour l'instant ça avance doucement, je voudrais avoir votre avis, pour pas partir dans le mur. Je suis à peu prêt sur que ya plus simple, mais bon, il faut bien se lancer.

Voici le code tout compris !

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
<html>
<head>
<script type="text/javascript">
/*Debut du code javascript */
function courant_to_epargne(var1, var2, var3, var4, var5, var6)
{
	var gallion_courant = window.document.forms['modif_compte'].elements[var1].value;
	var mornille_courant = window.document.forms['modif_compte'].elements[var2].value;
	var noise_courant = window.document.forms['modif_compte'].elements[var3].value;
	var gallion_epargne = window.document.forms['modif_compte'].elements[var4].value;
	var mornille_epargne = window.document.forms['modif_compte'].elements[var5].value;
	var noise_epargne = window.document.forms['modif_compte'].elements[var6].value;
 
noise_courant = noise_courant - 1;
if(noise_courant < 0 ){
noise_courant = 0;
}else{
noise_epargne = noise_epargne - - 1;
}
 
if(noise_epargne >= 29)
{
	mornille_epargne = mornille_epargne - - 1;
	noise_epargne = 0;
	mornille_courant = mornille_courant - - 1;
}
 
 
 
window.document.forms['modif_compte'].elements[var2].value = mornille_courant;
window.document.forms['modif_compte'].elements[var3].value = noise_courant;
window.document.forms['modif_compte'].elements[var5].value = mornille_epargne;
window.document.forms['modif_compte'].elements[var6].value = noise_epargne;
}
 
function epargne_to_courant(var1, var2, var3, var4, var5, var6)
{
	var gallion_courant = window.document.forms['modif_compte'].elements[var1].value;
	var mornille_courant = window.document.forms['modif_compte'].elements[var2].value;
	var noise_courant = window.document.forms['modif_compte'].elements[var3].value;
	var gallion_epargne = window.document.forms['modif_compte'].elements[var4].value;
	var mornille_epargne = window.document.forms['modif_compte'].elements[var5].value;
	var noise_epargne = window.document.forms['modif_compte'].elements[var6].value;
 
noise_epargne = noise_epargne - 1;
if(noise_epargne < 0 ){
noise_epargne = 0;
}else{
noise_courant = noise_courant - - 1;
}
 
window.document.forms['modif_compte'].elements[var6].value = noise_epargne;
window.document.forms['modif_compte'].elements[var3].value = noise_courant;
 
}
 
</script>
</head>
<body>
<form name="modif_compte" action="" method="POST">
Compte courant: 
<input type="text" name="gallion_courant" value="4" size="4" /> Gallions 
<input type="text" name="mornille_courant" value="5" size="4" /> Mornilles
<input type="text" name="noise_courant" value="14" size="4" /> Noises
<br />
Epargne : 
<input type="text" name="gallion_epargne" value="0" size="4" /> Gallions 
<input type="text" name="mornille_epargne" value="0" size="4" /> Mornilles
<input type="text" name="noise_epargne" value="26" size="4" /> Noises
<br /><br />
<input name="button2" type="button" onClick="epargne_to_courant('gallion_courant','mornille_courant','noise_courant','gallion_epargne','mornille_epargne','noise_epargne')" value="Epargne vers courant" size="80">
<input name="button2" type="button" onClick="courant_to_epargne('gallion_courant','mornille_courant','noise_courant','gallion_epargne','mornille_epargne','noise_epargne')" value="Courant vers epargne" size="80">
</form>
</body>
</html>

Bon, j'ai un peu avancer, voici mon travail. Par contre je ne comprend pas, la premiere fonction marche nikelle, mais pas la deuxième ?

Egalement, je voudrais savoir si il existe un moyen pour continuer à faire le déplacement si le joueur garde cliqué le bouton ? Parce que comme ça c'est précis mais ça peut être fastidieux.

Merci.

Le code

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
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
<html>
<head>
<script type="text/javascript">
/*Debut du code javascript */
 
//Fonction pour transferer des fond du compte courant à l'epargne
function courant_to_epargne(var1, var2, var3, var4, var5, var6)
{
	var gallion_courant = window.document.forms['modif_compte'].elements[var1].value;
	var mornille_courant = window.document.forms['modif_compte'].elements[var2].value;
	var noise_courant = window.document.forms['modif_compte'].elements[var3].value;
	var gallion_epargne = window.document.forms['modif_compte'].elements[var4].value;
	var mornille_epargne = window.document.forms['modif_compte'].elements[var5].value;
	var noise_epargne = window.document.forms['modif_compte'].elements[var6].value;
 
noise_courant = noise_courant - 1;
 
/* Dans le cas ou le compte est a sec */
if(( noise_courant < 0 ) && ( mornille_courant >= 0 ) && ( gallion_courant >= 0 ))
{
	noise_courant = 0;
}
/* Dans le cas ou les noises sont à zéro mais où il reste de l'argent */
else if(( noise_courant <= 0 ) && ( mornille_courant > 0 ))
{
	mornille_courant = mornille_courant - 1;
	noise_courant = 28;
}
/* Dans le cas ou il ne reste que des galions */
else if(( noise_courant <= 0 ) && ( mornille_courant <= 0 ) && ( gallion_courant > 0 ))
{
	gallion_courant = gallion_courant - 1;
	mornille_courant = 16;
	noise_courant = 28;
}
else
{
	noise_epargne = noise_epargne - - 1;
}
 
/*Verification pour le passage d'une unite de monnaie a une autre*/
if(noise_epargne >= 29)
{
	mornille_epargne = mornille_epargne - - 1;
	noise_epargne = 0;
}
 
if(mornille_epargne >= 17)
{
	gallion_epargne = gallion_epargne - - 1;
	mornille_epargne = 0;
}
 
 
window.document.forms['modif_compte'].elements[var1].value = gallion_courant;
window.document.forms['modif_compte'].elements[var2].value = mornille_courant;
window.document.forms['modif_compte'].elements[var3].value = noise_courant;
window.document.forms['modif_compte'].elements[var4].value = gallion_epargne;
window.document.forms['modif_compte'].elements[var5].value = mornille_epargne;
window.document.forms['modif_compte'].elements[var6].value = noise_epargne;
}
 
 
//Fonction pour transferer de l'argent de l'epargne au compte courant
function epargne_to_courant(var1, var2, var3, var4, var5, var6)
{
	var gallion_courant = window.document.forms['modif_compte'].elements[var1].value;
	var mornille_courant = window.document.forms['modif_compte'].elements[var2].value;
	var noise_courant = window.document.forms['modif_compte'].elements[var3].value;
	var gallion_epargne = window.document.forms['modif_compte'].elements[var4].value;
	var mornille_epargne = window.document.forms['modif_compte'].elements[var5].value;
	var noise_epargne = window.document.forms['modif_compte'].elements[var6].value;
 
noise_courant = noise_courant - 1;
 
/* Dans le cas ou le compte est a sec */
if(( noise_epargne < 0 ) && ( mornille_epargne >= 0 ) && ( gallion_epargne >= 0 ))
{
	noise_epargne = 0;
}
/* Dans le cas ou les noises sont à zéro mais où il reste de l'argent */
else if(( noise_epargne <= 0 ) && ( mornille_epargne > 0 ))
{
	mornille_epargne = mornille_epargne - 1;
	noise_epargne = 28;
}
/* Dans le cas ou il ne reste que des galions */
else if(( noise_epargne <= 0 ) && ( mornille_epargne <= 0 ) && ( gallion_epargne > 0 ))
{
	gallion_epargne = gallion_epargne - 1;
	mornille_epargne = 16;
	noise_epargne = 28;
}
else
{
	noise_courant = noise_courant - - 1;
}
 
/*Verification pour le passage d'une unite de monnaie a une autre*/
if(noise_courant >= 29)
{
	mornille_courant = mornille_courant - - 1;
	noise_courant = 0;
}
 
if(mornille_courant >= 17)
{
	gallion_courant = gallion_courant - - 1;
	mornille_courant = 0;
}
 
 
window.document.forms['modif_compte'].elements[var1].value = gallion_courant;
window.document.forms['modif_compte'].elements[var2].value = mornille_courant;
window.document.forms['modif_compte'].elements[var3].value = noise_courant;
window.document.forms['modif_compte'].elements[var4].value = gallion_epargne;
window.document.forms['modif_compte'].elements[var5].value = mornille_epargne;
window.document.forms['modif_compte'].elements[var6].value = noise_epargne;
}
 
</script>
</head>
<body>
<form name="modif_compte" action="" method="POST">
Compte courant: 
<input type="text" name="gallion_courant" value="4" size="4" /> Gallions 
<input type="text" name="mornille_courant" value="2" size="4" /> Mornilles
<input type="text" name="noise_courant" value="14" size="4" /> Noises
<br />
Epargne : 
<input type="text" name="gallion_epargne" value="0" size="4" /> Gallions 
<input type="text" name="mornille_epargne" value="0" size="4" /> Mornilles
<input type="text" name="noise_epargne" value="26" size="4" /> Noises
<br /><br />
<input name="button2" type="button" onClick="epargne_to_courant('gallion_courant','mornille_courant','noise_courant','gallion_epargne','mornille_epargne','noise_epargne')" value="Epargne vers courant" size="80">
<input name="button2" type="button" onClick="courant_to_epargne('gallion_courant','mornille_courant','noise_courant','gallion_epargne','mornille_epargne','noise_epargne')" value="Courant vers epargne" size="80">
</form>
</body>
</html>

23/02/2007, 20h58
Pahcixam

Bon,

et bien après avoir tatonné, mon script marche parfaitement.

Il est vrai qu'il est un peu long, mais bon, ça me satisfait, l'affichage est immédiat.

Merci à vous tout de même, car même si personne ne m'a bien aidé, la faq elle l'a fait !