Partage
  • Partager sur Facebook
  • Partager sur Twitter

Bouton radio qui cache/montre a l'initialisation

micker
    16 avril 2019 à 9:06:23

    Bonjour je viensde me faire un petit script pour affiché des champs de formulaire en fonction d'un champ radio

    c'est cool ca marche pas mal mais le soucis c'est quand on vient re editer le formulaire ...

    ( function($) {
$(document).ready(function() {
// ici on cache les champs
$('#label_outer_fcfield_101').hide(); //type de structure economique
$('#container_fcfield_101').hide(); 
$('#label_outer_fcfield_100').hide();//type asso
$('#container_fcfield_100').hide();
$('#label_outer_fcfield_95').hide();// service
$('#container_fcfield_95').hide();
$('#label_outer_fcfield_96').hide();//specialite
$('#container_fcfield_96').hide();
$('#label_outer_fcfield_97').hide();//identite
$('#container_fcfield_97').hide();
$('#label_outer_fcfield_99').hide();//president
$('#container_fcfield_99').hide();
$('#label_outer_fcfield_47').hide();//horaire
$('#container_fcfield_47').hide();
$('#label_outer_fcfield_44').hide();//lien
$('#container_fcfield_44').hide();
$('#label_outer_fcfield_43').hide();//galerie
$('#container_fcfield_43').hide();
$('#label_outer_fcfield_92').hide();//fax
$('#container_fcfield_92').hide(); 
$('#label_outer_fcfield_45').hide();//fichier
$('#container_fcfield_45').hide();
$('#label_outer_fcfield_41').hide();//image
$('#container_fcfield_41').hide();
$('#label_outer_fcfield_102').hide();//type etablissement scolaire
$('#container_fcfield_102').hide();
$('#label_outer_fcfield_103').hide();//type equipement
$('#container_fcfield_103').hide(); 

    $('input:radio[name="custom[type-de-fiche-annuaire][0]"]').change(function() { // lorsqu'on change de valeur dans la liste
    var valeur = $(this).val(); // valeur sélectionnée
//alert($(this).val());


if(valeur != '') { // si non vide

if(valeur == 'administration') {// si administration
$('#label_outer_fcfield_101').hide(); //type de structure economique
$('#container_fcfield_101').hide(); 
$('#label_outer_fcfield_100').hide();//type asso
$('#container_fcfield_100').hide();
$('#label_outer_fcfield_95').show();// service
$('#container_fcfield_95').show();
$('#label_outer_fcfield_96').hide();//specialite
$('#container_fcfield_96').hide();
$('#label_outer_fcfield_97').hide();//identite
$('#container_fcfield_97').hide();
$('#label_outer_fcfield_99').hide();//president
$('#container_fcfield_99').hide();
$('#label_outer_fcfield_47').show();//horaire
$('#container_fcfield_47').show();
$('#label_outer_fcfield_44').hide();//lien
$('#container_fcfield_44').hide();
$('#label_outer_fcfield_43').hide();//galerie
$('#container_fcfield_43').hide();
$('#label_outer_fcfield_92').show();//fax
$('#container_fcfield_92').show(); 
$('#label_outer_fcfield_45').show();//fichier
$('#container_fcfield_45').show();
$('#label_outer_fcfield_41').show();//image
$('#container_fcfield_41').show(); 
$('#label_outer_fcfield_102').hide();//type etablissement scolaire
$('#container_fcfield_102').hide(); 
$('#label_outer_fcfield_103').hide();//type equipement
$('#container_fcfield_103').hide(); 
} 
else if (valeur == 'santé') { // si sante
$('#label_outer_fcfield_101').hide(); //type de structure economique
$('#container_fcfield_101').hide(); 
$('#label_outer_fcfield_100').hide();//type asso
$('#container_fcfield_100').hide();
$('#label_outer_fcfield_95').hide();// service
$('#container_fcfield_95').hide();
$('#label_outer_fcfield_96').show();//specialite
$('#container_fcfield_96').show();
$('#label_outer_fcfield_97').show();//identite
$('#container_fcfield_97').show();
$('#label_outer_fcfield_99').hide();//president
$('#container_fcfield_99').hide();
$('#label_outer_fcfield_47').show();//horaire
$('#container_fcfield_47').show();
$('#label_outer_fcfield_44').show();//lien
$('#container_fcfield_44').show();
$('#label_outer_fcfield_43').hide();//galerie
$('#container_fcfield_43').hide(); 
$('#label_outer_fcfield_92').show();//fax
$('#container_fcfield_92').show(); 
$('#label_outer_fcfield_45').show();//fichier
$('#container_fcfield_45').show();
$('#label_outer_fcfield_41').show();//image
$('#container_fcfield_41').show();
$('#label_outer_fcfield_102').hide();//type etablissement scolaire
$('#container_fcfield_102').hide();
$('#label_outer_fcfield_103').hide();//type equipement
$('#container_fcfield_103').hide(); 
}
else if (valeur == 'assmat') { // si assitante maternelle
$('#label_outer_fcfield_101').hide(); //type de structure economique
$('#container_fcfield_101').hide(); 
$('#label_outer_fcfield_100').hide();//type asso
$('#container_fcfield_100').hide();
$('#label_outer_fcfield_95').hide();// service
$('#container_fcfield_95').hide();
$('#label_outer_fcfield_96').hide();//specialite
$('#container_fcfield_96').hide();
$('#label_outer_fcfield_97').hide();//identite
$('#container_fcfield_97').hide();
$('#label_outer_fcfield_99').hide();//president
$('#container_fcfield_99').hide();
$('#label_outer_fcfield_47').hide();//horaire
$('#container_fcfield_47').hide();
$('#label_outer_fcfield_44').hide();//lien
$('#container_fcfield_44').hide();
$('#label_outer_fcfield_43').hide();//galerie
$('#container_fcfield_43').hide();
$('#label_outer_fcfield_92').hide();//fax
$('#container_fcfield_92').hide(); 
$('#label_outer_fcfield_45').hide();//fichier
$('#container_fcfield_45').hide();
$('#label_outer_fcfield_41').hide();//image
$('#container_fcfield_41').hide(); 
$('#label_outer_fcfield_102').hide();//type etablissement scolaire
$('#container_fcfield_102').hide(); 
$('#label_outer_fcfield_103').hide();//type equipement
$('#container_fcfield_103').hide(); 
}
else if (valeur == 'etascolaire') { // si etablissement scolaire
$('#label_outer_fcfield_101').hide(); //type de structure economique
$('#container_fcfield_101').hide(); 
$('#label_outer_fcfield_100').hide();//type asso
$('#container_fcfield_100').hide();
$('#label_outer_fcfield_95').hide();// service
$('#container_fcfield_95').hide();
$('#label_outer_fcfield_96').hide();//specialite
$('#container_fcfield_96').hide();
$('#label_outer_fcfield_97').hide();//identite
$('#container_fcfield_97').hide();
$('#label_outer_fcfield_99').hide();//president
$('#container_fcfield_99').hide();
$('#label_outer_fcfield_47').hide();//horaire
$('#container_fcfield_47').hide();
$('#label_outer_fcfield_44').show();//lien
$('#container_fcfield_44').show();
$('#label_outer_fcfield_43').show();//galerie
$('#container_fcfield_43').show();
$('#label_outer_fcfield_92').show();//fax
$('#container_fcfield_92').show(); 
$('#label_outer_fcfield_45').show();//fichier
$('#container_fcfield_45').show();
$('#label_outer_fcfield_41').show();//image
$('#container_fcfield_41').show(); 
$('#label_outer_fcfield_102').show();//type etablissement scolaire
$('#container_fcfield_102').show(); 
$('#label_outer_fcfield_103').hide();//type equipement
$('#container_fcfield_103').hide(); 
}
else if (valeur == 'alaealsh') { // si alae-alsh
$('#label_outer_fcfield_101').hide(); //type de structure economique
$('#container_fcfield_101').hide(); 
$('#label_outer_fcfield_100').hide();//type asso
$('#container_fcfield_100').hide();
$('#label_outer_fcfield_95').show();// service
$('#container_fcfield_95').show();
$('#label_outer_fcfield_96').hide();//specialite
$('#container_fcfield_96').hide();
$('#label_outer_fcfield_97').hide();//identite
$('#container_fcfield_97').hide();
$('#label_outer_fcfield_99').show();//president
$('#container_fcfield_99').show();
$('#label_outer_fcfield_47').show();//horaire
$('#container_fcfield_47').show();
$('#label_outer_fcfield_44').show();//lien
$('#container_fcfield_44').show();
$('#label_outer_fcfield_43').hide();//galerie
$('#container_fcfield_43').hide();
$('#label_outer_fcfield_92').show();//fax
$('#container_fcfield_92').show(); 
$('#label_outer_fcfield_45').show();//fichier
$('#container_fcfield_45').show();
$('#label_outer_fcfield_41').show();//image
$('#container_fcfield_41').show(); 
$('#label_outer_fcfield_102').hide();//type etablissement scolaire
$('#container_fcfield_102').hide();
$('#label_outer_fcfield_103').hide();//type equipement
$('#container_fcfield_103').hide(); 
}
else if (valeur == 'association') { // si association
$('#label_outer_fcfield_101').hide(); //type de structure economique
$('#container_fcfield_101').hide(); 
$('#label_outer_fcfield_100').show();//type asso
$('#container_fcfield_100').show();
$('#label_outer_fcfield_95').hide();// service
$('#container_fcfield_95').hide();
$('#label_outer_fcfield_96').hide();//specialite
$('#container_fcfield_96').hide();
$('#label_outer_fcfield_97').hide();//identite
$('#container_fcfield_97').hide();
$('#label_outer_fcfield_99').show();//president
$('#container_fcfield_99').show();
$('#label_outer_fcfield_47').show();//horaire
$('#container_fcfield_47').show();
$('#label_outer_fcfield_44').show();//lien
$('#container_fcfield_44').show();
$('#label_outer_fcfield_43').show();//galerie
$('#container_fcfield_43').show();
$('#label_outer_fcfield_92').hide();//fax
$('#container_fcfield_92').hide(); 
$('#label_outer_fcfield_45').show();//fichier
$('#container_fcfield_45').show();
$('#label_outer_fcfield_41').show();//image
$('#container_fcfield_41').show(); 
$('#label_outer_fcfield_102').hide();//type etablissement scolaire
$('#container_fcfield_102').hide();
$('#label_outer_fcfield_103').hide();//type equipement
$('#container_fcfield_103').hide(); 
}
else if (valeur == 'acteureconomique') { // si acteur economique
$('#label_outer_fcfield_101').show(); //type de structure economique
$('#container_fcfield_101').show(); 
$('#label_outer_fcfield_100').hide();//type asso
$('#container_fcfield_100').hide();
$('#label_outer_fcfield_95').hide();// service
$('#container_fcfield_95').hide();
$('#label_outer_fcfield_96').hide();//specialite
$('#container_fcfield_96').hide();
$('#label_outer_fcfield_97').hide();//identite
$('#container_fcfield_97').hide();
$('#label_outer_fcfield_99').hide();//president
$('#container_fcfield_99').hide();
$('#label_outer_fcfield_47').show();//horaire
$('#container_fcfield_47').show();
$('#label_outer_fcfield_44').show();//lien
$('#container_fcfield_44').show();
$('#label_outer_fcfield_43').show();//galerie
$('#container_fcfield_43').show();
$('#label_outer_fcfield_92').show();//fax
$('#container_fcfield_92').show(); 
$('#label_outer_fcfield_45').hide();//fichier
$('#container_fcfield_45').hide();
$('#label_outer_fcfield_41').show();//image
$('#container_fcfield_41').show(); 
$('#label_outer_fcfield_102').hide();//type etablissement scolaire
$('#container_fcfield_102').hide(); 
$('#label_outer_fcfield_103').hide();//type equipement
$('#container_fcfield_103').hide(); 
}
else if (valeur == 'equipement') { // si equipement
$('#label_outer_fcfield_101').hide(); //type de structure economique
$('#container_fcfield_101').hide(); 
$('#label_outer_fcfield_100').hide();//type asso
$('#container_fcfield_100').hide();
$('#label_outer_fcfield_95').hide();// service
$('#container_fcfield_95').hide();
$('#label_outer_fcfield_96').hide();//specialite
$('#container_fcfield_96').hide();
$('#label_outer_fcfield_97').hide();//identite
$('#container_fcfield_97').hide();
$('#label_outer_fcfield_99').hide();//president
$('#container_fcfield_99').hide();
$('#label_outer_fcfield_47').show();//horaire
$('#container_fcfield_47').show();
$('#label_outer_fcfield_44').show();//lien
$('#container_fcfield_44').show();
$('#label_outer_fcfield_43').show();//galerie
$('#container_fcfield_43').show();
$('#label_outer_fcfield_92').show();//fax
$('#container_fcfield_92').show(); 
$('#label_outer_fcfield_45').show();//fichier
$('#container_fcfield_45').show();
$('#label_outer_fcfield_41').show();//image
$('#container_fcfield_41').show(); 
$('#label_outer_fcfield_102').hide();//type etablissement scolaire
$('#container_fcfield_102').hide();
$('#label_outer_fcfield_103').show();//type equipement
$('#container_fcfield_103').show(); 
}
}
    });
 
});
} ) ( jQuery );

    l'idée serait de savoir ce qui est coché pas seulement sur le change .... pour montré les champs nécessaire a chaque rechargement

    Merci d'avance pour votre aide

    • Partager sur Facebook
    • Partager sur Twitter
    micker
      17 avril 2019 à 16:45:34

      personne ? une idée ?
      • Partager sur Facebook
      • Partager sur Twitter
      piero5673
        17 avril 2019 à 16:51:13

        Bonjour, 

        Trop de code !!!!! je pense que personne ne vas le lire, surtout que ça concerne des trucs qu'on ne connais pas que tu ne fais que cacher / montrer. Dans l'idéal, essaye de reproduire ton problème avec 1 ou 2 inputs dans un formulaire. Et dans un monde parfait tu le fais dans jsfiddle ou codepen 

        Dans l'idée, avoir deux formulaires me semble plus approprié, comme ça tu n'as qu'un seul élément à cacher.

        • Partager sur Facebook
        • Partager sur Twitter
        micker
          17 avril 2019 à 17:17:52

          bon desoler je fais la version light

          ( function($) {
$(document).ready(function() {
// ici on cache les champs à l'initialisation
$('#label_outer_fcfield_101').hide();
$('#label_outer_fcfield_100').hide();
 
    $('input:radio[name="custom[type-de-fiche-annuaire][0]"]').change(function() { // lorsqu'on change de valeur dans la liste
    var valeur = $(this).val(); // valeur sélectionnée
//alert($(this).val());
 
 
if(valeur != '') { // si non vide
 
if(valeur == 'administration') {// si administration
$('#label_outer_fcfield_101').show();
$('#label_outer_fcfield_100').hide();
}
else if (valeur == 'equipement') { // si equipement
$('#label_outer_fcfield_101').hide();
$('#label_outer_fcfield_100').show();
}
}
});
  
});
} ) ( jQuery );

          l'idée c'est comment faire pour initialisé le formulaire en fonction de la valeur saisie dans le radio custom[type-de-fiche-annuaire][0]

          si c'est vide{

je cache certaine valeur

} si c'est une valeur {

j'affiche certaine valeur

} si change la valeur {

j'affiche certaine valeur

}



          • Partager sur Facebook
          • Partager sur Twitter
          piero5673
            17 avril 2019 à 17:48:30

            Tout d'abord, c'est mieux d'utiliser les opérateurs === et !== plutôt que == et !=.

            Voici un petit exemple, tu n'as plus qu'à l'adapter à tes besoins : https://jsfiddle.net/7oz6cgty/ 

            • Partager sur Facebook
            • Partager sur Twitter
            micker
              17 avril 2019 à 19:26:19

              hello deja merci de prendre du temps sur post je prend note sur les eporateur mais ... mon soucis c'est au chargement

              si la personne a deja selectionner une valeur dans le radio le form est initialisé avec les choses caché et non celle selectionner ... ou j'ai pas compris ton exemple

              • Partager sur Facebook
              • Partager sur Twitter
              piero5673
                18 avril 2019 à 11:05:34

                Il y a un truc que je ne comprends pas : tu part du principe que l'utilisateur peut cliquer sur le radio avant le chargement de la page ? Ou alors tu veux gérer le cas où il n'y a pas de valeur ?
                • Partager sur Facebook
                • Partager sur Twitter
                micker
                  19 avril 2019 à 9:30:34

                  il y a le cas sans valeur => c'est l'initialisation

                  mais il y a le cas ou le formulaire est éditer à nouveau donc la valeur est déjà sélectionnée

                  • Partager sur Facebook
                  • Partager sur Twitter
                  piero5673
                  micker
                    23 avril 2019 à 10:40:06

                    ok coll merci je vais regarder
                    • Partager sur Facebook
                    • Partager sur Twitter

                    Bouton radio qui cache/montre a l'initialisation

                    × Après avoir cliqué sur "Répondre" vous serez invité à vous connecter pour que votre message soit publié.
                    × Attention, ce sujet est très ancien. Le déterrer n'est pas forcément approprié. Nous te conseillons de créer un nouveau sujet pour poser ta question.
                    • Editeur ●
                    • Markdown