Formulaire calcul Prix TTC

**linuxien_62** · 18/06/2013, 10h26

Bonjour,

J'ai une question toute gentille pour vous je pense mais qui me rendrait service.

J'ai un formulaire dans lequel je fais saisir un prix HT. Hors pour l'heure il faut que l'utilisateur remplisse aussi à la main le prix en TTC.

Ce que j'aimerais c'est que lorsque l'utilisateur saisi le prix HT, le champ TTC est remplit après un calcul avec la TVA 19.6 d'appliqué.

Je vous mets le formulaire en question. (J'utilise le model MVC, en JEE même si je pense que ça n'ai pas utile de le préciser car à mon avis c'est du côté JSP "VUE" qu'il va falloir se pencher à mon avis...)

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
  <form id="formAjoutArticle" name="formAjoutArticle" method="post" action="ajouter_article">
          <p style="color: red">${formArticle.erreurs['numero_serie_article']}</p>
          <label for="numero_rma">
          <div align="justify">numRMA <em style="color: red">*</em></div>
          </label>
          <div align="justify">
            <input type="text" name="numero_rma" id="numero_rma" tabindex="0" />
          </div>
          <label for="numero_serie_article">
          <div align="justify">numeroSérie <em style="color: red">*</em></div>
          </label>
          <div align="justify">
            <input type="text" name="numero_serie_article" id="numero_serie_article" tabindex="1" />  
          </div>
 
          <label for="date_achat_brut_article">
          <div align="justify">dâteAchatBrut <em style="color: red">*</em></div>
          </label>
          <div align="justify">
            <input type="text" name="date_achat_brut_article" id="date_achat_brut_article" tabindex="2" />  
          </div>
          <label for="code_fournisseur_article">
          <div align="justify">codeFournisseur <em style="color: red">*</em></div>
          </label>
          <div align="justify">
            <input type="text" name="code_fournisseur_article" id="code_fournisseur_article" tabindex="3" />  
          </div>
          <label for="code_magasin_article">
          <div align="justify">codeMagasin <em style="color: red">*</em></div>
          </label>
          <div align="justify">
            <input type="text" name="code_magasin_article" id="code_magasin_article" tabindex="4" />  
          </div>
          <label for="prix_achat_ht_article">
          <div align="justify">prixAchatHT <em style="color: red">*</em></div>
          </label>
          <div align="justify">
            <input type="text" name="prix_achat_ht_article" id="prix_achat_ht_article" tabindex="5" />  
          </div>
          <label for="prix_vente_article">
          <div align="justify">prixVenteHT <em style="color: red">*</em></div>
          </label>
          <div align="justify">
            <input type="text" name="prix_vente_article" id="prix_vente_article" tabindex="6" />  
          </div>
          <label for="categorie_article">
          <div align="justify">catégorie <em style="color: red">*</em></div>
          </label>
          <div align="justify">
            <select name="categorie_article" id="categorie_article" tabindex="7">
            	<option value="0">Aucun</option>
    			<c:forEach var="resultatCategorieArticle" items="${requestScope['ATT_CATEGORIE_ARTICLE']}">
    		 	<option value="${resultatCategorieArticle.id_categorie}"> ${resultatCategorieArticle.nom_categorie}</option>
    			</c:forEach>
 
            </select>
          </div>
          <label for="designation_article">
          <div align="justify">désignation <em style="color: red">*</em></div>
          </label>
          <div align="justify">
            <textarea name="designation_article" id="designation_article" cols="45" rows="5" tabindex="8"></textarea>
          </div>
          <label for="label">
          <div align="justify">prixVenteTTC<em style="color: red">*</em></div>
          </label>
          <div align="justify">
            <input type="text" name="prix_vente_article_ttc" id="label" tabindex="9" /> 
            <label for="enregistrer_article"></label>
            <p>&nbsp;            </p>
            <p align="center">
              <input type="submit" name="enregistrer_article" id="enregistrer_article" value="Enregistrer" tabindex="6" />
            </p>
            <p>${formArticle.resultat}</p>
          </div>
        </form>

**ludomacho** · 18/06/2013, 22h56

Bonjour,

Un petit coup de javaScript me parait être la bonne solution

**DevServlet** · 19/06/2013, 09h38

Bonjour,
Pour faire court,

Code :

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

 <input type="text" name="prix_achat_ht_article" id="prix_achat_ht_article" tabindex="5" onblur="javascript:document.getElementById('prix_vente_article').value=this.value*TVA;"/>

Pour moi ce champ calculé devrait un simple libellé plutot qu'un champ en saisie libre. A moins qu'il soit autorisé à l'utilsateur de saisir directement le prix TTC afin qu'on calcule automatiquement le prix HT.

**linuxien_62** · 19/06/2013, 14h43

Bonjour,

Merci pour vos réponse, en effet je compte mettre le champ de saisi Prix TTC, en simple libellé. J'avais mis en champ de saisi afin de pouvoir faire mes tests durant le développement.

Je test ça. Et si cela fonctionne je mets en résolu.

**linuxien_62** · 27/06/2013, 12h13

j'ai fait ça et ca ne marche pas quand je perds le focus du champ prix_vente_article le champ TTC ne se mets pas à jour.

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
   <div align="justify">prix Vente HT <em style="color: red">*</em></div>
          </label>
          <div align="justify">
          <input type="text" name="prix_vente_article" id="prix_vente_article" tabindex="8" onblur="javascript:document.getElementById('prix_vente_article_ttc').value=this.value*1.196;"/>
         <!--  <input type="text" name="prix_vente_article" id="prix_vente_article" tabindex="8" />  --> 
          </div>
          <label for="categorie_article">
          <div align="justify">catégorie <em style="color: red">*</em></div>
          </label>
          <div align="justify">
            <select name="categorie_article" id="categorie_article" tabindex="9">
            	<option value="0">Aucun</option>
    			<c:forEach var="resultatCategorieArticle" items="${requestScope['ATT_CATEGORIE_ARTICLE']}">
    		 	<option value="${resultatCategorieArticle.id_categorie}"> ${resultatCategorieArticle.nom_categorie}</option>
    			</c:forEach>
 
            </select>
          </div>
          <label for="designation_article">
          <div align="justify">désignation <em style="color: red">*</em></div>
          </label>
          <div align="justify">
            <textarea name="designation_article" id="designation_article" cols="45" rows="5" tabindex="10"></textarea>
          </div>
          <label for="label">
          <div align="justify">prix Vente TTC<em style="color: red">*</em></div>
          </label>
          <div align="justify">
            <input type="text" name="prix_vente_article_ttc" id="label" tabindex="11" /> 
            <label for="enregistrer_article"></label>
            <p>&nbsp;            </p>
            <p align="center">
              <input type="submit" name="enregistrer_article" id="enregistrer_article" value="Enregistrer" tabindex="12" />
            </p>
            <p>${formArticle.resultat}</p>
          </div>

HELP plz :'(

**DevServlet** · 27/06/2013, 14h09

Bonjour,

On va y aller progressivement, essaie un peu ça :

Code :

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

onblur="javascript:alert('Passage OK')"

.
ça donne quoi?

**linuxien_62** · 03/07/2013, 13h41

Salut et merci encore pour ton aide,

lorsque je test ton bout de code, j'ai bien la popup, passage ok.

Maintenant que dois je ?

**linuxien_62** · 03/07/2013, 13h47

je me permets de te joindre mon code complet de la page JSP au cas où.

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
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
 
<%@ page contentType="text/html; charset=utf-8" language="java" import="java.sql.*" errorPage="" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<title>Ajout Article</title>
<c:import url="HeaderCalendrier.jsp"></c:import>
<c:import url="style.jsp"></c:import>
</head>
 
<body class="oneColFixCtrHdr">
 
    <div id="container">
      <div id="header">
        <h1><img src="images/bandeau.png" width="756" height="169" /></h1>
      <!-- fin de #header --></div>
      <div id="mainContent">
		<c:import url="menu.jsp"></c:import>
 
        <div align="center"></div>
        <h1>&nbsp;</h1>
        <fieldset>
        <legend>Ajout Article</legend>
        </br>
        <form id="formAjoutArticle" name="formAjoutArticle" method="post" action="ajouter_article">
          <p style="color: red">${formArticle.erreurs['numero_serie_article']}</p>
          <label for="numero_rma">
          <div align="justify">numéro RMA <em style="color: red">*</em></div>
          </label>
          <div align="justify">
            <input type="text" name="numero_rma" id="numero_rma" tabindex="1" />
          </div>
          <label for="numero_serie_article">
          <div align="justify">numéro Série <em style="color: red">*</em></div>
          </label>
          <div align="justify">
            <input type="text" name="numero_serie_article" id="numero_serie_article" tabindex="2" />  
          </div>
 
          <label for="date_achat_brut_article">
          <div align="justify">date Achat Brut <em style="color: red">*</em></div>
          </label>
          <div align="justify">
            <input type="text" name="date_achat_brut_article" id="date_achat_brut_article" tabindex="3" onclick="var date = new calendar(this);"/>  
          </div>
          <label for="code_fournisseur_article">
          <div align="justify">code Fournisseur <em style="color: red">*</em></div>
          </label>
          <div align="justify">
            <input type="text" name="code_fournisseur_article" id="code_fournisseur_article" tabindex="4" />  
          </div>
 
          <label for="nom_fournisseur">
          <div align="justify">nom fournisseur <em style="color: red">*</em></div>
          </label>
          <div align="justify">
            <input type="text" name="nom_fournisseur" id="nom_fournisseur" tabindex="5" />  
          </div>
 
          <label for="code_magasin_article">
          <div align="justify">code Magasin <em style="color: red">*</em></div>
          </label>
          <div align="justify">
            <input type="text" name="code_magasin_article" id="code_magasin_article" tabindex="6" />  
          </div>
          <label for="prix_achat_ht_article">
          <div align="justify">prix Achat HT <em style="color: red">*</em></div>
          </label>
          <div align="justify">
            <input type="text" name="prix_achat_ht_article" id="prix_achat_ht_article" tabindex="7" />  
          </div>
          <label for="prix_vente_article">
          <div align="justify">prix Vente HT <em style="color: red">*</em></div>
          </label>
          <div align="justify">
 
         <!-- probleme ici !! -->
         <!--  <input type="text" name="prix_vente_article" id="prix_vente_article" tabindex="8" onblur="javascript:document.getElementById('prix_vente_article_ttc').value=this.value*1.196;"/>  -->
           <input type="text" name="prix_vente_article" id="prix_vente_article" tabindex="8" onblur="javascript:alert('Passage OK')" />  
 
          </div>
          <label for="categorie_article">
          <div align="justify">catégorie <em style="color: red">*</em></div>
          </label>
          <div align="justify">
            <select name="categorie_article" id="categorie_article" tabindex="9">
            	<option value="0">Aucun</option>
    			<c:forEach var="resultatCategorieArticle" items="${requestScope['ATT_CATEGORIE_ARTICLE']}">
    		 	<option value="${resultatCategorieArticle.id_categorie}"> ${resultatCategorieArticle.nom_categorie}</option>
    			</c:forEach>
 
            </select>
          </div>
          <label for="designation_article">
          <div align="justify">désignation <em style="color: red">*</em></div>
          </label>
          <div align="justify">
            <textarea name="designation_article" id="designation_article" cols="45" rows="5" tabindex="10"></textarea>
          </div>
          <label for="label">
          <div align="justify">prix Vente TTC<em style="color: red">*</em></div>
          </label>
          <div align="justify">
            <input type="text" name="prix_vente_article_ttc" id="label" tabindex="11" /> 
            <label for="enregistrer_article"></label>
            <p>&nbsp;            </p>
            <p align="center">
              <input type="submit" name="enregistrer_article" id="enregistrer_article" value="Enregistrer" tabindex="12" />
            </p>
            <p>${formArticle.resultat}</p>
          </div>
        </form>
        <p>&nbsp;</p>
        </fieldset>
        <p>&nbsp;</p>
        <p>&nbsp;</p>
        <h2>&nbsp;</h2>
      <!-- fin de #mainContent --></div>
      <div id="footer">
        <p>&nbsp;</p>
        <!-- fin de #footer --></div>
    <!-- fin de #container --></div>
    <script type="text/javascript">
<!--
var MenuBar1 = new Spry.Widget.MenuBar("MenuBar1", {imgDown:"SpryAssets/SpryMenuBarDownHover.gif", imgRight:"SpryAssets/SpryMenuBarRightHover.gif"});
//-->
    </script>
</body>
</html>

C'est assez limitant d'avoir étudié du java, jee, sans les langages client ^^
Va falloir que je m'y mette ... :p merci encore

**DevServlet** · 03/07/2013, 14h50

Bonjour,
Remplace donc par ça :

Code :

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

onblur="javascript:refreshPrixTTC().value=this.value*1.196;"

Et la fonction ressemblerait à ça :

Code :

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

1
2
3
4
5
6
7
8
9
 
<SCRIPT language="Javascript">
function    refreshPrixTTC() {
valueChampPrixHT = document.getElementById('prix_vente_article').value;
valueChampPrixTTC = valueChampPrixHT *19.6;
document.getElementById('prix_vente_article_ttc').value=valueChampPrixTTC;
}
 
</SCRIPT>

**linuxien_62** · 05/07/2013, 10h09

Salut ,

ça ne marche toujours pas, voici le code complet de la jsp. (tu peux même la test chez toi normalement vue que c'est un formulaire standard.)

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
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
<%@ page contentType="text/html; charset=utf-8" language="java" import="java.sql.*" errorPage="" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<title>Ajout Article</title>
<c:import url="HeaderCalendrier.jsp"></c:import>
<c:import url="style.jsp"></c:import>
 
<SCRIPT language="Javascript">
function    refreshPrixTTC() {
valueChampPrixHT = document.getElementById('prix_vente_article').value;
valueChampPrixTTC = valueChampPrixHT *19.6;
document.getElementById('prix_vente_article_ttc').value=valueChampPrixTTC;
}
 
</SCRIPT>
</head>
 
<body class="oneColFixCtrHdr">
 
    <div id="container">
      <div id="header">
        <h1><img src="images/bandeau.png" width="756" height="169" /></h1>
      <!-- fin de #header --></div>
      <div id="mainContent">
		<c:import url="menu.jsp"></c:import>
 
        <div align="center"></div>
        <h1>&nbsp;</h1>
        <fieldset>
        <legend>Ajout Article</legend>
        </br>
        <form id="formAjoutArticle" name="formAjoutArticle" method="post" action="ajouter_article">
          <p style="color: red">${formArticle.erreurs['numero_serie_article']}</p>
          <label for="numero_rma">
          <div align="justify">numéro RMA <em style="color: red">*</em></div>
          </label>
          <div align="justify">
            <input type="text" name="numero_rma" id="numero_rma" tabindex="1" />
          </div>
          <label for="numero_serie_article">
          <div align="justify">numéro Série <em style="color: red">*</em></div>
          </label>
          <div align="justify">
            <input type="text" name="numero_serie_article" id="numero_serie_article" tabindex="2" />  
          </div>
 
          <label for="date_achat_brut_article">
          <div align="justify">date Achat Brut <em style="color: red">*</em></div>
          </label>
          <div align="justify">
            <input type="text" name="date_achat_brut_article" id="date_achat_brut_article" tabindex="3" onclick="var date = new calendar(this);"/>  
          </div>
          <label for="code_fournisseur_article">
          <div align="justify">code Fournisseur <em style="color: red">*</em></div>
          </label>
          <div align="justify">
            <input type="text" name="code_fournisseur_article" id="code_fournisseur_article" tabindex="4" />  
          </div>
 
          <label for="nom_fournisseur">
          <div align="justify">nom fournisseur <em style="color: red">*</em></div>
          </label>
          <div align="justify">
            <input type="text" name="nom_fournisseur" id="nom_fournisseur" tabindex="5" />  
          </div>
 
          <label for="code_magasin_article">
          <div align="justify">code Magasin <em style="color: red">*</em></div>
          </label>
          <div align="justify">
            <input type="text" name="code_magasin_article" id="code_magasin_article" tabindex="6" />  
          </div>
          <label for="prix_achat_ht_article">
          <div align="justify">prix Achat HT <em style="color: red">*</em></div>
          </label>
          <div align="justify">
            <input type="text" name="prix_achat_ht_article" id="prix_achat_ht_article" tabindex="7" />  
          </div>
          <label for="prix_vente_article">
          <div align="justify">prix Vente HT <em style="color: red">*</em></div>
          </label>
          <div align="justify">
 
         <!-- probleme ici !! -->
         <input type="text" name="prix_vente_article" id="prix_vente_article" tabindex="8" onblur="javascript:refreshPrixTTC().value=this.value*1.196;"/>  
         <!--  <input type="text" name="prix_vente_article" id="prix_vente_article" tabindex="8" onblur="javascript:alert('Passage OK')" />   -->
 
          </div>
          <label for="categorie_article">
          <div align="justify">catégorie <em style="color: red">*</em></div>
          </label>
          <div align="justify">
            <select name="categorie_article" id="categorie_article" tabindex="9">
            	<option value="0">Aucun</option>
    			<c:forEach var="resultatCategorieArticle" items="${requestScope['ATT_CATEGORIE_ARTICLE']}">
    		 	<option value="${resultatCategorieArticle.id_categorie}"> ${resultatCategorieArticle.nom_categorie}</option>
    			</c:forEach>
 
            </select>
          </div>
          <label for="designation_article">
          <div align="justify">désignation <em style="color: red">*</em></div>
          </label>
          <div align="justify">
            <textarea name="designation_article" id="designation_article" cols="45" rows="5" tabindex="10"></textarea>
          </div>
          <label for="label">
          <div align="justify">prix Vente TTC<em style="color: red">*</em></div>
          </label>
          <div align="justify">
            <input type="text" name="prix_vente_article_ttc" id="label" tabindex="11" /> 
            <label for="enregistrer_article"></label>
            <p>&nbsp;            </p>
            <p align="center">
              <input type="submit" name="enregistrer_article" id="enregistrer_article" value="Enregistrer" tabindex="12" />
            </p>
            <p>${formArticle.resultat}</p>
          </div>
        </form>
        <p>&nbsp;</p>
        </fieldset>
        <p>&nbsp;</p>
        <p>&nbsp;</p>
        <h2>&nbsp;</h2>
      <!-- fin de #mainContent --></div>
      <div id="footer">
        <p>&nbsp;</p>
        <!-- fin de #footer --></div>
    <!-- fin de #container --></div>
    <script type="text/javascript">
<!--
var MenuBar1 = new Spry.Widget.MenuBar("MenuBar1", {imgDown:"SpryAssets/SpryMenuBarDownHover.gif", imgRight:"SpryAssets/SpryMenuBarRightHover.gif"});
//-->
    </script>
</body>
</html>

Le code javaScript ne fait rien, à la selection ou autre, je veux juste qu'il me mets le champ "prix_vente_article_ttc" à jour avec la TVA appliquée à 19.6. En prenant la valeur du champ "prix_vente_article" pour le calcul car lui est le prix de vente HT.

**linuxien_62** · 05/07/2013, 11h34

C'est bon, j'ai trouvé mes erreurs. En fait il y avait une erreur au niveau de mon id dans le champ input. Ensuite dans la formule pour calculer le prix TTC, et j'ai fait une petite fonction du coup pour arrondir au centième mon prix TTC.

Merci pour le coup de pousse.

Formulaire calcul Prix TTC

Développement Web en Java

Discussions similaires

Partager

Partager