Calcul dans un formulaire html

Version imprimable

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:

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> </p> <form name="Reservation"> <form 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> <p> </p>
Un grand merci d'avance.
Bernard.

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:

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:

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:

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

23/09/2009, 12h46
bernardmichel

Génial et merci pour ta rapide intervention ;)

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

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:

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:

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 ;)

23/09/2009, 15h46
Macmillenium

Bonjour,

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

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 :aie: )

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:

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(); }

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:

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>

et... que faut-il mettre en lieu et place de ce fameux "--WEBBOT-SELF--" ?

Un tout grand merci d'avance !!
8O

23/09/2009, 23h19
bernardmichel

Tout est ok, j'avais simplement oublié les "()" après l'appel de la fonction MainTot()

Vous êtes géniaux, merci les gars !
24/09/2009, 11h43
sebhm

à la place de '--WEBBOT-SELF--', tu mets la page qui recevra le formulaire apres sa validation