Input à la demande sur select

4 octobre 2019 à 16:15:08

Bonjour ou re-bonjour,

Je souhaiterai pour un site d'inscription à un voyage faire un select qui fasse apparaitre autant d'input de type text que de nombre de personne sélectionné. Naturellement afin d'avoir chaque information via un post les name doivent être différente.

J'ai essayer de construire ça mais ca ne fonctionne pas...

Pourriez-vos m'aider?

Merci

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta charset="utf-8" />
 
</head>
<body>
    <select id="pepole" onchange="activer();">
        <option value="select">Selection du n° de voyageur</option>
        <option value="1">1 Personne</option>
        <option value="2">2 personnes</option>
    <!--<option value="3"> etc ..</option>-->    
    </select><p>
    <span class="toDisplay" style="display:none">Si autre : </span><br/>
    <input type="text" name="name1" class="toDisplay" style="display:none" /><br/>
    <input type="text" name="Fname1" class="toDisplay" style="display:none" /><br/>
    <input type="text" name="adress1" class="toDisplay" style="display:none" /><br/>
    <p>
    <input type="text" name="name2" class="toDisplay2" style="display:none" /><br/>
    <input type="text" name="Fname2" class="toDisplay2" style="display:none" /><br/>
    <input type="text" name="adress2" class="toDisplay2" style="display:none" /><br/>
    <p>

<!-- SCRIPT -->
    <script>
        function activer()
        {
            var select = document.getElementById( "pepole" )
            var otherFields = document.querySelectorAll( ".toDisplay" )
            if ( select.value == "1" )
                Array.from( otherFields ).forEach( function ( input ) { input.style.display = "inline-block" } )
            else
                Array.from( otherFields ).forEach( function ( input ) { input.style.display = "none" } )

            var otherFields = document.querySelectorAll( ".toDisplay,.toDisplay2" )
            if ( select.value == "2" )
                Array.from( otherFields ).forEach( function ( input ) { input.style.display = "inline-block" } )
            else
                Array.from( otherFields ).forEach( function ( input ) { input.style.display = "none" } )
        }
    </script>
</body>
</html>

Webfun35

Arthur222

6 octobre 2019 à 15:08:02

Comme ceci :

<body>
<select id="sel" onchange="changer(this);">
<option value="2" selected="selected">deux personnes</option>
<option value="10">dix personnes</option>
</select>

<div id="inputs"></div>

<script>
var d = document.getElementById("sel");
changer(d);//par default

function changer(el){
    var a = el.options[el.selectedIndex].value;
    var num = parseInt(a, 10);//on convertit un string en int...
    var ins = document.getElementById("inputs")
    ins.innerHTML = "";
    for (var i=1; i<=num; i++){ //...pour l'utiliser ici
    	ins.innerHTML += '<input type="text" value="'+i+'">';
    }
}

</script>
</body>

Webfun35

7 octobre 2019 à 21:58:23

Ah super nickel 👌

he merci bcp !!!!

Webfun35

Input à la demande sur select

× 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.

Input à la demande sur select

Input à la demande sur select

Supprimer

Modérer

Signaler le message aux modérateurs