Calcul de champs de texte et de listes dans un formulaire

J'aimerais construire un formulaire dans lequel, des champs de texte ou sélections dans des listes soient calculés entre eux. Des additions, soustractions, multiplications et divisions peuvent-elles être mises en œuvre au sein de mon formulaire BreezingForms ?

Niveau : Facile
Version BF minimale requise : BreezingForms Lite
Compatibilité Joomla! 4/5 :

Situation

La faculté des formulaires BreezingForms à être scriptés leur permet quasiment toutes les possibilités. Avec des scripts simples, nous allons voir comment mettre en œuvre des éléments afin qu'ils opèrent des calculs…

Mise en œuvre

Prenons l'exemple d'une addition de deux champs de texte (voire plus) pour en obtenir la somme dans un dernier champ.

  1. Dans votre formulaire, placez un champ de texte que vous intitulez comme vous le souhaitez.
  2. Nommez-le. Pour l'exemple, nous irons au plus simple et nommerons le champ nb1.
  3. Dans ses options de validation, rendez-le éventuellement obligatoire, sélectionnez l'option Bibliothèque, indiquez un message d'erreur et sélectionner le script FF::ff_real afin de vérifier que le champ contienne bien un nombre avec d'éventuelles décimales. Attention, le séparateur décimal est toujours un point et non une virgule ! Je mentionne plus en fin d'article comment utiliser la virgule comme séparateur de décimales.
  4. Enregistrez ses propriétés et rendez-vous dans ses propriétés avancées.
  5. En bas de page, dans la section Script d'action, sélectionnez l'option Modifier et dans la zone de texte, entrez le code suivant :
    function ff_nb1_action(element, action)
    {
    ff_getElementByName('total').value =
    Number(ff_getElementByName('nb1').value) +
    Number(ff_getElementByName('nb2').value);
    }
    // ff_nb1_action
    Repérez bien les noms de champs nb1, nb2, total, repris dans le script afin d'en comprendre la construction…
  6. Enregistrez les propriétés de ce champ de texte. Faites un clic droit sur ce champ dans l'arborescence du formulaire et sélectionner Copy (copier)
  7. Sélectionnez la section mère ou la page sur laquelle se trouve ce premier champ. Faites un clic droit et sélectionnez Paste (coller) afin de dupliquer le champ.
  8. Changez son titre et nommez-le nb2.
  9. Enregistrez ses propriétés et rendez-vous dans ses propriétés avancées.
  10. En bas de page, dans la section Script d'action, sélectionnez l'option Modifier et dans la zone de texte, entrez le code suivant :
    function ff_nb2_action(element, action)
    {
    ff_getElementByName('total').value =
    Number(ff_getElementByName('nb1').value) +
    Number(ff_getElementByName('nb2').value);
    }
    // ff_nb2_action
  11. Sélectionnez la section mère ou la page sur laquelle se trouvent ces premiers champs. Faites un clic droit et sélectionnez Paste (coller) afin de dupliquer le champ qui devrait toujours se trouver dans votre presse-papier.
  12. Titrez ce dernier champ et nommez-le total.
    Dans ses propriétés avancées, cochez la case Lecture seule afin que le champ ne soit pas modifiable par l'utilisateur.
  13. Enregistrez ses propriétés et rendez-vous dans ses propriétés avancées.
  14. En bas de page, dans la section Script d'action, désélectionnez l'option Modifier (aucune option ne doit être cochée) et dans la zone de texte, entrez le code suivant :
    function ff_total_action(element,action)
    {
    ff_getElementByName('total').value = 0;
    {
    ff_getElementByName('total').value =
    Number(ff_getElementByName('nb1').value) +
    Number(ff_getElementByName('nb2').value);
    }
    }
    // ff_total_action
  15. Enregistrez les propriétés de ce champ puis enregistrez le formulaire.
  16. Testez le formulaire.

Dans cet exemple, nous avons utilisé des champs de texte. Les listes sont également utilisables. Vous leur donnerez les valeurs que vous souhaitez pour effectuer le calcul.

Nous n'avons aussi utilisé que l'opérateur d'addition +, vous pouvez également utiliser les opérateurs - pour la soustraction, * pour la multiplication et / pour la division.

Il est également possible de combiner les opérations et vous tiendrez compte des règles élémentaires de calcul, la multiplication et la division étant toujours prioritaires, il faudra p.ex. placer les conditions d'addition ou soustraction entre des parenthèses pour modifier cet ordre selon vos besoins comme ci-dessous pour obtenir p.ex. (nb1+nb2)*nb3 et non nb1+(nb2*nb3) qui correspond à nb1+nb2*nb3.

function ff_total_action(element,action)
{
ff_getElementByName('total').value = 0;
{
ff_getElementByName('total').value =
(Number(ff_getElementByName('nb1').value) +
Number(ff_getElementByName('nb2').value)) *
Number(ff_getElementByName('nb3').value);
}
}
// ff_total_action

Le résultat de votre opération se met à jour à chaque modification d'une sélection dans une liste, mais aussi et uniquement à la sortie d'un champ de texte renseigné ou modifié !

Quelques exemples de calculs à l'aide de champs texte et listes…

Additon de champs de texte
Soustraction de champs Liste
Multiplication champs mixtes
Division champs mixtes

Prérequis : html, css, utilisation de l'inspecteur du navigateur

Utilisation de la virgule plutôt que le point en guise de séparateur de décimales.

Il est possible d'ajouter des instructions à votre code pour autoriser l'utilisation de la virgule dans les sommes saisies ou calculées.

Je donne ici l'exemple pour un champ, il suffira de s'en inspirer pour les autres champs. Voici donc le code que nous pourrons insérer, il utilise des variables pour cibler chaque élément.

function ff_nb1_action(element,action)
    {
    var tmp1 = ff_getElementByName('nb1').value.replace(/,/g, ".");
    var tmp2 = ff_getElementByName('nb2').value.replace(/,/g, ".");
    var tmp3 = Number(tmp1) + Number(tmp2);

    ff_getElementByName('total') = tmp3.toString().replace(".", ",");
}

Merci à Mihaela de Crosstec pour m'avoir renseigné sur la fonction de remplacement.

4 commentaires

Connectez-vous pour poster un commentaire

Afin d'éviter les messages indésirables, les commentaires sont réservés aux membres inscrits. Veuillez vous inscrire ou vous connecter pour publier votre commentaire

FAIRE UN DON

paypal btn

Via PayPal

PLUGIN UP DE LOMART

Universal Plugin : UP

De très nombreuses actions pour vos articles en un unique plugin.
up lomart