Calcul tva avec JavaScript

Version imprimable

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:cry: :oops: ). 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:

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>

21/07/2006, 18h22
plegat

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

Pour calculer la TVA :

Code:

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:

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

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

Code:

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:

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

Code:

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:

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>

Bonjour,

Une autre solution :

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

10/01/2017, 15h11
gambic

Calcul du prix HT/TTC via jQuery

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

@gambic : la réponse arrive trop tard :mouarf: