Calculer la TVA et le prix TTC d’un produit
Sommaire
I. Présentation
Nous allons voir à travers ce tutoriel comment créer une petite application qui permet de calculer le montant de la TVA et de vous donner le prix TTC d'un produit, à partir du prix hors taxes saisi par l'utilisateur.
Dans cet exemple j'ai pris la valeur 19.6% pour la TVA mais vous pouvez la modifier selon la TVA qu'il vous intéresse.
Cet exemple montrera uniquement le code HTML et le code JavaScript, aucune propriété CSS sera utilisée. Libre à vous de les ajouter si vous le souhaiter.
II. Procédure
A. Le code HTML de base
<HTML> <HEAD> </HEAD> <BODY> <div> <h2>CONVERTISSEUR MONNAIES</h2> <br> <FORM Name='Form1'> Montant hors taxes <input type='text' Name='ht' Value='0'> <br> Montant TVA (19.6%) <input type ='text' Name='tva'> <br> Montant TTC <input type ='text' Name='ttc'> </FORM> </div> </BODY> </HTML>
B. Le code JavaScript
Pour que la conversion soit dynamique, c'est à dire que dès que l'utilisateur saisie un nombre, le calcul se fasse en temps réel, nous allons exécuter la fonction JavaScript à chaque fois que l'utilisateur relâche la touche du clavier. Cet événement s'appelle onKeyUp.
- Tout d'abord, placement de onKeyUp pour l'exécution de la fonction :
Pour que la fonction qui calcul la TVA et le montant TTC s'exécute en temps réel, nous allons placer l'événement "onKeyUp" dans le champs "input" où l'on saisit le montant hors taxes. Cet événement appellera la procédure CalculerMontantTTC(), qui permet d'obtenir le montant de la TVA et le montant TTC par rapport au prix de base indiqué.
<input type='text' Name='ht' onKeyUp='CalculerMontantTTC()' Value='0'>
- Code de la fonction JavaScript :
Il faut désormais déclarer et écrire le code de la fonction JavaScript dans la balise HEAD de la page HTML :
<HEAD>
<Script language='javascript'>
function CalculerMontantTTC()
{
if (isNaN(Form1.ht.value) == true)
{
alert('Merci de saisir un montant correct. Calcul impossible.');
Form1.ht.value = '0';
}
else
{
Form1.tva.value = (Form1.ht.value / 100) * 19.6 ;
Form1.ttc.value = Number(Form1.ht.value) + Number(Form1.tva.value) ;
}
}
</Script>
</HEAD>
Si ce n'est pas un nombre qui est saisit dans la zone de texte "Montant hors taxes" alors on affiche un message d'avertissement et on remet la valeur à 0. Si c'est bien un nombre qui est saisit dans la zone de texte, on calcul le montant de la TVA et on l'indique dans la zone de texte "Montant TVA" et on calcul également le montant TTC que l'on indique dans la zone de texte prévue pour ça. La fonction Number() permet de faire en sorte que la valeur de la zone de texte sous prise comme un nombre et non comme une chaîne de caractères.
C. Exécuter la fonction au chargement de la page
Pour que le calcul s'exécute au chargement de la page avec la valeur définie par défaut, qui est 0 dans notre cas, on ajoute l'événement "onLoad" dans le BODY de notre page et on appelle la fonction CalculerMontantTTC().
<BODY onLoad='CalculerMontantTTC()'>
D. Code complet
<HTML>
<HEAD>
<Script language='javascript'>
function CalculerMontantTTC()
{
if (isNaN(Form1.ht.value) == true)
{
alert('Merci de saisir un montant correct. Calcul impossible.');
Form1.ht.value = '0';
}
else
{
Form1.tva.value = (Form1.ht.value / 100) * 19.6 ;
Form1.ttc.value = Number(Form1.ht.value) + Number(Form1.tva.value) ;
}
}
</Script>
</HEAD>
<BODY onLoad='CalculerMontantTTC()'>
<div id='bloc'>
<h2>Calcul de la TVA</h2>
<FORM Name='Form1'>
Montant hors taxes <input type='text' Name='ht' onKeyUp='CalculerMontantTTC()' Value='0'>
<br>
Montant TVA (19.6%) <input type ='text' Name='tva'>
<br>
Montant TTC <input type ='text' Name='ttc'>
</FORM>
</div>
</BODY>
</HTML>
