Formbuilder champs dynamique en JS ?

Formbuilder champs dynamique en JS ? - Version imprimable

+- Forum CMS Made Simple FR (https://forum.cmsmadesimple.fr)
+-- Forum : Général (https://forum.cmsmadesimple.fr/forum-3.html)
+--- Forum : Modules, Tags (https://forum.cmsmadesimple.fr/forum-14.html)
+--- Sujet : Formbuilder champs dynamique en JS ? (/thread-2579.html)

Formbuilder champs dynamique en JS ? - freddyjack - 09/02/2013

Citation :#~~~~~ DEBUT BLOC A NE PAS SUPPRIMER ~~~~~
#~ Version du CMS: 1.11.4
#~ Url du site :
#~ Hébergeur / Soft :
#~ Informations Système :
#~ ----------------------------------------------
#~ Cms Version: 1.11.4
#~ Installed Modules:
#~ CMSMailer: 5.2.1
#~ CMSPrinting: 1.0.3
#~ FileManager: 1.4.3
#~ MenuManager: 1.8.4
#~ MicroTiny: 1.2.5
#~ ModuleManager: 1.5.5
#~ News: 2.12.10
#~ Search: 1.7.7
#~ ThemeManager: 1.1.7
#~ CGExtensions: 1.31.3
#~ FrontEndUsers: 1.21.2
#~ Showtime: 3.3
#~ TinyMCE: 2.9.11
#~ FormBuilder: 0.7.3
#~ FormBrowser: 0.4.2
#~ CGJobMgr: 1.2.11
#~ NMS: 2.7
#~ Guestbook: 1.4_RC2
#~ Config Information:
#~ php_memory_limit:
#~ process_whole_template:
#~ output_compression:
#~ max_upload_size: 10000000
#~ url_rewriting: none
#~ page_extension:
#~ query_var: page
#~ image_manipulation_prog: GD
#~ auto_alias_content: true
#~ locale:
#~ default_encoding: utf-8
#~ admin_encoding: utf-8
#~ set_names: true
#~ Php Information:
#~ phpversion: 5.3.3
#~ md5_function: On (Vrai)
#~ gd_version: 2
#~ tempnam_function: On (Vrai)
#~ magic_quotes_runtime: Off (Faux)
#~ E_STRICT: 0
#~ E_DEPRECATED: 0
#~ memory_limit: 128M
#~ max_execution_time: 60
#~ output_buffering: 4096
#~ safe_mode: Off (Faux)
#~ file_uploads: On (Vrai)
#~ post_max_size: 8M
#~ upload_max_filesize: 10M
#~ session_save_path: Aucune vérification à cause de la restriction spécifiée par PHP open_basedir
#~ session_use_cookies: On (Vrai)
#~ xml_function: On (Vrai)
#~ xmlreader_class: On (Vrai)
#~ Server Information:
#~ Server Api: apache2handler
#~ Server Db Type: MySQL (mysqli)
#~ Server Db Version: 5.0.95
#~ Server Db Grants: Trouvé un privilège "GRANT ALL" qui semble être adapté
#~ ----------------------------------------------
#~~~~~ FIN BLOC A NE PAS SUPPRIMER ~~~~~

Bonjour

Après pas mal de recherches, je ne trouve pas de solution à mon problème.
Je voudrais avec le module FormBuilder faire des champs dynamique ... lorsque je coche la case X j'ai un autre champs qui apparait ou une liste déroulante, etc ...
Exemple ( toujours plus simple que de longues explications ) : je coche une case appeler "enfant" et il apparait une liste déroulante avec des chiffre de 1 à 4 ...
J'ai vu qu'il fallait utiliser du javascript, mais étant une quiche en js je ne sais pas comment faire . Je n'ai pas trouvé de solution pour l'instant et je n'arrive pas à le faire avec JotForm.
Si quelqu'un a une solution , ou au moins un début cela serait super.

Formbuilder champs dynamique en JS ? - jissey - 09/02/2013

Bonsoir,
je ne pense pas que Formbuilder te permette de faire ça.
Il y a un petit moment que je ne l'ai pas utilisé, mais il est fait pour insérer des champs de formulaire et il n'y a pas de conditions qui permettent de faire apparaitre des champs en fonction de différents choix.
Si tu es une quiche en javascript, il va falloir faire appel à un ami car je pense que dans un premier temps, tu devras faire ton formulaire "statique" et ensuite le mettre dans une balise utilisateur.
Trouve ou fait le formulaire de tes rêves et ensuite vois pour l'intégrer dans une balise.

Formbuilder champs dynamique en JS ? - Jean le Chauve - 09/02/2013

Voici un exemple que j'ai utilisé pour un petit concours photos réservé à certaines écoles.
Le but est d'afficher les champs d'upload photos uniquement si l'email correspond à des valeurs préétablies ainsi qu'à insérer le nom de l'école dans un champs hidden.
Formulaire
1 Champs du mail "From Adresse" avec onchange="ecoleQuery(this.value);" dans "Javascript pour le champ"
1 Champs caché id3
1 fieldset id4
des champs n'apparaissant que si l'adresse mail est correcte
1 fin de fieldset...

Le js placé dans /js/BM_VerifClasses.js est appelé dans les metadonnées de la page où le formulaire apparaît :
<script src="js/BM_VerifClasses.js" type="text/javascript" charset="utf-8"></script> :

Code :
[== JavaScript ==]

function ecoleQuery(email) {

var elmt = document.getElementById('fbrp__4');

var nomEcole = document.getElementById('fbrp__3');

switch (email) { 

case 'nom1@domaine.be':

elmt.style.display = "block";

nomEcole.value='StHubert';

break; 

case 'nom2@domaine.be':

elmt.style.display = "block";

nomEcole.value='VanAsbroeck';

break; 

default:

elmt.style.display = "none";        

alert('L\'adresse mentionnée n\'est pas inscrite au concours.');

}

};

Principe très simple : au départ, le fiedset est en display:none, donc les champs d'upload ne sont pas affichés.
L'internaute entre une adresse mail : si elle correspond à nom1@domaine.be, alors le fiedset passe en display:block et le js insère StHubert dans le champs hidden.
Si elle correspond à nom2@domaine.be, on insère VanAsbroeck.
Si elle ne correspond pas aux valeurs codées dans le js, un pop up affiche un message d'erreur.

Pour que les champs reste en display:block et que l'utilisateur n'aie pas à entrer de nouveau son mail en cas d'erreur et de réaffichage du formulaire, il faut modifier le gabarit du formulaire après {* we start with validation errors *} {if isset($fb_form_has_validation_errors) && $fb_form_has_validation_errors}

Code :
    {* we start with validation errors *}

    {if isset($fb_form_has_validation_errors) && $fb_form_has_validation_errors}

{* affichage après erreur si nomEcole rempli *}

{literal}

<script type="text/javascript">

window.onload = function() {

if (document.getElementById('fbrp__3').value !='') {

    var elmt = document.getElementById('fbrp__4);

    elmt.style.display = "block";

  }

}

</script>

{/literal}

<br />

        <!-- <div class="error_message">

[...]

Le fiedset n'a pas de propriété spécifique dans la css, il se met en display_none automatiquement.

Ça a très bien fonctionné lors du concours Smile

Formbuilder champs dynamique en JS ? - freddyjack - 09/02/2013

Merci pour ces réponses ultra rapides.
Je vais essayer de bidouiller avec tes infos Jean le Chauve et si je n'y arrive pas je suivrais les conseils de jissey.
Je vous tiens au courant de mes avancées et si je trouve une solutions convenable je la partagerais ici et mettrais résolu.
Encore merci