Transmettre une donnée de champ dans un texte de description

Pour diverses raisons, on peut être amené à vouloir / devoir afficher le contenu d'un champ dans un texte de description de section ou de page de formulaire.

Avec BreezingForms, nous pouvons effectivement utiliser un petit code JavaScript mis en place pour effectuer ce type d'affichage. Dans le texte de description, il restera à placer une balise span avec une classe à cibler pour y envoyer la valeur souhaitée.

Voyons ensemble comment mettre ça en place.

Niveau: Moyen
Version BF minimale requise: BreezingForms Lite

Préparation du formulaire

Préparez votre formulaire comme vous le souhaitez, titrez et nommez vos champs.

Placez, à l'endroit du formulaire, où vous souhaitez afficher votre texte accompagné de la donnée du champ de formulaire, une section de formulaire paramétrée comme vous le désirez.

Cliquez le lien Éditer de la zone des propriétés partie Description et entrez le texte désiré. Passez en mode code de votre éditeur et ajoutez

<span class="maClasse"></span>

à l'emplacement exact où vous désirez afficher la donnée.

Lorsque votre "description" est en place, validez-la et revenez sur votre formulaire. Sélectionnez le champ duquel vous souhaitez transférer la valeur.

Passez dans les propriétés avancées du champ et dans la partie Script d'initialisation, sélectionnez Personnalisé puis cochez l'option Entrée du formulaire et saisissez le code suivant dans la zone d'édition

function ff_NOM_DE_CHAMP_init(element, condition)
{
     setInterval(calc,50);
}

function calc()
{
     jQuery('.maClasse').text(ff_getElementByName('NOM_DE_CHAMP').value);
}

Changez NOM_DE_CHAMP par le nom réel de votre champ et adaptez .maClasse à la classe que vous avez choisie pour votre balise span.

Enregistrez votre formulaire et testez-le. Lorsque vous saisissez une donnée dans le champ dont la valeur est à transférer et que vous sortez de ce champ, la valeur est transférée vers le span de votre description.

Le cas présenté ici est simple mais on peut très bien transférer des sommes calculées dans un champ total que l'on aurait masqué afin d'en avoir un affichage personnalisé dans la description des sections. Voir formulaire d'exemple ci-dessous et que je vous place en téléchargement afin que vous puissiez pendre connaissance de sa construction. En peaufinant le script on peut actualiser le span récepteur en temps réel.

Téléchargez le formulaire présenté ci-dessous afin de voir comment il fonctionne et comment il est construit.

valeur_vers_description.zip
Téléchargé 6 fois
md5 : 70384c0020bc86f9d4d3de7a34d25361

Pour l'installation, veuillez lire ce tutoriel.

Formulaire d'exemple un peu plus complexe

Valeur de champ dans un texte de description.

Faites des sélections ci-dessous et voyez la valeur se mettre à jour en temps réel dans la section en bas du formulaire.

Détail

Ci-dessous la description de la section contenant le span de réception de la valeur d'un champ masqué

Le coût total de vos sélections se monte à 1

Cet article vous a plu ?
N'hésitez pas à laisser une évaluation en haut de page afin de me faire part de votre impression !

Les commentaires sont réservés aux membres enregistrés. Si vous êtes membre, veuillez vous connecter sinon, n'hésitez pas à vous enregistrer !