Discussion :

[renaud26]

Bonjour à tous,

J'ai crée un formulaire dynamique php à partir d'une table sql.
Chaque champ comporte un bouton radio correspondant à un prix.
Avant le bouton valider, j'ai un champ "total" que je voudrais alimenter en fonction des choix. Mais je ne sais pas comment créer la fonction javascript.
extrait du formulaire

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
 
//affichage boutons radio
$sql = mysql_query("SELECT id, code, nom, classe, prix FROM parametres order by id limit 0,4");
 
while($row = mysql_fetch_array($sql))
{
echo "<input type='radio' name='prix[]' value='".$row["prix"]."' onClick = 'calcul_form()'>";
}
//affichage des checkbox
$sql2 = mysql_query("SELECT id, code, nom, classe, prix FROM parametres order by id limit 4,11");
while($row = mysql_fetch_array($sql2))
{
echo "<input type='checkbox' name='prix[]' value='".$row["prix"]."' onClick = 'calcul_form()'>";
}
?>
<input type="text" size = "5" name="total" value="" readonly="">

et je voudrais que la fonction calcule_form() alimente le champ "total"...J'ai tout essayé sans succès. La value de code[] n'est pas comprise...Je précise qu'elle est soit un entier soit un décimal.
Pouvez-vous m'aider ?
Merci d'avance !

[Ntilou]

est ce que tu pourrais envoyer ton code js, j'ai fais quasiment la meme chose le mois dernier. Sinon moi j'ai pas mis onclcik, mis onchange.

[renaud26]

merci de te pencher sur mon cas
voici la fonction JS (elle est devenue pourrie à force de faire des modifs). Mais comme je connais le nombre de champ de mon form dynamique, j'ai mis une boucle for. Ceci dit, c'est pas vraiment le but d'un form dynamique...alors si je pouvais m'en passer...

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
 
 
function calcul_form() 
{
with (document.forms.form1) 
    {
 
for(i=1;i<12;i++)
{
total.value = code.value *1 + code(i).value *1 ;
}
// Ai mis les *1 ci-dessus afin que les + fassent une somme arithmétique
// et non pas une concaténation de chaînes de caractères
      }
}

[Ntilou]

ok mais avant j'aimerais juste comprendre une petite chose :

pourquoi est ce que tu as des boutons radio et des checkbox ?

si tu pouvais m'expliquer ta méthode de calcul en fait...

c'est juste une addition des valeurs ou autre ?

[renaud26]

Oui, en fait je me suis mal expliqué, et j'ai fait pas mal de modifs ensuite...
Il y a des radio et des checkbox car les 4 premiers champs (radio) n'offrent qu'un choix possible alors que les 7 autres (checkbox) peuvent tous être sélectionnés. Mais mon erreur était de vouloir ajouter des champs value qui contenaient les données que mon form doit traiter. J'ai donc ajouté un champ prix, qui lui, doit être ajouté pour former une somme qui alimentera le champ total. je remets la première partie du form (radios)

Code :

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

1
2
3
4
 
 
<input type='radio' name='code[]' value='".$row["code"]."' onChange = 'calcul_form()'>
<input type='text' name='prix[]' size='3' value='".$row["prix"]."' readonly=''>

J'avoue ne plus savoir trop quoi faire...peut être getElementByid ? Puisque le but est que si le user coche un des radios "code", son prix se totalise...
J'espère avoir été plus clair...

[Ntilou]

donc si je comprends bien tu as en tout 11 prix (7 + 4) mais parmi les 4 premiers tu peux n'en selectionner qu'un seul et ensuite tu peux selectionner les 7 autres c'est bien ca ?

[renaud26]

exactement ça !

[Ntilou]

Voila :

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
 
 
<script>
function calcul_form(){
var val_code;
var val_prix;
var val_total;
<? for ($i=0;$i<4;$i++){ ?>
if (document.form1.code[<?=$i?>].checked==true){
val_code = parseFloat(document.form1.code[<?=$i?>].value);}
if (!val_code){val_code = 0;}
<? } ?>
<? for ($i=0;$i<7;$i++){ ?>
if (document.form1.prix<?=$i?>.checked==true){
val_prix = eval(val_prix) + (parseFloat(document.form1.prix<?=$i?>.value));}
if (!val_prix){val_prix = 0;}
<? } ?>
val_total = eval(val_code + val_prix);
document.form1.total.value=eval(val_total);
}
</script>
<form name="form1">
<? for ($i=0;$i<4;$i++){
echo "<input type='radio' name='code' value='".$i."' onClick = 'calcul_form()'>";
 } ?>
<? for ($i=0;$i<7;$i++){
echo "<input type='checkbox' name='prix".$i."' size='3' value='".$i."' onClick = 'calcul_form()'> ";
 } ?>
<input type="texte" name="total">
</form>

évidemment c'est un exemple j'ai mis une 1ere boucle allant de 1 a 4 (dans le js et dans ta page mais tu remplaces cette boucle par la boucle de ta requete) :

Code :

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

1
2
3
 
 
while($row = mysql_fetch_array($sql)){

et IDEM pour la seconde boucle avec :

Code :

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

1
2
3
 
 
while($row = mysql_fetch_array($sql2)){

j'espère que ca ira

[renaud26]

Grand grand merci pour ton coup de main, Ntilou !
Je vais tester ça de suite et je te dis comment ça se passe.

[renaud26]

évidemment c'est un exemple j'ai mis une 1ere boucle allant de 1 a 4 (dans le js et dans ta page mais tu remplaces cette boucle par la boucle de ta requete) :

je capte pas trop, là...remplacer aussi dans le JS ?
Dans ma boucle while, le format sera du genre

Code :

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

1
2
3
4
5
6
 
 
<input type='checkbox' name='code[]' value='".$row["code"]."' 
onClick = 'calcul_form()'>
<input type='text' name='prix[]' size='3' value='".$row["prix"]."' 
readonly='' onClick = 'calcul_form()'>

J'ai pris la partie checkbox comme example, parce qu'il me semble que c'est idem pour les radios. Le principe étant que si le user coche une case, je puisse récup sa valeur ($row["code"]) pour le traitement final du form, mais que son prix ($row["prix"]) qui s'affiche dans le champ prix en readonly soit additionné aux autres choix selon le même principe et que le total s'inscrive dans le champ total. De telle sorte que le user puisse cocher ou décocher les élèments comme il le souhaite, ce qui fait varier son addition finale.

[Ntilou]

ah ok j'avais pas compris.

mais alors pourquoi y'a t-il plus de checkbox que de boutons radio ?

en fait tu auras ca c'est ca :

une case a cocher avec a coté un prix dans un champ texte,
puis si l'utilisateur coche le bouton radio, le prix correspondant vient s'ajouter au total c'est bien ca ?

[renaud26]

oui les boutons 4 radios représentent un seul élèment à choisir parmi 4. (je pourrais tout aussi bien mettre un select).
Les 7 checkbox (qui peuvent être 10 puisque c'est lu depuis une table) sont tous des params séparés qui peuvent être ou non sélectionnés.
Mais le principe reste le même: quand un radio est coché, son prix vient dans la case "total", puis à chaque checkbox coché, son prix vient s'ajouter aussi.

[Ntilou]

d'accord, donc mon js est bon mais nécessite 2 3 modifs :

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
 
en haut de ta page :
<? $sql = mysql_query("SELECT id, code, nom, classe, prix FROM parametres order by id limit 0,4");
 
$sql2 = mysql_query("SELECT id, code, nom, classe, prix FROM parametres order by id limit 4,11"); ?>
 
<script>
function calcul_form(){
var val_code;
var val_prix;
var val_total;
<? while($row = mysql_fetch_array($sql)){ ?>
if (document.form1.code[<?=$i?>].checked==true){
val_code = parseFloat(document.form1.code[<?=$i?>].value);}
if (!val_code){val_code = 0;}
<? } ?>
<? while($row = mysql_fetch_array($sql2)){ ?>
if (document.form1.prix<?=$i?>.checked==true){
val_prix = eval(val_prix) + (parseFloat(document.form1.prix<?=$i?>.value));}
if (!val_prix){val_prix = 0;}
<? } ?>
val_total = eval(val_code + val_prix);
document.form1.total.value=eval(val_total);
}
</script>

et pour ton affichage :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
 
 
<form name="form1">
<? while($row = mysql_fetch_array($sql1)){
echo "<input type='radio' name='code' value='".$row[prix]."' onClick = 'calcul_form()'>";
 } ?>
<? while($row = mysql_fetch_array($sql2)){
echo "<input type='checkbox' name='prix".$i."' size='3' value='".$row[prix]."' onClick = 'calcul_form()'> ";
 } ?>
<input type="texte" name="total">
</form>

en fait si tu préféres tu utilises ta requete sql1 pour afficher tes checkbox et dans a fonction js il s'agit de la meme requete qui est parcourue pour vérifier le bouton radio qui est coché, et je fé la meme chose avec la requete sql2 pour vérifier et additionner les checkbox sélectionné.

je m'exprime bien ?

[renaud26]

pas facile...

Dans ton code, je comprends pas comment je récup la value des radios et checkbox...

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
 
 
while($row = mysql_fetch_array($sql))
{
//cette première ligne va générer un tableau php que je traiterai au submit
 
echo "<input class='input' type='radio' name='code[]' value='".$row["code"]."' onClick = 'calcul_form()'>
 
//cette 2eme ligne affiche le prix du champ code ci-dessus dans un readonly. c'est cette valeur "prix" qui doit s'ajouter si le user choisit de cocher le radio correspondant.
 
Prix: <input class='input' type='text' name='prix' value='".$row["prix"]."' readonly=''  onClick = 'calcul_form()'> €</td>
}

Si tu veux à l'affichage, le form ressemble à:

NOM | CHOIX | PRIX
item 1 radio 2 (affiché dans le champ prix readonly)
item 2 radio 3
item 3 checkbox 2
item 4 checkbox 3
total text
etc...

si le user coche item 1 puis 3 et 4, je récup leur prix respectif et la case "total" affichera 7...Mais j'ai besoin du champ name=code[] pour le traitement du form.

[Ntilou]

NOM | CHOIX | PRIX
item 1 radio 2 (affiché dans le champ prix readonly)
item 2 radio 3
item 3 checkbox 2
item 4 checkbox 3
total text

ca, ca m'éclaire pas mal mais je ne comprends pas pourquoi tu as radio 2 à l'item 1, puis radio 3 a l'item 2 et la d'un seul coup tu as des checkbox.

dsl d'etre lourd comme ca, mais je pense qu'il y a un truc que j'ai pas saisi et j'essaie de savoir quoi.

tu as pas une url sur laquelle je pourrais voir l'exemple concret sinon ?

[renaud26]

Tu es loin d'être lourd ! Pas d'exemple parce que tout en local et rien de chargé sur le serveur.
Je viens de faire un petit form bidon pour que tu vois...il ne fonctionne pas mais il est explicite. Je l'ai mis vitef sur mon petit site perso, chez Free...alors si ça rame un peu, t'étonnes pas...

FORM TEST

[Ntilou]

salut, j'espère qu'on va y arriver aujourd'hui.

est ce que tu es obligé d'avoir tes crochets dans tes input radio ? ex : prix[].

est ce que name="prix" te dérangeré ?

[renaud26]

Salut, content que tu sois de retour ! mais oui, on va y arriver aujourd'hui ! non, le prix, en fait j'en ai pas besoin, puisque après, au traitement du form, si j'ai le param "code", je retrouve le prix. Je l'affiche dans un champ readonly uniquement pour cette maudite addition !

[Ntilou]

alors voila :

j'ai fé 2 3 modifs : le nom de tes champs prix a été changé : il leur faut un nom différent pour chacun d'eux, et il y va de meme pour tes checkbox (code1, code2, code3 et code4)

j'ai également mis un onchange sur les prix comme ca si tu les change le total est recalculé a nouveau.

et enfin, le total est un readonly.

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
100
101
102
103
104
105
106
107
108
 
 
<html>
<head>
<title>Document sans titre</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script>
function calcul_form(){
var val_code = 0;
var val_prix = 0;
var val_total = 0;
<? for ($i=0;$i<4;$i++){ ?>
if (document.form1.taille[<?=$i?>].checked==true){
val_code = parseFloat(document.form1.prix<?=$i+1?>.value);}
if (!val_code){val_code = 0;}
<? } ?>
if (document.form1.code.checked==true){
val_prix = eval(val_prix) + (parseFloat(document.form1.prix5.value));}
if (document.form1.code1.checked==true){
val_prix = eval(val_prix) + (parseFloat(document.form1.prix6.value));}
if (document.form1.code2.checked==true){
val_prix = eval(val_prix) + (parseFloat(document.form1.prix7.value));}
if (document.form1.code3.checked==true){
val_prix = eval(val_prix) + (parseFloat(document.form1.prix8.value));}
if (!val_prix){val_prix = 0;}
val_total = eval(val_code + val_prix);
document.form1.total.value=eval(val_total);
}
</script>
</head>
<body>
<form name="form1" method="post" action="">
  <table border="0" align="center" cellpadding="2" cellspacing="2">
    <tr> 
      <td><div align="center"><strong>ITEM</strong></div></td>
      <td><div align="center"><strong>CHOIX</strong></div></td>
      <td><div align="center"><strong>PRIX</strong></div></td>
    </tr>
    <tr> 
      <td width="112">Taille Police N&deg;1</td>
      <td width="92"> <div align="center"> 
          <input type="radio" name="taille" value="1" onClick="calcul_form();">
        </div></td>
      <td width="161"> <input name="prix1" type="text" id="prix1" value="2" onchange="calcul_form();"></td>
    </tr>
    <tr> 
      <td>Taille Police N&deg;2</td>
      <td><div align="center"> 
          <input type="radio" name="taille" value="2" onClick="calcul_form();">
        </div></td>
      <td><input name="prix2" type="text" id="prix2" value="2" onchange="calcul_form();"></td>
    </tr>
    <tr> 
      <td>Taille Police N&deg;3</td>
      <td><div align="center"> 
          <input type="radio" name="taille" value="3" onClick="calcul_form();">
        </div></td>
      <td><input name="prix3" type="text" id="prix3" value="2" onchange="calcul_form();"></td>
    </tr>
    <tr> 
      <td>Taille Police N&deg;4</td>
      <td><div align="center"> 
          <input type="radio" name="taille" value="4" onClick="calcul_form();">
        </div></td>
      <td><input name="prix4" type="text" id="prix4" value="2" onchange="calcul_form();"></td>
    </tr>
    <tr> 
      <td>Texte en gras</td>
      <td><div align="center"> 
          <input name="code" type="checkbox" id="code" value="gras" onClick="calcul_form();">
        </div></td>
      <td><input name="prix5" type="text" id="prix5" value="3" onchange="calcul_form();"></td>
    </tr>
    <tr> 
      <td>Texte en italique</td>
      <td><div align="center"> 
          <input name="code1" type="checkbox" id="code1" value="ital" onClick="calcul_form();">
        </div></td>
      <td><input name="prix6" type="text" id="prix6" value="2" onchange="calcul_form();"></td>
    </tr>
    <tr> 
      <td>Texte soulign&eacute;</td>
      <td><div align="center"> 
          <input name="code2" type="checkbox" id="code2" value="soulign" onClick="calcul_form();">
        </div></td>
      <td><input name="prix7" type="text" id="prix7" value="3" onchange="calcul_form();"></td>
    </tr>
    <tr> 
      <td>Texte en couleur</td>
      <td><div align="center"> 
          <input name="code3" type="checkbox" id="code3" value="couleur" onClick="calcul_form();">
        </div></td>
      <td><input name="prix8" type="text" id="prix8" value="4" onchange="calcul_form();"></td>
    </tr>
    <tr> 
      <td colspan="2"><div align="center">TOTAL</div></td>
      <td><input name="total" type="text" id="total" value="total" readonly=""></td>
    </tr>
    <tr> 
      <td colspan="3"><div align="center"> 
          <input type="submit" name="Submit" value="Envoyer">
        </div></td>
    </tr>
  </table>
  <div align="center"></div>
</form>
</body>
</html>

[renaud26]

Yeah !!!!

Je viens de le tester tel quel dans un nouveau doc, ça fonctionne impec. Me reste maintenant à le faire fonctionner en dynamique avec les données issues de la BDD...mais chapeau bas et grand merci pour ce super boulot !
Je te tiens au courant de la suite...