Formbuilder : <input> avec valeurs préremplies

Note de ce sujet :
  • Moyenne : 0 (0 vote(s))
  • 1
  • 2
  • 3
  • 4
  • 5
#1
Bonjour,

Petite fonction très simple, mais que personnellement je n'ai jamais réussi à trouver ni sur les forums, ni dans la doc...
Il s'agit de pré-remplir un champ <input> et de supprimer cette valeur par défaut, lorsque le champ est sélectionné.

Il faut pour cela, avoir installé le module Formbuilder (j'ai testé avec une version de CMSMS 1.9 et Formbuilder 0.6.4, mais à priori cette astuce devrait fonctionner avec les versions antérieures).

Admettons que nous avons un formulaire de contact simple avec un champ "Nom" (de type "champ du mail "From nom"), "Adresse e-mail"(de type champ du mail "From adresse"), "Message" et un bouton d'envoi.
Nous voulons que les champs "nom" et "adresse e-mail" aient pour valeur par défaut respectivement : "votre nom" et "votre adresse e-mail".
(à noter que ceci est prévu par défaut dans Formbuilder pour les champs de type "Textarea" qui correspond ici à "Message".)

Dans Formbuilder, on sélectionne notre formulaire, puis on clic pour modifier le champ nom. "Nom de champ" on choisit un nom court, sans espaces et sans accents (un mot quoi!), ex : "nom".
Dans "Options avancées" on peut ensuite choisir de masquer le "label" (certains diront que ce n'est pas terrible en terme d'accessibilité, ce qui n'est pas faux, mais il faut aussi noter que formbuilder génère de toute façon des "labels" de type "label for="fbrp__2"" qui ne servent à rien pour un malvoyant...), ce qui peut être utile si le label n'est pas très compréhensible, ou pour éviter d'être redondant.
toujours dans "Options avancés" on va entrer le code suivant dans le champ "Javascript pour le champ :", qui permettra d'effacer la valeur par défaut lorsque le champ est sélectionné.
Code :
onblur="if(this.value=='') this.value=this.defaultValue;" onfocus="if(this.value==this.defaultValue) this.value='';"

On valide les modifications et puis on recommence la manip avec le champ e-mail (par exemple).

On sauvegarde le formulaire, il ne reste plus qu'à appeler le formulaire (dans une page ou un gabarit) de cette manière :
Code :
{FormBuilder form='nom-du-formualire' value_nom='votre nom...' value_mail='votre adresse e-mail...'}
On remplace bien sur 'nom-du-formulaire' par le bon et "value_nom" et "value_mail" par la valeurs du champ nom vue précédemment!
Répondre
#1
Bonjour,

Petite fonction très simple, mais que personnellement je n'ai jamais réussi à trouver ni sur les forums, ni dans la doc...
Il s'agit de pré-remplir un champ <input> et de supprimer cette valeur par défaut, lorsque le champ est sélectionné.

Il faut pour cela, avoir installé le module Formbuilder (j'ai testé avec une version de CMSMS 1.9 et Formbuilder 0.6.4, mais à priori cette astuce devrait fonctionner avec les versions antérieures).

Admettons que nous avons un formulaire de contact simple avec un champ "Nom" (de type "champ du mail "From nom"), "Adresse e-mail"(de type champ du mail "From adresse"), "Message" et un bouton d'envoi.
Nous voulons que les champs "nom" et "adresse e-mail" aient pour valeur par défaut respectivement : "votre nom" et "votre adresse e-mail".
(à noter que ceci est prévu par défaut dans Formbuilder pour les champs de type "Textarea" qui correspond ici à "Message".)

Dans Formbuilder, on sélectionne notre formulaire, puis on clic pour modifier le champ nom. "Nom de champ" on choisit un nom court, sans espaces et sans accents (un mot quoi!), ex : "nom".
Dans "Options avancées" on peut ensuite choisir de masquer le "label" (certains diront que ce n'est pas terrible en terme d'accessibilité, ce qui n'est pas faux, mais il faut aussi noter que formbuilder génère de toute façon des "labels" de type "label for="fbrp__2"" qui ne servent à rien pour un malvoyant...), ce qui peut être utile si le label n'est pas très compréhensible, ou pour éviter d'être redondant.
toujours dans "Options avancés" on va entrer le code suivant dans le champ "Javascript pour le champ :", qui permettra d'effacer la valeur par défaut lorsque le champ est sélectionné.
Code :
onblur="if(this.value=='') this.value=this.defaultValue;" onfocus="if(this.value==this.defaultValue) this.value='';"

On valide les modifications et puis on recommence la manip avec le champ e-mail (par exemple).

On sauvegarde le formulaire, il ne reste plus qu'à appeler le formulaire (dans une page ou un gabarit) de cette manière :
Code :
{FormBuilder form='nom-du-formualire' value_nom='votre nom...' value_mail='votre adresse e-mail...'}
On remplace bien sur 'nom-du-formulaire' par le bon et "value_nom" et "value_mail" par la valeurs du champ nom vue précédemment!
Répondre
#2
Merci nicks pour le partage Smile
Répondre
#2
Merci nicks pour le partage Smile
Répondre
#3
Bah de rien... et puis je suis bien content de pouvoir poster autre chose que "au secours ca marche pas Sad" ! Wink
Répondre
#3
Bah de rien... et puis je suis bien content de pouvoir poster autre chose que "au secours ca marche pas Sad" ! Wink
Répondre
#4
Bonjour nicks,

Merci pour cette astuce qui est très simple à mettre en œuvre. Il y a quelques temps j'avais posté sur le forum une question qui est restée sans réponse et qui me semble un complément utile. Il s'agit de remplir les valeurs par défaut de champs de formulaire FormBuilder avec des valeurs issues de la base de données.
Je n'ai pas trouvé de solution pour passer d'un tag utilisateur les variables pré-remplies par les données de la DB dans les valeurs par défaut de l'appel au formulaire :

http://www.cmsmadesimple.fr/forum/viewtopic.php?id=3092

Je pense que je me heurte à un problème de syntaxe et/ou de méthode que mes compétences ne me permettent pas de résoudre. J'ai contourné le problème en affichant un tableau de valeur puis le formulaire. Cela fonctionne mais pour ma gouverne j'aimerai savoir s'il y a une méthode une astuce pour passer des variables dans l'appel au formulaire.

Amicalement

Alain
Répondre
#4
Bonjour nicks,

Merci pour cette astuce qui est très simple à mettre en œuvre. Il y a quelques temps j'avais posté sur le forum une question qui est restée sans réponse et qui me semble un complément utile. Il s'agit de remplir les valeurs par défaut de champs de formulaire FormBuilder avec des valeurs issues de la base de données.
Je n'ai pas trouvé de solution pour passer d'un tag utilisateur les variables pré-remplies par les données de la DB dans les valeurs par défaut de l'appel au formulaire :

http://www.cmsmadesimple.fr/forum/viewtopic.php?id=3092

Je pense que je me heurte à un problème de syntaxe et/ou de méthode que mes compétences ne me permettent pas de résoudre. J'ai contourné le problème en affichant un tableau de valeur puis le formulaire. Cela fonctionne mais pour ma gouverne j'aimerai savoir s'il y a une méthode une astuce pour passer des variables dans l'appel au formulaire.

Amicalement

Alain
Répondre


Atteindre :


Utilisateur(s) parcourant ce sujet : 1 visiteur(s)