Calcul tva avec JavaScript

**chexna** · 21/07/2006, 18h15

Salut,
Debutant je developpe une page web de calcul automatique de la TVA et TTC, mon probleme est que le calcul s'effectuera suivant des options du menu deroulant (je suis novice en JS

). je vous donne les formules:
cette est page con�ue pour une association de bienfaisance, votre contribution sera donc un don.

Si nature de la vente= option 2,3 et 5 alors la tva=0
Si nature de la vente= option 1,4,6 et 7 alors tva= Montant HT*0,18
Et TTC=Montant HT+TVA

j'y joins le code html pour vous permettre de tester.

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
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "<a href="http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" target="_blank">http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd</a>">
<html xmlns="<a href="http://www.w3.org/1999/xhtml" target="_blank">http://www.w3.org/1999/xhtml</a>">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Document sans nom</title>
<style type="text/css">
<!--
.Style1 {
font-size: xx-large;
font-weight: bold;
}
body {
background-color: #CCCCCC;
}
.Style2 {font-size: medium; font-weight: bold; }
-->
</style>
</head>
<body>
<form id="form1" name="form1" method="post" action="">
<p align="center" class="Style1">Saisie Vente </p>
<p align="left">
<label></label>
</p>
<p align="left" class="Style2">
<label>Nature chiffre d'affaire
<select name="select">
<option>Montant des affaires &agrave; l'exportation taxable &agrave; l'interieur</option>
<option>Montant des affaires &agrave; l'exportation non-taxable &agrave; l'interieur</option>
<option>Montant des affaires &eacute;x&eacute;nor&eacute;es autres que les exportations </option>
<option>Livraison &agrave; soi-m&ecirc;me</option>
<option>Montant des affaires r&eacute;alis&eacute;es en suspension</option>
<option>Montant des affaires soumises au pr&eacute;compte de T.V.A</option>
<option>Montant des autres affaires taxable &agrave; l'interieur</option>
</select>
</label>
</p>
<p>
<label></label>
</p>
<p>
<label><strong>Client</strong>
<input name="textfield2" type="text" maxlength="40" />
</label>
</p>
<p>
<label><strong>N°Facture</strong>
<input name="textfield3" type="text" maxlength="15" />
</label>
</p>
<p>
<label><strong>Montant H.T</strong>
<input name="textfield4" type="text" value="0" maxlength="30" />
</label>
</p>
<p>
<label><strong>TVA</strong>
<input name="textfield5" type="text" value="0" maxlength="30" />
</label>
</p>
<p>
<label><strong>Montant TTC</strong>
<input type="text" name="textfield" />
</label>
</p>
</form>
</body>
</html>

**plegat** · 21/07/2006, 18h22

Salut,

Tu n'es pas dans le bon forum, �a risque de prendre un peu de temps pour la r�ponse si tu restes ici...

Tu as un forum Javascript, l�: http://www.developpez.net/forums/forumdisplay.php?f=23

Je pense que tu y trouveras plus de support...

**FremyCompany** · 21/07/2006, 18h47

Pour calculer la TVA :

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
<script>function calculeTVA() {
    var select=document.getElementsByName("select")[0]
    var montantInput=document.getElementsByName("textfield4")[0]
    var tvaInput=document.getElementsByName("textfield5")[0]
    switch (select.selectedIndex)) {
        case 0:
        case 3:
        case 5:
        case 6:
            tvaInput.value=Math.round(parseFloat(montantInput.value)*18)/100
            break;
        default:
            tvaInput.value=0
            break;
    }
}</script>

Code :

S�lectionner tout - Visualiser dans une fen�tre � part

<select name="select" onchange="calculeTVA()">

**Kerod** · 22/07/2006, 02h31

Pour aller au plus simple, tu mets � chaque option le value correspondant et apr�s tu fais juste le calcul :

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
<select name="select" onchange="getvalue(this.value)">
<option value="0.18">Montant des affaires &agrave; l'exportation taxable &agrave; l'interieur</option>
<option value="0"
>Montant des affaires &agrave; l'exportation non-taxable &agrave; l'interieur</option>
<option value="0"
>Montant des affaires &eacute;x&eacute;nor&eacute;es autres que les exportations </option>
<option value="0.18"
>Livraison &agrave; soi-m&ecirc;me</option>
<option value="0"
>Montant des affaires r&eacute;alis&eacute;es en suspension</option>
<option value="0.18"
>Montant des affaires soumises au pr&eacute;compte de T.V.A</option>
<option value="0.18"
>Montant des autres affaires taxable &agrave; l'interieur</option>
</select>

Et pour le calcul, tu modifies ceci :

Code :

S�lectionner tout - Visualiser dans une fen�tre � part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<label><strong>Montant H.T</strong>
<input name="textfield4" id="montant_ht" type="text" value="0" maxlength="30" />
</label>
</p>
<p>
<label><strong>TVA</strong>
<input name="textfield5" id="tva" type="text" value="0" maxlength="30" />
</label>
</p>
<p>
<label><strong>Montant TTC</strong>
<input type="text" id="montant_ttc" name="textfield" />
</label>
</p>

Puis reste plus qu'� faire une petite fonction

Code :

S�lectionner tout - Visualiser dans une fen�tre � part

1
2
3
4
5
6
<script language="javascript">
function getvalue(tva_value)
{
    document.getElementById('tva').value = parseFloat(document.getElementById('montant_ht').value) * tva_value;
   document.getElementById('montant_ttc').value = parseFloat(document.getElementById('tva').value) + parseFloat(document.getElementById('montant_ht').value);
}</script>

Ce qui donne au final (et ca fonctionne, j'ai test�) :

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
<!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=iso-8859-1" />
<title>Document sans nom</title>
<style type="text/css">
<!--
.Style1 {
font-size: xx-large;
font-weight: bold;
}
body {
background-color: #CCCCCC;
}
.Style2 {font-size: medium; font-weight: bold; }
-->
</style>
<script language="javascript">
function getvalue(tva_value)
{
    document.getElementById('tva').value = parseFloat(document.getElementById('montant_ht').value) * tva_value;
   document.getElementById('montant_ttc').value = parseFloat(document.getElementById('tva').value) + parseFloat(document.getElementById('montant_ht').value);
}</script>
</head>
<body>
<form id="form1" name="form1" method="post" action="">
<p align="center" class="Style1">Saisie Vente </p>
<p align="left">
<label></label>
</p>
<p align="left" class="Style2">
<label>Nature chiffre d'affaire
<select name="select" onchange="getvalue(this.value)">
<option value="0.18">Montant des affaires &agrave; l'exportation taxable &agrave; l'interieur</option>
<option value="0"
>Montant des affaires &agrave; l'exportation non-taxable &agrave; l'interieur</option>
<option value="0"
>Montant des affaires &eacute;x&eacute;nor&eacute;es autres que les exportations </option>
<option value="0.18"
>Livraison &agrave; soi-m&ecirc;me</option>
<option value="0"
>Montant des affaires r&eacute;alis&eacute;es en suspension</option>
<option value="0.18"
>Montant des affaires soumises au pr&eacute;compte de T.V.A</option>
<option value="0.18"
>Montant des autres affaires taxable &agrave; l'interieur</option>
</select>
</label>
</p>
<p>
<label></label>
</p>
<p>
<label><strong>Client</strong>
<input name="textfield2" type="text" maxlength="40" />
</label>
</p>
<p>
<label><strong>N°Facture</strong>
<input name="textfield3" type="text" maxlength="15" />
</label>
</p>
<p>
<label><strong>Montant H.T</strong>
<input name="textfield4" id="montant_ht" type="text" value="0" maxlength="30" />
</label>
</p>
<p>
<label><strong>TVA</strong>
<input name="textfield5" id="tva" type="text" value="0" maxlength="30" />
</label>
</p>
<p>
<label><strong>Montant TTC</strong>
<input type="text" id="montant_ttc" name="textfield" />
</label>
</p>
</form>
</body>
</html>

**jeca** · 22/07/2006, 09h07

Bonjour,

Une autre solution :

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
 
<!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=iso-8859-1" />
    <title>Document sans nom</title>
    <script type="text/javascript">
      //-- si changement de tva, seule change cette ligne ---------
      var pourCentTva = 0.18;
 
      function calcul(obj)
      {
        var valeur = parseInt(obj.options[obj.selectedIndex].value, 10);
        if (valeur == '#')
          return;
 
        var ht = parseFloat(obj.form.ht.value);
        if (valeur)
        {
          var tva = Math.round(ht * pourCentTva * 100) / 100;
          var ttc = ht + tva;
        }
        else
        {
          var tva = 0;
          var ttc = ht;
        }
        obj.form.tva.value = tva;
        obj.form.ttc.value = ttc;
      }
    </script>
    <style type="text/css">
      <!--
      .Style1 {
      font-size: xx-large;
      font-weight: bold;
      }
      body {
      background-color: #CCCCCC;
      }
      .Style2 {font-size: medium; font-weight: bold; }
      -->
    </style>
  </head>
  <body>
    <form id="form1" name="form1" method="post" action="">
      <p align="center" class="Style1">Saisie Vente </p>
      <p>
        <label><strong>Client</strong>
          <input name="textfield2" type="text" maxlength="40" />
        </label>
      </p>
      <p>
        <label><strong>N°Facture</strong>
          <input name="textfield3" type="text" maxlength="15" />
        </label>
      </p>
      <p>
        <label><strong>Montant H.T</strong>
          <input name="ht" type="text" value="0" maxlength="30" />
        </label>
      </p>
      <p>
        <label><strong>TVA</strong>
          <input name="tva" type="text" value="0" maxlength="30" />
        </label>
      </p>
      <p>
        <label><strong>Montant TTC</strong>
          <input name="ttc" type="text" />
        </label>
      </p>
      <p align="left" class="Style2">
        <label>Nature chiffre d'affaire
          <select name="select" onchange="calcul(this)">
            <option value="#">-- Sélectionnez le type de chiffre d'affaires --</option>
            <option value="1">Montant des affaires &agrave; l'exportation taxable &agrave; l'interieur</option>
            <option value="0">Montant des affaires &agrave; l'exportation non-taxable &agrave; l'interieur</option>
            <option value="0">Montant des affaires &eacute;x&eacute;nor&eacute;es autres que les exportations </option>
            <option value="1">Livraison &agrave; soi-m&ecirc;me</option>
            <option value="0">Montant des affaires r&eacute;alis&eacute;es en suspension</option>
            <option value="1">Montant des affaires soumises au pr&eacute;compte de T.V.A</option>
            <option value="1">Montant des autres affaires taxable &agrave; l'interieur</option>
          </select>
        </label>
      </p>
    </form>
  </body>
</html>

D�placement du "select" en fin de formulaire, car il faut d�j� avoir saisi une valeur pour qu'un calcul s'effectue.
Ajout d'une option dans le "select" car si l'option � s�lectionner est la 1�re, l'�v�nement "onchange" ne se d�clenche pas.
Dans les options :

value = 0 = pas de tva
value = 1 = tva

**gambic** · 10/01/2017, 15h11

Bonjour,
Un script ultra simple pour convertir les prix ht/ttc via jquery (+html5) :
https://webnext.fr/calcul-ht-ttc-tva-js.php

**danielhagnoul** · 10/01/2017, 21h25

@gambic : la r�ponse arrive trop tard

Calcul tva avec JavaScript

JavaScript

Vue hybride

Discussions similaires

Partager

Partager