Bonjour à tous et toutes,

Désolé de vous déranger mais je me retrouve face à un problème dans mon code. J'ai deux boutons radio name="bouton_formulaire" et deux formulaires différents. J'aimerai qu'en fonction du radio button checked que le formulaire affiché ne soit pas le même. Pour cela j'utilise dans mon css le qqchose:checked ~ form mais rien ne s'affiche. Voici le code html ci dessous:

<div class="col-md-12 form_group" id="form">
    <div class="col-md-3 col-md-offset-3 choix">
        <input type="radio" name="bouton_formulaire" value="logiciel" id="bouton_logiciel" checked="checked">
        <label for="bouton_logiciel">Logiciel</label>
    </div>
    <div class="col-md-3 choix">
        <input type="radio" name="bouton_formulaire" value="script" id="bouton_script">
        <label for="bouton_script">Script</label>
    </div>
    <div class="formulaire_logiciel">
        <form name="formulaire_logiciel" method="post" action="">
            <div class="col-md-12">
                <div class="col-md-5 col-md-offset-1 form_group">
                    <label>Nom/Prenom : </label>
                    <br>
                    <input class="col-md-10" type="text" name="user_name">
                </div>
                <div class="col-md-5 col-md-offset-1 form_group">
                    <label>E-mail : </label>
                    <br>
                    <input class="col-md-10" type="email" name="user_mail" placeholder="email@example.com" value="" required>
                </div>
            </div>
            
            <div class="col-md-12">
                <div class="col-md-5 col-md-offset-1 form_group">
                    <label>Laboratoire : </label>
                    <br>
                    <input class="col-md-10" type="text" name="user_company">
                </div>
                <div class="col-md-5 col-md-offset-1 form_group">
                    <label>Phone Number : </label>
                    <br>
                    <input class="col-md-10" type="text" name="user_phone">
                </div>
            </div>
            <div class="col-md-12 form_group" id="budget">
                <label class="col-md-11 col-md-offset-1 titre_budget">Votre budget ?</label>
                <div class="col-md-3 choix">
                    <input type="radio" name="budget" value="5K€ à 10K€" id="5+">
                    <label for="5+">5K€ à 10K€</label>
                </div>
                <div class="col-md-3 choix">
                    <input type="radio" name="budget" value="10K€ à 25K€" id="10+">
                    <label for="10+">10K€ à 25K€</label>
                </div>
                <div class="col-md-3 choix">
                    <input type="radio" name="budget" value="25K€ à 50K€" id="25+">
                    <label for="25+">5K€ à 10K€</label>
                </div>
                <div class="col-md-3 choix">
                    <input type="radio" name="budget" value="50K€ +" id="50+">
                    <label for="50+">50K€ +</label>
                </div>
            </div>
            <div class="col-md-12 form_group">
                <label class="col-md-2 col-md-offset-1" >Sujet : </label>
                <input class="col-md-5" type="text" name="mail_subject">
            </div>
            
            <div class="col-md-12 ">
                <label class="col-md-2 col-md-offset-1">Message : </label>
                <textarea class="col-md-8" name="message" rows="15"></textarea>
            </div>

            <div class="col-md-12 form_group">
                <input class="col-md-offset-3" type="submit" name="send" value="Submit">
            </div>
        </form>
    </div>
    <div class="formulaire_script">
        <form name="formulaire_script" method="post" action="">
            <div class="col-md-12">
                <div class="col-md-5 col-md-offset-1 form_group">
                    <label>Nom/Prenom : </label>
                    <br>
                    <input class="col-md-10" type="text" name="user_name">
                </div>
                <div class="col-md-5 col-md-offset-1 form_group">
                    <label>E-mail : </label>
                    <br>
                    <input class="col-md-10" type="email" name="user_mail" placeholder="email@example.com" value="" required>
                </div>
            </div>
            <div class="col-md-12">
                <div class="col-md-5 col-md-offset-1 form_group">
                    <label>Laboratoire : </label>
                    <br>
                    <input class="col-md-10" type="text" name="user_company">
                </div>
                <div class="col-md-5 col-md-offset-1 form_group">
                    <label>Phone Number : </label>
                    <br>
                    <input class="col-md-10" type="text" name="user_phone">
                </div>
            </div>
            <div class="col-md-12 form_group">
                <label class="col-md-2 col-md-offset-1" >Sujet : </label>
                <input class="col-md-5" type="text" name="mail_subject">
            </div>
            <div class="col-md-12 ">
                <label class="col-md-2 col-md-offset-1">Message : </label>
                <textarea class="col-md-8" name="message" rows="15"></textarea>
            </div>
            <div class="col-md-12 form_group">
                <input class="col-md-offset-3" type="submit" name="send" value="Submit">
            </div>
        </form>
    </div>
</div>

et le css associé :

#form {
    text-align: center;
    max-width: 100%;
    width: 100%;
}

#form input[type="radio"] {
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    margin-top: 0;
    opacity: 0;
    display: block;
    z-index: -1;
}

#form input[type="radio"]:checked ~ label {
    background: #fc9812;
    color: #fff;
    border: 1px solid #fc9812;
}

.formulaire_logiciel,
.formulaire_script {
    display: none;
}

#bouton_logiciel:checked ~ .formulaire_logiciel {
    display: block;
}

#bouton_script:checked ~ .formulaire_script {
    display: block;
}

Le fait est que cette fonctionnalité checked je l'utilise au dessus pour changer la couleur du bouton radio checked et cela fonctionne parfaitement. C'est juste au niveau de l'affichage des div de formulaire que j'ai un soucis.

J'avoue ne pas comprendre pourquoi cela ne fonctionne pas donc si quelqu'un voit le problème lui serait-il possible de m'éclairer svp ?

Ps: je sais que je peux le faire en js et s'il n'est pas possible de résoudre mon problème actuel c'est ce que je ferai mais malgrès tout j'aimerai comprendre ou est mon erreur.

Merci d'avance pour votre temps et vos réponses

Cordialement

-
Edité par Calem91 3 décembre 2016 à 13:45:40

Bonjour Calem91

tu as un problème dans ton sélecteur.

#bouton_logiciel:checked ~ .formulaire_logiciel

cela veut dire : sélectionne les balisesde classe ".formulaire" qui suivent la balise d'id "bouton_logiciel" si elle est coché.

Or la, elle ne suit pas, elle n'est même pas dans la même balise.

Mets la dans même balise que ta balise radio et ce code marchera.

Pour 2 balises qui ne sont pas dans la même balise, je ne sais pas comment on sélectionne en css. J'utiliserais du javascript mais il y a peut être une solution en css.

-
Edité par Rasgardo 3 décembre 2016 à 21:07:38

Bonjour YvesEychenn,

Merci pour ta réponse. Testé et approuvé. Plus que quelques petites modifications dans mon code pour jumeler correctement avec l'utilisation de bootstrap et ça sera bon