Bonjour à tous,

Je n'ai pas beaucoup de compétences sur JS, aussi je me suis lancé sur quelque chose qui m'a paru assez abordable pour débuter. J'essai de faire apparaître un input sur un select précis que l'utilisateur sélectionnera. 

Voici le formulaire : 

      <form action="" method="post">

                        <select onchange="hideElement()" class="browser-default custom-select" id="choose">
                            <option selected>Vous recherchez ...</option>
                            <option value="1">Un technicien</option>
                            <option value="2">Une pièce</option>
                            <option value="3">Un box</option>

                        </select>

                            <input type="text" placeholder="Saisissez le nom du technicien" id="champ1" style="display:none">
                            <input type="text" placeholder="Saisissez le nom du produit" id="champ2" style="display: none">
                            <input type="text" placeholder="Saisissez le nom du box" id="champ3" style="display: none">
                    </form>

Ainsi que le traitement en JS :

<script type="text/javascript">

    function hideElement() {
        var type  = document.getElementById("champ1").value;
        var type2 = document.getElementById("champ2").value;
        var type3 = document.getElementById("champ3").value;


        if (type === "champ1"){
            document.getElementById("champ1").style.display="block";
        }else if (type2 === "champ2"){
            document.getElementById("champ2").style.display="block";
        }else if (type3 === "champ3"){
            document.getElementById("champ3").style.display="block";
        }
    }
</script>

Seulement, absolument rien ne se passe quand je teste ce script sur mon formulaire, la console ne me renvoi aucune erreur. J'ai d'abord pensé que mes scripts n'étaient pas du tout pris en compte, mais après avoir testé, il est apparu que non. Je viens donc vers vous pour avoir quelques conseils qui m'aiderait à résoudre le problème. Merci d'avance !

Salut,

function hideElement() {
    var type  = document.getElementById("champ1").value; // type = '' (string vide)
    var type2 = document.getElementById("champ2").value; // type2 = ''
    var type3 = document.getElementById("champ3").value; // type3 = ''
// Tes champs n'ont pas de valeur et leurs valeur n'est pas ce que tu cherche as obtenir. Ce dont tu as besoin, c'est de la valeur de ton select, pas des input.


    if (type === "champ1") { // Toujours et à jamais faux
        document.getElementById("champ1").style.display="block";
    }
    else if (type2 === "champ2") { // idem
        document.getElementById("champ2").style.display="block";
    }
    else if (type3 === "champ3") { // idem
        document.getElementById("champ3").style.display="block";
    }
}

Essaie ça :

<select onchange="hideElement.apply(this)" class="browser-default custom-select" id="choose">
    <option selected>Vous recherchez ...</option>
    <option value="1">Un technicien</option>
    <option value="2">Une pièce</option>
    <option value="3">Un box</option>
</select>
<input type="text" placeholder="Saisissez le nom du technicien" id="champ1" style="display:none">
<input type="text" placeholder="Saisissez le nom du produit" id="champ2" style="display: none">
<input type="text" placeholder="Saisissez le nom du box" id="champ3" style="display: none">

function hideElement() {
    document.querySelectorAll('[id^="champ"]').forEach(x => x.style.display = 'none');
    document.getElementById('champ' + Number(this.value)).style.display = 'block';
}

-
Edité par BrainError 21 janvier 2020 à 12:04:30

Eh bien merci pour la correction ! Tout fonctionne ! Encore merci pour avoir pris le temps de m'indiquer mes erreurs et les corriger !