Retour à la liste

Afficher / cacher un champ dans un formulaire

Créé : 09.07.2013, 09:43:39  -  Modifié : 18.08.2018, 21:37:50

Voici deux manière d'afficher ou de cacher un champ d'un formulaire en fonction de la réponse :

Première

//***************************************
//  utilisé pour un formulaire par afficher
//  ou cacher un div d'option
//  <input name="creervue" value="oui" id="creervue" onclick="show_div(2)" type="radio">
//  <input name="creervue" value="non" id="creervue" onclick="hide_div(2)" type="radio">
//  <span id="list_1" style="display: none;">texte</span>
//***************************************
function show_div(id){
    document.getElementById('list_' + id).style.display = 'inline';
}
function hide_div(id){
    document.getElementById('list_' + id).style.display = 'none';
}
</script>

Deuxième

    <html>
<head>
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
        #hidden { display: none; }
    </style>
</head>

<body>
    <form name="form1">
        <label>Oui <input type="radio" name="choix" value="1" /></label>
        <label>Non <input type="radio" name="choix" value="0" /></label>
        <div id="hidden">
            <label>Champ 1 <input type="text" /></label>
        </div>
    </form>
    <script type="text/javascript">
        var oui = document.form1.choix[0];
        var non = document.form1.choix[1];
        oui.onclick = function() {
            document.getElementById("hidden").style.display = "block"
        };
        non.onclick = function() {
            document.getElementById("hidden").style.display = "none"
        };
        //optionnel
        onload = function() {
            document.getElementById("hidden").style.display = "none"
        };
    </script>
</body>
</html>

 


Rendu :0.1883 | Mémoire :2.87MB

Accueil | Informations | Top