Formulaire calcul prix avec quantité

**kate59** · 27/07/2017, 19h11

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 html :

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

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

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.

**kate59** · 28/07/2017, 11h32

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.

**danielhagnoul** · 28/07/2017, 11h51

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

Exemple :

Code HTML :

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
<!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>

**kate59** · 28/07/2017, 12h25

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 HTML :

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

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.

**danielhagnoul** · 28/07/2017, 15h54

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

Code HTML :

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

**kate59** · 28/07/2017, 16h50

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 :

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

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.

**Loralina** · 29/07/2017, 00h38

Bonjour,

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.

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.

**danielhagnoul** · 29/07/2017, 12h07

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>.

**Loralina** · 29/07/2017, 19h45

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

**danielhagnoul** · 29/07/2017, 22h28

Oui ! Hélas !

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

Code HTML :

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
<!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>

**NoSmoking** · 30/07/2017, 12h25

Bonjour,

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 html :

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

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>

**danielhagnoul** · 31/07/2017, 12h23

Envoyé par NoSmoking

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

Ho oui ! Danger

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.

**kate59** · 01/08/2017, 17h00

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 :

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

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.

**kate59** · 01/08/2017, 17h06

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.

Formulaire calcul prix avec quantité

JavaScript

Vue hybride

Discussions similaires

Partager

Partager