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
Compatibilité Joomla! 4/5 : ✅

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);
}

Si vous souhaitez vous passer de jQuery, remplacez le code
jQuery('.maClasse').text(ff_getElementByName('NOM_DE_CHAMP').value);
par le code
document.getElementsByClassName('maClasse')[0].textContent = 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.

Vous devez être enregistré et connecté pour accéder aux téléchargements.

Formulaire d'exemple un peu plus complexe