Comment effectuer des calculs entre champs Chronoforms ?

Cacher / Afficher l'index
Évaluer cet élément
(0 Votes)

Comment effectuer des calculs entre champs Chronoforms ?

Le but de ce document est de fournir des exemples de calculs avec les champs Chronoforms.

Deux cas sont possible :

Les calculs doivent être éffectués directement quand l'utilisateur rempli les champs

Ou les calculs doivent être fait dans l'action suivante du formulaire (l'action on submit ou l'action suivante dans le cas d'un formulaire multipage).

La valeur est mise à jour dans un champ texte

Les deux cas peuvent être utilisés en même temps.

Comment effectuer des calculs entre champs Chronoforms ?

Le formulaire exemple est constitué de deux boutons radio et un champ texte.

En choisissant une valeur, on ajoutes un nombre à celle ci et on affiches le résultat dans un champ texte.

Ce formulaire peut être étendu facilement à d'autres types de champs (liste déroulantes, champ texte...) et être utilisé pour des calculs complexes faisant intervenir plusieurs champs dont les valeurs sont directement éxtraites des choix utilisateurs.

Le champ texte doit contenir le résultat de l'opération.

Configuration du formulaire

Les boutons radio sont un champ de type Radio Box.

La configuration du champ Radio Box est celle ci dessous :

  • Field Name : Radio1
  • Field ID : Radio1
  • Options :
    • 10=Choix N°1
    • 20=Choix N°2

La configuration du champ Textbox est celle ci dessous :

  • Field ID : text4
  • Label : Résultat

Cas N°1 : le formulaire doit être mis à jour directement au choix des valeurs sans actualiser la page (avant soumission du formulaire).

Dans ce cas, il faut utiliser une fonction javascript pour effectuer le calcul directement.

Cette fonction utilisera les identifiants des champs (id) pour repérer les éléments qui doivent être utilisés pour le calcul

Pour commencer, il faut récupérer les id correspondant aux deux choix possible.

Pour cela, il faut utiliser "Firebug" ou l'inspecteur déléments de votre navigateur.

Dans le cas de ce formulaire il s'agit des id "radio1" pour le premier choix possible et "radio11" pour le second.

Une fois ceci fait, il faut se rendre dans l'onglet "designer > events" de Chronoforms pour créer l'appel à la fonction Javascript.

Une fois dans cet onglet, il faut faire un glisser /deposer d'un champ "function call".

Ce champ doit être configuré comme ci dessous

  • On : Change value
  • of : Radio1
  • function : calcul

Ceci permet l'appel de la fonction "calcul" à chaque changement de la valeur du formulaire.

Dernière étape : Il faut se rendre dans l'onglet "Setup" et ajouter un élément de type "Load Javascript" dans l'événement "Onload" du formulaire. Cet élément conteindras la fonction "calcul".

Cet élément doit impérativement être avant l'élément "show HTML" qui sert à afficher le formulaire.

L'élément "Load javascript" doit contenir la fonction ci dessous :

 function calcul()  {
 // on verifies quel est le bouton choisi et on extrait la valeur correspondante
if(document.getElementById('radio1').checked){
		var vradio1 = parseInt(document.getElementById("radio1").value);
} else {
		var vradio1 = parseInt(document.getElementById("radio11").value);
}
// on effectues le calcul
total = vradio1 + 134;
// on affectes la valeur au champ texte
document.getElementById('text4').value = total;
} 
 

Le formulaire est términé.

Cas N°2 : le calcul doit être éfféctué dans l'événement suivant" (après soummission du formulaire)

Dans ce cas, il faut passer par un code pérsonnalisé (custom code) écrit en php.

Dans le cadre de ce formulaire, à la place de l'élément "Load javascript", on peut ajouter un élément "Custom code dans l'événement "on submit".

Cet élément contiendras le code ci dessous :

<?php $total = $form->data['radio1'] + 134; echo $total; ?> 

 La valeur du bouton coché est contenue dans le model Id, soit la valeur $form->data['radio1].

Pour la stocker dans un champ directement exploitable par Chronoforms (dans le cas d'un formulaire multipage principalement), on peut utiliser le code personnalisé ci dessous :

<?php  $form->data['total'] = $form->data['radio1'] + 134;  ?> 

 On peut ensuite réaffecter le contenu de cette variable à un autre champ via l'onglet dynamic data du champ que l'on souhaites utiliser.


Précédent 1/2 Suivant »

228 Dernière modification le lundi, 20 février 2017 11:36
Plus dans cette catégorie :

Si vous avez des questions, des suggestions quand à l'amélioration du contenu, telles que des liens pertinents et utile, n'hesitez pas à enrichir ce document, vos retours peuvent aussi être très utiles :