Come generare quantita campi input basati su valore da drop down list

di il
3 risposte

Come generare quantita campi input basati su valore da drop down list

Io non sono un'esperto di HTML/Javascript cosi' spero che qualcuno mi possa autare.

In un form devo acquisire le eta' di una lista di persone.
Io non conosco in anticipo la quantita' di queste persone.

Quindi devo generare dinamicamente una quantita' di campi Input con i quali raccogliere le eta' delle persone basandomi sul valore ottenuto da una select di una drop down list.

La quantita' delle persone sara cioe' determinata dal valore selezionato dalla drop down list.

Per esempio, se l'utente seleziona il valore "3" dalla drop down list, nel form io devo generare dinamicamente 3 input fields per acquisire le eta' delle 3 persone.
Se l'utente seleziona il valore "0" dalla drop down list, nel form non devo generare alcun input fields.
L'unica cosa che ho capito e' che devo usare "onChange" nella drop down list.

Vorrei usare solo HTML e Javascript perche' non voglio entrare in conflitto con jQuery o altre librerie presenti nella pagna che devo modificare.
Spero che usando solo HTML/Javascript sia possbile ottenere il risultato voluto.

Allo stesso tempo devo ottenere il risultato senza ricaricare la pagina.

Ho fatto qualche prova per imparare a mostrare/nascondere un campo Input - di seguito il mio codice:
<select name="opt" label="some opts" id="opts" onchange="showdv(this,'one','two');" >
    <option value="one" selected="true">Option one</option>
    <option value="two" >Option two</option>
</select>
<div id="codFiscaleField" style="display:none;">
   <input name="codFiscale" size="50"></input>
</div>
<script>
        function showdv(obj,id1,id2) {
            txt=obj.options[obj.selectedIndex].text;
            document.getElementById("codFiscaleField").style.display='none';
             
            if (txt.match(id1)) {
                document.getElementById("codFiscaleField").style.display='block';
                document.getElementById("codFiscaleFieldXxx").value=txt
            }
             
            if (txt.match(id2)) {
                document.getElementById("codFiscaleField").style.display='block';
                document.getElementById("codFiscaleFieldXxx").value=txt
            }
        }
</script>
Se scelgo "Option two" lo script mostra il campo di input correttamente.

Ma il mio obiettivo e' diverso: Quando l'utente seleziona "Option two" (o "Option three" o "Option four" e cosi via) devo mostrare due campi di Inout (o tre o quattro campi di Input).

L'opzione selezionata determina il numero di campi Input , per esempio:

L'Utente seleziona "Option three", io devo mostrare tre campi Input.
L'Utente seleziona "Option four", io devo mostrare quattro campi Input.

La select della drop down list determina il numero delle Persone e io devo raccogliere le eta' delle Persone.

Grazie per qualsiasi forma di aiuto !
Ivano C.

3 Risposte

Devi accedere o registrarti per scrivere nel forum
3 risposte