Calcul dans un formulaire html

**bernardmichel** · 23/09/2009, 11h49

Bonjour,

Débutant (de chez débutant) en html et tout ce qui touche à la conception de sites, je suis en trains d'organiser un séjour thématique et je souhaiterais donner le choix des activité à mes hôtes.
J'ai donc besoin d'un formulaire dans lequel les internautes choisissent les activités auxquelles ils souhaitent participer et j'aimerais qu'au fur et à mesure qu'ils font leurs choix, les tarifs respectifs aux activités s'affichent ainsi que le prix global de tous leurs choix pour ce séjour.
Je cherche depuis un certain temps maintenant si je trouve quelque chose et j'essaye différents bouts de codes trouvés ici ou là mais... rien ne fonctionne vraiment.
Voici le mini bout de code (c'est juste un essai, non pas un extrait de ma page Web) sur lequel je m'acharne... et qui ne fonctionne pas.

Si une âme charitable veut bien éclairer ma lanterne....

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
<html>
 
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>Formulaire d'inscription</title>
</head>
 
<body>
 
	<script> 
      function CalForfait() {
      var PrixForfait=410
      var NbForfait=document.Reservation.D1
      var resultat=PrixForfait*NbForfait;
      document.Reservation.CaseTotForfaits.value = CalForfait();
      }     
        </script>
 
 
	<p>&nbsp;</p>
	<form name="Reservation">
	<form method="POST" action="--WEBBOT-SELF--">
		<!--webbot bot="SaveResults" U-File="fpweb:///_private/form_results.csv" S-Format="TEXT/CSV" S-Label-Fields="TRUE" B-Reverse-Chronology="FALSE" S-Email-Format="TEXT/PRE" S-Email-Address="bernard@laribaude.fr" B-Email-Label-Fields="FALSE" S-Builtin-Fields -->
		<p><select size="1" name="D1" onChange="CalForfait()">>
			<option value="1">1</option>
			<option value="2">2</option>
		</select><input type="text" name="CaseTotForfaits" size="20" value="0"></p>
			<p><input type="submit" value="Envoyer" name="B1"><input type="reset" value="Rétablir" name="B2"></p>
	</form>
	<p>&nbsp;</p>

Un grand merci d'avance.
Bernard.

**sebhm** · 23/09/2009, 12h19

Bonjour,

il faut commencer par rétablir un bon code XHTML, c'est à dire bien fermer toutes les balises, et ne pas faire de chevauchement :

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
	<form name="Reservation" method="POST" action="--WEBBOT-SELF--">
		<p>
      <select size="1" name="D1" onChange="CalForfait()">>
  			<option value="1">1</option>
  			<option value="2">2</option>
		  </select>
 
      <input type="text" name="CaseTotForfaits" size="20" value="0">
    </p>
 
		<p>
      <input type="submit" value="Envoyer" name="B1">
      <input type="reset" value="Rétablir" name="B2">
    </p>
 
	</form>

je connais pas '--WEBBOT-SELF--', c'est quoi ?

ensuite, pour afficher le prix total de l'activité, tu es dans la bonne direction mais je préfère personnellement utiliser des ID.
Donc, je mets un ID à tout le monde :

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
	<form name="Reservation" method="POST" action="--WEBBOT-SELF--">
		<p>
      <select size="1" name="D1" id="D1" onChange="CalForfait()">>
  			<option value="1">1</option>
  			<option value="2">2</option>
		  </select>
 
      <input type="text" name="CaseTotForfaits" id="CaseTotForfaits" size="20" value="0">
    </p>
 
		<p>
      <input type="submit" value="Envoyer" name="B1">
      <input type="reset" value="Rétablir" name="B2">
    </p>
 
	</form>

et le code Javascript donne

Code :

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

1
2
3
4
5
6
7
8
<script> 
    function CalForfait() {
      var PrixForfait=410;
      var NbForfait=parseInt(document.getElementById('D1').value);
      var resultat=PrixForfait*NbForfait;
      document.getElementById('CaseTotForfaits').value = resultat;
    }     
</script>

PrixForfait est fixe pour tous les forfaits ??
sinon, tu peux le mettre aussi dans ton form dans un INPUT, en le cachant si nécessaire.

Bon, j'ai rien testé mais ca doit être un truc comme ca...

bon courage

**bernardmichel** · 23/09/2009, 12h46

Génial et merci pour ta rapide intervention

Je vais tester tout cela ce soir à tête reposée. Bon après-midi à toi !

**bernardmichel** · 23/09/2009, 15h22

re...

J'ai terminé bien avant mon occupation, j'ai aussitôt sauté sur l'occasion d'essayer ton code : S U P E R !!! ça marche du premier coup !

Concernant le '--WEBBOT-SELF--', c'est frontpage qui m'a mis cela au moment où j'ai inséré un formulaire sur ma page... le code qui vient après est le suivant:

Code :

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

1
2
3
4
<form method="POST" action="--WEBBOT-SELF--">
		<!--webbot bot="SaveResults" U-File="fpweb:///_private/form_results.csv" S-Format="TEXT/CSV" S-Label-Fields="TRUE" -->
		<fieldset style="width: 1020px; height: 167px; padding: 2">
		<legend>Vos coordonnées</legend>

Voilà, si tu t'y retrouves ???

Alors, pour revenir à mon problème, j'ai un tout petit peu développé et j'ai inséré un autre champ (si c'est le bon mode de faire, je le ferai pour chaque champ de mon formulaire, ~15. Si, tu vois autre chose, merci de me le signaler

Tu verras, j'ai également essayé une fonction de somme sur mes deux champs créés... est-ce la bonne méthode et, si oui, comment l'appeler à chaque modification faite par l'utilisateur ??

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
<html>
 
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>Formulaire d'inscription</title>
</head>
 
<body>
 
<script>
        function MainTot() {
                var Stage=paseint(document.getElementById('CaseTotForfaits').value;
                var Danse=paseint(document.getElementById('CaseTotStage').value;
                var MainResult=Stage+Danse
                document.getElementById('CaseMainTot').value = MainResult
</script>
 
<script> 
        function CalForfait() {
        var PrixForfait=410;
        var NbForfait=parseInt(document.getElementById('D1').value);
        var resultat=PrixForfait*NbForfait;
        document.getElementById('CaseTotForfaits').value = resultat;
        }     
</script>
 
<script> 
        function CalStage() {
        var PrixStage=40;
        var NbForfait=parseInt(document.getElementById('D2').value);
        var Danse=PrixStage*NbForfait;
        document.getElementById('CaseTotStage').value = Danse;
        }     
</script>
 
 
<form name="Reservation" method="POST" action="--WEBBOT-SELF--">
	<p>
    	<select size="1" name="D1" onChange="CalForfait()">>
  			<option value="1">1</option>
  			<option value="2">2</option>
		 </select>
 
   		<input type="text" name="CaseTotForfaits" id="CaseTotForfaits" size="20" value="0">    
   	</p>
 
	<p>
    	<select size="1" name="D2" onChange="CalStage()">>
  			<option value="1">1</option>
  			<option value="2">2</option>
		 </select>
 
   		<input type="text" name="CaseTotStage" id="CaseTotStage" size="20" value="0">    
   	</p>
 
	<p>
    	Total du prix de votre stage :
 
   		<input type="text" name="CaseMainTot" id="CaseTotStage0" size="20" value="0"></p>
 
	<p>
      	<input type="submit" value="Envoyer" name="B1">
      	<input type="reset" value="Rétablir" name="B2">
    </p>
 
</form>

Re-merci d'avance

**Macmillenium** · 23/09/2009, 15h46

Bonjour,

Petite remarque au passage, il me semble que tu n'as pas de doctype, tu es donc en mode Quirks.

**sebhm** · 23/09/2009, 16h41

et oui mode Gros Quick, c'est la faute à Frontpage (j'y suis allergique, tout comme Dreamweaver ,mais il parait qu'ils ont fait des progres, faut dire que j'y ai pas touché depuis la version 5... mais tout le monde s'en fiche

)

l'attribut "action" de la balise "form" sert à indiquer la page de destination, c'est à dire celle qui va traiter les données quand l'utilisateur va valider le formulaire.
Donc je vois pas ce que "--WEBBOT-SELF--" signifie, mais c'est pas tres grave pour l'instant.

Les ID ont disparus des champs SELECT, ca marche quand meme le GetElementById('D1') ??

Tu n'es pas obligé de répéter les balises <script>, une <script> au début et une </script> à la fin

Pour ta fonction somme :
c'est parseInt (pas paseint) => fonction qui va verifier que tu as bien un entier dans ta variable (majuscules importantes)
Apres, pour l'appeler à chaque modif, c'est simple :
à la fin des fonctions CalForfait et CalStage, tu appelles ta fonction somme en faisant

Code :

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

1
2
3
4
5
6
7
8
function CalForfait() {
    	var PrixForfait=410;
      	var NbForfait=parseInt(document.getElementById('D1').value);
      	var resultat=PrixForfait*NbForfait;
      	document.getElementById('CaseTotForfaits').value = resultat;
 
        MainTot();
  	}

**bernardmichel** · 23/09/2009, 22h29

Bonsoir sebhm...

Merci pour tes infos, j'ai appliqué ce que j'ai compris dans ce que tu me disais dans ton message mais cela ne marche pas... Où est-ce que j'ai fait l'erreur ?

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
<html>
 
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
  "http://www.w3.org/TR/html4/strict.dtd">
 
 
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>Formulaire d'inscription</title>
</head>
 
<body>
 
<script>
        function MainTot() {
                var Stage=parseInt(document.getElementById('CaseTotForfaits').value);
                var Danse=parseInt(document.getElementById('CaseTotStage').value);
                var MainResult=Stage+Danse
                document.getElementById('CaseMainTot').value = MainResult
                }
 
        function CalForfait() {
        var PrixForfait=410;
        var NbForfait=parseInt(document.getElementById('D1').value);
        var resultat=PrixForfait*NbForfait;
        document.getElementById('CaseTotForfaits').value = resultat;
        MainTot;
        }     
 
        function CalStage() {
        var PrixStage=40;
        var NbForfait=parseInt(document.getElementById('D2').value);
        var Danse=PrixStage*NbForfait;
        document.getElementById('CaseTotStage').value = Danse;
        MainTot;
        }     
</script>
 
 
<form name="Reservation" method="POST" action="--WEBBOT-SELF--">
	<p>
    	<select size="1" name="D1" onChange="CalForfait()">>
  			<option value="1">1</option>
  			<option value="2">2</option>
  			<option value="3">3</option>
  			<option value="4">4</option>
  			<option value="5">5</option>
  			<option value="6">6</option>
		 </select>      
 
   		<input type="text" name="CaseTotForfaits" id="CaseTotForfaits" size="20" value="0">    
   	</p>
 
	<p>
    	<select size="1" name="D2" onChange="CalStage()">>
  			<option value="1">1</option>
  			<option value="2">2</option>
  			<option value="3">3</option>
  			<option value="4">4</option>
  			<option value="5">5</option>
  			<option value="6">6</option>
		 </select>
 
   		<input type="text" name="CaseTotStage" id="CaseTotStage" size="20" value="0">    
   	</p>
 
	<p>
    	Total du prix de votre stage :
 
   		<input type="text" name="CaseMainTot" id="CaseMainTot" size="20" value="0"></p>
 
	<p>
      	<input type="submit" value="Envoyer" name="B1">
      	<input type="reset" value="Rétablir" name="B2">
    </p>
 
</form>