Formulaire calcul prix avec quantité

Version imprimable

Bonjour,

Je cherche à créer un formulaire avec calcul de tarif pour envoyer le calcul du montant total.

J'ai donc créer ce formulaire html :

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
 <form method="post" action="payment.php" name="index" role="form" onsubmit="return checkForm(this);">
 
            <div class="form-group">
              <label for="firstname">Forme :</label>
			  <select name="forme" id="forme">
              <option value="vague">Vague</option>
			  <option value="ile">Ile</option>
			  <option value="dune">Dune</option>
			  </select>
            </div>
 
            <div class="form-group">
			 <label for="firstname">Qte :</label>
             <select name="qte" id="qte">
              <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>
			  <option value="7">7</option>
			  <option value="8">8</option>
			  <option value="9">9</option>
			  <option value="10">10</option>
			  <option value="11">11</option>
			  <option value="12">12</option>
			  <option value="13">13</option>
			  <option value="14">14</option>
			  <option value="15">15</option>
 
			  </select>
            </div>
 
 
<div class="form-group">
              <label for="amount">Amount:</label>
              <input type="number" class="form-control" id="amount" name="amount" placeholder="Amount to pay" required autocomplete="on">
            </div>
</form>

Code javascript qu'il faut optimiser pour mon cas.

Car le soucis est que je doit faire un montant intermédiaire:

Car chaque transats à son propre tarif.

1/ le client choisit le transat un prix doit alors être afficher.
2/ il choisit la quantité
3/le montant total s'affiche en multipliant quantité et le tarif du transat choisi.

Code:

1
2
3
4
5
6
7
8
9
10
11
<script type="text/javascript">
function calculTotal(){
                var prix = Number(document.getElementById("forme").value);
 
                var quantite = Number(document.getElementById("qte").value);
 
                var amount = Number(prix * quantite);
                document.getElementById("amount").value = amount;
            }
 
</script>

Quelqu'un peut-il m'aider ?

Merci.

28/07/2017, 10h32
kate59

mes prix sont fixes pour chaque transat donc aux choix du transat ex :transat dune 1500€, transat vague 1800€.

Donc je ne sais pas comment l'appliquer pour afficher ce prix par rapport au select du transat et le multiplier par la quantité.

Merci.

:salut:

Je ne comprends pas ce qui vous bloque, du coup je me demande si j'ai bien compris la question.

Exemple :

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
<!DOCTYPE html>
<html lang="fr" dir="ltr">
<head>
	<!-- cache-control avec max-age=60 pour le développement uniquement -->
  <meta http-equiv="cache-control" content="public, max-age=60">
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">
  <meta name="author" content="Daniel Hagnoul">
  <title>test</title>
  <style>
    * {
      box-sizing: border-box;
    }
 
                /* code du test */
 
                .form-group {
                        margin: 24px;
                }
                
                /* fin code du test */
                
  </style>
  <script>
    'use strict';
                
    document.addEventListener( "DOMContentLoaded", ev => {
                        
      // code du test
                        
                        
                        // fin code du test
      
    }, false );
    
    window.addEventListener( "load", ev => {
                        
                        // code du test
                        
                        const
                                elemForme = document.querySelector( "#forme" ),
                                elemQte = document.querySelector( "#qte" ),
                                elemAmount = document.querySelector( "#amount" ),
                                changeHandler = ev => {
                                        elemAmount.value = ( parseFloat( elemForme.value ) * parseFloat( elemQte.value ) ).toFixed( 2 );
                                };
                        
                        elemForme.addEventListener( "change", changeHandler, false );
                        elemQte.addEventListener( "change", changeHandler, false );
                        
                        elemQte.dispatchEvent( new Event( "change" ) );
                        
                        // fin code du test
                        
    }, false );
  </script>
</head>
<body>
	<main>
 
		<form>
			<div class="form-group">
				<label for="forme">Forme : </label>
				<select name="forme" id="forme">
					<option value="1514.75">Vague</option>
					<option value="2837.50">Ile</option>
					<option value="3200,25">Dune</option>
				</select>
			</div>
			<div class="form-group">
				<label for="qte">Qte : </label>
				<select name="qte" id="qte">
					<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>
					<option value="7">7</option>
					<option value="8">8</option>
					<option value="9">9</option>
					<option value="10">10</option>
					<option value="11">11</option>
					<option value="12">12</option>
					<option value="13">13</option>
					<option value="14">14</option>
					<option value="15">15</option>
				</select>
			</div>
			<div class="form-group">
				<label for="amount">Amount : </label>
				<output id="amount">
			</div>
		</form>
 
	</main>
</body>
</html>

28/07/2017, 11h25
kate59
Bonjour,

merci pour ton aide le seul soucis est que je souhaite récupérer le prix des formes mais aussi la forme.

C'est cela qui me pose problème
Code:

1 2 3 4 5 <select name="forme" id="forme"> <option value="1514.75">Vague</option> <option value="2837.50">Ile</option> <option value="3200,25">Dune</option> </select>
je voulais aussi faire comme ici mais la je ne récupéré que le prix quand le formulaire sera soumis et pas la forme choisi.

merci encore si tu peux m'aider.

Exemple (dans PHP, on devrait normalement retrouver les valeurs "amount" et "formeChoisie".) :

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
<!DOCTYPE html>
<html lang="fr" dir="ltr">
<head>
	<!-- cache-control avec max-age=60 pour le développement uniquement -->
  <meta http-equiv="cache-control" content="public, max-age=60">
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">
  <meta name="author" content="Daniel Hagnoul">
  <title>test</title>
  <style>
    * {
      box-sizing: border-box;
    }
 
                /* code du test */
 
                .form-group {
                        margin: 24px;
                }
                
                /* fin code du test */
                
  </style>
  <script>
    'use strict';
                
    document.addEventListener( "DOMContentLoaded", ev => {
                        
      // code du test
                        
                        
                        // fin code du test
      
    }, false );
    
    window.addEventListener( "load", ev => {
                        
                        // code du test
                        
                        const
                                elemForme = document.querySelector( "#forme" ),
                                elemQte = document.querySelector( "#qte" ),
                                elemAmount = document.querySelector( "#amount" ),
                                elemFormeChoisie = document.querySelector( "#formeChoisie" ),
                                changeHandler = ev => {
                                        let
                                                datas = elemForme.value.split( "-" );
                                        
                                        elemAmount.value = ( parseFloat( datas[1] ) * parseFloat( elemQte.value ) ).toFixed( 2 );
                                        
                                        elemFormeChoisie.value = datas[0];
                                        
                                        // debug, console, touche F12
                                        //console.log( datas[0], datas[1] );
                                };
                        
                        elemForme.addEventListener( "change", changeHandler, false );
                        elemQte.addEventListener( "change", changeHandler, false );
                        
                        elemQte.dispatchEvent( new Event( "change" ) );
                        
                        // fin code du test
                        
    }, false );
  </script>
</head>
<body>
	<main>
 
		<form name="index">
			<div class="form-group">
				<label for="forme">Forme : </label>
				<select name="forme" id="forme">
					<option value="Vague-1514.75" selected>Vague</option>
					<option value="Ile-2837.50">Ile</option>
					<option value="Dune-3200,25">Dune</option>
				</select>
			</div>
			<div class="form-group">
				<label for="qte">Qte : </label>
				<select name="qte" id="qte">
					<option value="1" selected>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>
					<option value="7">7</option>
					<option value="8">8</option>
					<option value="9">9</option>
					<option value="10">10</option>
					<option value="11">11</option>
					<option value="12">12</option>
					<option value="13">13</option>
					<option value="14">14</option>
					<option value="15">15</option>
				</select>
			</div>
			<div class="form-group">
				<label for="amount">Amount : </label>
				<output name="amount" id="amount"></output>
				<output name="formeChoisie" id="formeChoisie" hidden></output>
			</div>
			<input type="submit">
		</form>
 
	</main>
</body>
</html>

28/07/2017, 15h50
kate59

merci, merci c'est super j'ai rajouter une page de réception pour le la page de test que tu m'a donnée.

j'obtiens donc ceci sur la page de retour avec affiche des GET:

Code:

Array ( [forme] => Vague-1514.75 [qte] => 1 )

J'aurai tout de même un petit soucis c'est que le #amount total n'est pas retourné dans le get.

En faites je dois récupérer les informations sur une page pour les envoyer à paypal.
Donc je sais qu'ils ont besoin la quantités produits ,prix unitaire, le total de commandes, modèle choisi.

Est ce que récupérer les informations par GET n'est pas risqué aussi pour la véracité des données, n'est-ce pas mieux le POST ?

Qu'en pensez-vous ?

merci.
28/07/2017, 23h38
Loralina

Bonjour,

Citation:

Envoyé par kate59

Est ce que récupérer les informations par GET n'est pas risqué aussi pour la véracité des données, n'est-ce pas mieux le POST ?

GET est juste un peu plus direct pour envoyer des données falsifiées, mais la problématique est la même avec POST.
D'où l'importance de faire une vérification complète en php.
En php, on peut mettre les données dans des array et faire des vérifications avec array_key_exists/isset ou in_array selon la présentation des données.

Citation:

J'aurai tout de même un petit soucis c'est que le #amount total n'est pas retourné dans le get.

Si l'élément output n'est pas envoyé, autant refaire les calculs de la même manière en php.
29/07/2017, 11h07
danielhagnoul

Citation:

Envoyé par kate59

[...] J'aurai tout de même un petit soucis c'est que le #amount total n'est pas retourné dans le get. [...]

Pour être transmises en PHP, toutes les valeurs du formulaire doivent avoir un attribut "name".

Dans mon code HTML du message n° 3, j'ai écris : <output id="amount"> ce qui est doublement fautif (pas de "name" et oubli du tag </output>) !

Je l'ai corrigé dans mon code HTML du message n° 5 : <output name="amount" id="amount"></output>.
29/07/2017, 18h45
Loralina

Bonjour,
Après essai du code, les éléments output ne semblent pas envoyés, que ce soit en GET ou en POST.

:aie: Oui ! Hélas ! :aie:

Il faut mettre les mains dans le cambouis pour construire le JSON à transmettre au serveur, exemple :

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
<!DOCTYPE html>
<html lang="fr" dir="ltr">
<head>
	<!-- cache-control avec max-age=60 pour le développement uniquement -->
  <meta http-equiv="cache-control" content="public, max-age=60">
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no">
  <meta name="author" content="Daniel Hagnoul">
  <title>test</title>
  <style>
    * {
      box-sizing: border-box;
    }
 
                /* code du test */
                
                
                /* fin code du test */
                
  </style>
  <script>
    'use strict';
                
    document.addEventListener( "DOMContentLoaded", ev => {
                        
      // code du test
                        
                        
                        // fin code du test
      
    }, false );
    
    window.addEventListener( "load", ev => {
                        
                        // code du test
                        
                        const
                                elemNumber = document.querySelector( "#myForm > input[type='number']" ),
                                elemValeur = document.querySelector( "#myForm > output[name='valeur']" ),
                                elemMyForm = document.querySelector( "#myForm" );
                        
                        // calcul de la valeur de l'output
                        elemNumber.addEventListener( "change", ev => {
                                elemValeur.value = ( parseFloat( ev.target.value / 2.75 ) ).toFixed(2);
                        }, false );
                        
                        // forcer le calcul à l'ouverture de la page web
                        elemNumber.dispatchEvent( new Event( "change" ) );
                        
                        // submit
                        elemMyForm.addEventListener( "submit", ev => {
                                ev.stopPropagation();
                                ev.preventDefault();
                                
                                const
                                        datas = {}, // objet JS
                                        formDatas = new FormData( elemMyForm ); // serialize myForm
                                
                                // transformation du résultat en objet JS
                                for ( const [ key, value ] of formDatas.entries() ){
                                        datas[ key ] = value;
                                }
                                
                                // ajout de la valeur de l'output
                                datas[ elemValeur.name ] = elemValeur.value;
                                
                                // conversion en JSON
                                const jsonString = JSON.stringify( datas );
                                
                                // debug
                                console.log( jsonString );
                                
                        }, false );
                        
                        // fin code du test
                        
    }, false );
  </script>
</head>
<body>
	<main>
 
		<form id="myForm">
			<input name="nombre" type="number" min="20" max="80" step="5" value="35">
			<output name="valeur"></output>
			<input type="submit">
		</form>
 
	</main>
</body>
</html>

Bonjour,

Citation:

Envoyé par kate59

Je cherche à créer un formulaire avec calcul de tarif pour envoyer le calcul du montant total.

le calcul du montant total est à faire coté serveur. Coté client c'est juste un plus informatif.

Concernant la balise <output>, non reconnu actuellement par IE, l'exemple d'utilisation issu de HTML: The Living Standard est assez parlant, je le reporte ci-dessous.
Code:

1 2 3 4 5 <form onsubmit="return false" oninput="o.value = a.valueAsNumber + b.valueAsNumber"> <input name=a type=number step=any> + <input name=b type=number step=any> = <output name=o for="a b"></output> </form>

31/07/2017, 11h23
danielhagnoul

Citation:

Envoyé par NoSmoking

Bonjour,
le calcul du montant total est à faire coté serveur. Coté client c'est juste un plus informatif.[...]

Ho oui ! Danger :kill:

C'est à la portée du premier venu, s'il a une connaissance basique des outils du développeur (touche F12), de modifier les valeurs calculées d'un formulaire avant de le soumettre. C'est pourquoi il faut toujours faire toutes les vérifications côté serveur.

Cela veut-il dire qu'il est inutile de rapatrier les valeurs calculées ? Non ! Car cela vous permet de comparer les valeurs calculées des deux côtés et en cas de divergence d'informer l'utilisateur qu'il y a une "embrouille" et qu'il doit recommencer ses choix et la soumission du formulaire.
01/08/2017, 16h00
kate59

Bonjour,

J'ai essayé le code suivant avec donc le name et c'est vrai j'aurai du aussi le voir malheuresement cela ne change pas il n'est pas retourné ?

Code:

Array ( [forme] => Vague-1514.75 [qte] => 2 ) Array ( )

Par contre en lisant tout vos aides et encore merci je constate que cette solution ne va pas fonctionner sur ie.

Est ce que vous me conseillerai une solution avec ie.

Merci.
01/08/2017, 16h06
kate59

On m'a proposé cela
http://marcautran.developpez.com/tut...script/panier/

pensez vous que je puisse l'adapter à ma situation mettre les identifiants mettre les formes par ex et que le tarif soit automatique ?

MERCI.