[Jean le Chauve]

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