bonjour

j'ai des input caché et je veux que j'ai je selecte un nouveau option un input apparait :

mon essai :

$('#operation_form_type_conserne').change(function () {
        switch ($('#operation_form_type_conserne').val()){
            case 'RANGEE' :
                $('#RanngeConcerne').css('display','block') ;
                break;
            case 'BOITIER' :
                $('#BoitierConcerne').show() ;
                break;
            case 'DOSSIER' :
                $('#DossierConcerne').show() ;
                break;
            case 'DOCUMENT' :
                $('#DocumentConerner').show() ;
                break;
        }

code html :

 <div class="form-group">
                                                <label for="typeConcerne">Type Concerne:</label>
                                                <select id="operation_form_type_conserne" name="operation_form[type_conserne]" class="form-control"><option value="boitier">BOITIER</option><option value="rangee">RANGEE</option><option value="document">DOCUMENT</option><option value="dossier">DOSSIER</option></select>
                                            </div>
                                            <div class="form-group">
                                                <label for="operateurSysteme">Operateur Systeme:</label>
                                                <input type="text" id="operation_form_operateur_systeme" name="operation_form[operateur_systeme]" required="required" class="form-control" />
                                            </div>
                                            <div class="form-group" id="RanngeConcerne" style="display:none" >
                                                <label for="Ranger">Rangee Concerne:</label>
                                                <input type="text" id="operation_form_Num_rangee" name="operation_form[Num_rangee]" required="required" class="form-control" />
                                            </div>
                                            <div class="form-group" id="BoitierConcerne" style="display:none">
                                                <label for="Boitier">Boitier Concerne:</label>
                                                <input type="text" id="operation_form_Num_boitier" name="operation_form[Num_boitier]" required="required" class="form-control" />
                                            </div>
                                            <div class="form-group" id="DossierConcerne"  style="display:none">
                                                <label for="Dossier">Dossier Concerne:</label>
                                                <input type="text" id="operation_form_Num_dossier" name="operation_form[Num_dossier]" required="required" class="form-control" />
                                            </div>
                                            <div class="form-group" id="DocumentConerner" style="display:none">
                                                <label for="Documment">DOcument Concerne:</label>
                                                <input type="text" id="operation_form_Num_document" name="operation_form[Num_document]" required="required" class="form-control" />
                                            </div>

Salut,

La fonction "switch" est sensible à la case. Il faut donc que tu respectes bien les minuscules/majuscules ici.

Maintenant, dit nous ce que tu souhaites réellement faire, car là c'est vraiment flou..

A chaque select, le nouvel input doit apparaître et faire disparaître le suivant?

"

Rajoute ça juste avant ton switch.

$('div[class="form-group"]:gt(1)').hide();

On sélectionne toutes les div ayant pour classe "form-group", sauf les 2 premiers.

voila ma modification :

$("document").ready(function () {
    $('#operation_form_type_conserne').change(function () {
        $('div[class="aCacher"]').hide();

       if($('#operation_form_type_conserne').val()=='RANGEE') {
           $('#RanngeConcerne').show() ;
       }
       else if($('#operation_form_type_conserne').val()=='BOITIER') {
           $('#BoitierConcerne').show() ;
       }
       else if($('#operation_form_type_conserne').val()=='DOSSIER') {
           $('#DossierConcerne').show() ;
       }
       else {
           $('#DocumentConerner').show() ;
       }

    })
    }) ;

code html

<div class="form-group">
                                                <label for="typeConcerne">Type Concerne:</label>
                                                <select id="operation_form_type_conserne" name="operation_form[type_conserne]" class="form-control"><option value="boitier">BOITIER</option><option value="rangee">RANGEE</option><option value="document">DOCUMENT</option><option value="dossier">DOSSIER</option></select>
                                            </div>
                                            <div class="form-group">
                                                <label for="operateurSysteme">Operateur Systeme:</label>
                                                <input type="text" id="operation_form_operateur_systeme" name="operation_form[operateur_systeme]" required="required" class="form-control" />
                                            </div>
                                            <div class="form-group aCacher" id="RanngeConcerne" style="display:none" >
                                                <label for="Ranger">Rangee Concerne:</label>
                                                <input type="text" id="operation_form_Num_rangee" name="operation_form[Num_rangee]" required="required" class="form-control" />
                                            </div>
                                            <div class="form-group aCacher" id="BoitierConcerne" style="display:none">
                                                <label for="Boitier">Boitier Concerne:</label>
                                                <input type="text" id="operation_form_Num_boitier" name="operation_form[Num_boitier]" required="required" class="form-control" />
                                            </div>
                                            <div class="form-group aCacher" id="DossierConcerne"  style="display:none">
                                                <label for="Dossier">Dossier Concerne:</label>
                                                <input type="text" id="operation_form_Num_dossier" name="operation_form[Num_dossier]" required="required" class="form-control" />
                                            </div>
                                            <div class="form-group aCacher" id="DocumentConerner" style="display:none">
                                                <label for="Documment">Document Concerne:</label>
                                                <input type="text" id="operation_form_Num_document" name="operation_form[Num_document]" required="required" class="form-control" />
                                            </div>

mais n'a pas marché :( 

-
Edité par TheLordOne 26 juillet 2017 à 12:29:25

Hello,

Il t'a dit dès le début de faire attention a ta casse. La value est en minuscule...

oui c'est vrai merci j'ai pas fait attention mais je veux ajouter de l’animation quand l’apparition du champ je veux changé l'apparition soudain du champ !

Je te laisse aller faire un tour ici pour les animations

EDIT: Il est plus pratique d'utiliser les pseudos sélecteurs comme je l'ai fait plutôt que de surcharger ton code avec une classe supplémentaire.

$('div[class="form-group"]:gt(1)').hide();

-
Edité par lechtidu56 26 juillet 2017 à 13:22:47