Comment calculer les totaux du formulaire de commande en javascript

Utilisez javascript pour garder la trace des valeurs et des totaux sur les pages Web.

Utilisez javascript pour garder la trace des valeurs et des totaux sur les pages Web.

javascript est un langage de script utilisé pour ajouter des fonctionnalités dynamiques aux pages Web. javascript est placé directement dans le code HTML d`une page Web et est utilisé pour ajouter de l`interactivité, comme les commentaires des utilisateurs et la validation des entrées, des pages statiques autrement. javascript interagit directement avec les éléments sur une page Web, tels que les champs d`entrée et des boutons, de sorte qu`il peut être utilisé pour mettre à jour leurs attributs. javascript peut être utilisé, par exemple, de garder une trace des valeurs saisies par un utilisateur, les ajouter et de fournir le total.

Calcul Formulaire de commande totaux en javascript

1

Ouvrez un éditeur de texte et de créer un fichier avec une extension .htm. Ce fichier contiendra le balisage (HTML) qui définit la forme et le contenu du formulaire: deux champs où l`utilisateur de saisir les numéros, un bouton pour calculer un total basé sur les deux chiffres, et un champ total qui détient le total.

Video: Calculer le total TTC du Bon de commande avec la calculette de Windows7

2

Ajoutez trois champs d`entrée à la forme. Nommez le premier champ d`entrée « box1 », le nom du second champ d`entrée « box2 » et nommez le troisième champ d`entrée « total ». Box1 tiendra le premier numéro, box2 le deuxième numéro, et le total sera placé dans le champ total. Donner les champs d`entrée d`une taille de 3 et une longueur maximum de 3.

3

Ajouter un bouton HTML à la forme. Lorsque cliqué, le bouton passe de la forme et de ses éléments (this.form) a une fonction javascript appelée RunTotal (). Appelez la fonction en utilisant l`événement onclick () et donner le bouton un nom en utilisant la valeur = attribut.

Video: 08-formulaire-calcul

4

Ajouter une fonction javascript (RunTotal ()) au HTML section entre les balises javascript. Cette fonction reçoit les éléments de formulaire, ajoute les valeurs de box1 et box2 et place le résultat dans le champ de saisie totale. Utilisez l`avant-slash (//) pour indiquer des commentaires.

5

Déclarer deux variables et leur attribuer les valeurs de box1 et box2. javascript utilise le plus (+) pour concaténer des chaînes, alors utilisez la fonction Number () pour faire en sorte que javascript effectue une addition lors de l`ajout des valeurs.

6

Ajoutez les deux valeurs variables et mettre à jour le champ total du résultat.

Video: Tutoriel formulaire de contact : validation des données en javascript

7

Ouvrez la page .htm dans un navigateur. Tapez un nombre dans box1, un numéro box2, puis cliquez sur le bouton pour ajouter les numéros. Le total apparaîtra dans le champ total.

Conseils

  • vérifier Utilisez la « valeur = 0 » avec l`option box1 et box2 pour leur donner une valeur initiale de 0 lorsque la page se charge.
  • vérifier Ajouter un texte avant que le champ total pour le séparer des autres champs de la page.
  • vérifier Cette javascript ajoute deux valeurs de simplification. Utiliser une boucle et les valeurs de matrice pour rendre le code plus flexible.
  • vérifier Essayez d`utiliser l`événement onchange () sur box1 et box2 pour calculer le total que les utilisateurs entrent les valeurs.

Articles Tu auras besoin de

Video: javascript controle de saisie (1)

Les références

  • lien w3schools.com: javascript Tutoriel
  • lien ntlworld.com: javascript Tutoriels pour les débutants
  • lien Tech Tonic Paul McFedries: Calcul des formulaires de commande

A propos de l`auteur

Cathlene S. Baptista a commencé à écrire professionnellement en 2010, spécialisé dans les sujets techniques. Elle a également travaillé à McGraw-Hill comme un écrivain et rédacteur en chef. Baptista est titulaire d`un baccalauréat ès arts en psychologie de l`Université du Maryland et une maîtrise en sciences dans les systèmes d`information de l`Université George Washington.

Articles connexes