Da menù a tendina a casella

Gli argomenti di questa pagina

  • Da menù a tendina a casella
  • Esempio 1: da casella a discesa a casella di testo
  • Esempio 2: nome casella testo predefinita
  • Esempio 3: alla funzione JS vengono mandati il nome della casella a tendina e l'id della casella di testo
  • Esempio 4: la funzione JS si basa sul nome della casella di testo
  • Esempio 5: evitare doppioni con 'indexOf'

Da menù a tendina a casella

In questo esempio i valori scelti dalla select verranno trasferiti nella casella di testo che le sta a fianco.
Vedremo tre esempi che svolgono lo stesso lavoro in tre modi differenti

  • Nel primo esempio viene chiamata la funzione passando il solo nome sella SELECT
  • Nel secondo esempio la funzione viene chiamata passando il nome della SELECT e l'ID della casella di testo
  • Nel terzo esempio la casella di testo non ha un ID ma il solo nome per cui vengono passati alla funzione il nome della SELECT ed il nome della casella di testo

Esempio 1: da casella a discesa a casella di testo

Con questo primo esempio intendiamo trasferire la voce scelta da un menù a discesa in una casella di testo.
Alla funzione JS si invia, come argomento il nome del menù a discesa
viene letto l'indice della scelta fatta
se questo è diverso da ' 0 ' si legge il valore associato a quell'indice
questo valore viene scritto nella casella di testo che ha come nome "nome" e che si trova nel form che ha come nome "form_1"
Se l'indice letto è ' 0 ' viene cancellato l'eventuale contenuto della casella di testo.

1
2
3
4
5
6
7
8
9
10
function transfer(sel){
    if(sel.selectedIndex!=0){
        lnk=sel.options[sel.selectedIndex].value
        if(lnk!=null){
                document.form_1.nome.value=lnk;
        }
    } else {
        document.form_1.nome.value="";
    }
}

Per la creazione del form iniziamo col dargli il nome "form_1". Se scegliamo un nome diverso dobbiamo cambiarlo anche nella funzione JS.
La funzione viene richiamata usando l'evento onchange della select e viene inviato come argomento il nome della select usando la parola this.
Si continua con la casella di testo a cui vien dato il nome "nome". Se si sceglie un altro nome occorre cambiarlo anche nella funzione JS.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<form name="form_1" method="post" action=""> 
<table>
<tr>
<td>
<select size="1" name="scelta" class="form" onchange="transfer(this)">
<option selected="selected">- SCEGLI -</option>
<option value="Marco">Marco</option> 
<option value="Giacomo">Giacomo</option> 
<option value="Giovacchino">Giovacchino</option>     
<option value="Giovanni">Giovanni</option>     
<option value="Ulisse">Ulisse</option>     
</select>
</td>
<td>
<input name="nome" type="text" size="50" />
</td>
</tr>
</table>
</form>

Qui una semplice dimostrazione.

Prova col primo form

Esempio 2: nome casella testo predefinita

In questo primo esempio:
la funzione JS JumpMenu() accetta come parametro il nome della SELECT. Di conseguenza per agire deve riferirsi alla casella di testo usando il suo nome che deve essere necessariamente noto (document.pippo.accetta).
Si inizia il lavoro leggendo il valore già presente nella casella di testo chiamata "accetta" della form "pippo".
Quindi si legge il valore della SELECT associato all'indice scelto
A questo punto si dovrebbe scrivere il nuovo valore nella casella di testo "accetta", ma prima si controlla lo stato della casella di testo.
Se questa è vuota si aggiunge semplicemente il valore letto dalla Select.
Se, viceversa, la casella di testo contiene già dei valori, il nuovo valore viene accodato a quelli già esistenti preceduto da una virgola o da altro carattere di nostra scelta

1
2
3
4
5
6
7
8
9
10
11
12
13
function JumpMenu(sel){
    testo= document.pippo.accetta.value;
    if(sel.selectedIndex!=0){
        lnk=sel.options[sel.selectedIndex].value
        if(lnk!=null){
            if (testo == "") {
                document.pippo.accetta.value=lnk;
            } else {
                document.pippo.accetta.value=testo + ", " + lnk;
            }
        }
    } else document.pippo.accetta.value="";
}

Questo è il codice che disegna il nostro form e si nota come la SELECT chiama la funzione JS "JumpMenu()" inviando come argomento l'oggetto "this" che si riferisce alla SELECT.
La funzione viene chiamata con: onchange="JumpMenu(this)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<form name="pippo" method="post" action="">
<table>
<tr>
<td>
<select size="1" name="type" class="form" onchange="JumpMenu(this)" style="font-size: 8 pt; font-family: Verdana">
<option selected="selected">- SCEGLI -</option>
<option value="Marco">Marco</option> 
<option value="Giacomo">Giacomo</option> 
<option value="Giovacchino">Giovacchino</option>     
<option value="Giovanni">Giovanni</option>     
<option value="Ulisse">Ulisse</option>     
</select>
</td>
<td>
<input name="accetta" type="text" id="accetta" size="50" />
</td>
</tr>
</table>
</form>

Qui è possibile vedere il codice in azione

Prova col secondo form

Esempio 3: alla funzione JS vengono mandati il nome della casella a tendina e l'id della casella di testo

Questo secondo esempio è leggermente diverso da quello visto nel primo esempio, ma sostanzialmente esegue le stesse operazioni.
La differenza è che la funzione JS "sends()" richiede due argomenti: sel che si riferisce alla SELECT e casella che si riferisce alla casella di testo.
In questo modo la funzione sarà più efficiente perchè può essere usata su form senza vincoli sul nome da dare alla casella di testo che dovrà ospitare i valori scelti dalla SELECT.

1
2
3
4
5
6
7
8
9
10
11
12
13
function sends(sel,casella){
    testo= document.getElementById(casella).value;
    if(sel.selectedIndex!=0){
        lnk=sel.options[sel.selectedIndex].value
        if(lnk!=null){
            if (testo == "") {                
                document.getElementById(casella).value=lnk;
            } else {
                document.getElementById(casella).value=testo + ", " + lnk;
            }
        }
    } else document.getElementById(casella).value="";
}

Qui sotto l'esempio del form che usa la funzione appena vista. La SELECT invoca la funzione JS "sends()" inviandole come argomenti il nome della SELECT ed il nome, o meglio l'ID, della casella di testo.
La funzione viene chiamata con: onchange=\"sends(this,'".$nome_casella."') dove $nome_casella è l'ID dato alla casella di testo.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<?php
$nome_casella 
"casella_testo";
echo 
"<form name=\"pluto\" method=\"post\" action=\"\">\n";
echo 
"<table>\n";
echo 
"<tr>\n";
echo 
"<td>\n";
echo 
"<select size=\"1\" id=\"Scelta1\" name=\"Scelta1\" onchange=\"sends(this,'".$nome_casella."')\">\n";
echo 
"<option selected=\"selected\">- SCEGLI -</option>\n";
echo 
"<option value=\"Marco\">Marco</option>\n";
echo 
"<option value=\"Giacomo\">Giacomo</option>\n";
echo 
"<option value=\"Giovacchino\">Giovacchino</option>\n";
echo 
"<option value=\"Pasquale\">Pasquale</option>\n";
echo 
"<option value=\"Giovanni\">Giovanni</option>\n";
echo 
"</select>\n";
echo 
"</td>\n";
echo 
"<td>\n";
echo 
"<input name=\"qualsiasi_nome\" type=\"text\" id=\"".$nome_casella."\" size=\"50\" />\n";
echo 
"</td>\n";
echo 
"</tr>\n";
echo 
"</table>\n";
echo 
"</form>\n"
?>

Qui di seguito si vede il codice in azione.

Prova col terzo form

Esempio 4: la funzione JS si basa sul nome della casella di testo

Questo è un altro esempio in tema. La differenza è che alla funzione sends_data() vengono inviati il nome della SELECT ed il nome della casella di testo che questa volta non ha un ID.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
function sends_data(sel,casella){
    cas=document.getElementsByName(casella);
    testo= cas[0].value;
    if(sel.selectedIndex!=0){
        lnk=sel.options[sel.selectedIndex].value
        if(lnk!=null){
            if (testo == "") {                
                cas[0].value=lnk;
            } else {
                cas[0].value=testo + ", " + lnk;
            }
        }
    }
    else cas[0].value="";
}

Il form è simile al precedente, ma questa volta alla casella di testo non è stato dato un ID per cui la funzione JS sends_data() viene chiamata mandandole, come argomenti, il nome della SELECT ed il nome della casella di testo in questa maniera: onchange=\"sends_data(this,'".$nome_casella."').

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
    <?php
    $nome_casella 
"il_testo";
    echo 
"<form name=\"paperino\" method=\"post\" action=\"\">\n";
    
?>
    <table>
    <tr>
    <td>
    <?php
    
echo "<select size=\"1\" id=\"Scelta2\" name=\"Scelta2\" onchange=\"sends_data(this,'".$nome_casella."')\">\n";
    echo 
"<option selected=\"selected\">- SCEGLI -</option>\n";
    echo 
"<option value=\"Marco\">Marco</option>\n";
    echo 
"<option value=\"Giacomo\">Giacomo</option>\n";
    echo 
"<option value=\"Giovacchino\">Giovacchino</option>\n";
    echo 
"<option value=\"Lo Russo\">Lo Russo</option>\n";
    echo 
"<option value=\"Paperino\">Paperino</option>\n";
    echo 
"</select>\n";
    
?>
    </td>
    <td>
    <?php
    
echo "<input name=\"".$nome_casella."\" type=\"text\" size=\"50\" />\n";
    
?>
    </td>
    </tr>
    </table>    
    <?php
    
echo "</form>\n"
    
?>

L'esempio in pratica

Prova col quarto form

Esempio 5: evitare doppioni con 'indexOf'

In questo esempio si vuole evitare di scegliere più volte lo stesso nome. Per fare questo alla funzione JS si aggiunge un controllo basato sul metodo indexOf().

Il metodo indexOf() - case sensitive - restituisce la posizione della prima occorrenza di un valore specificato in una stringa.
Questo metodo restituisce -1 se il valore da cercare non viene trovato.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
function find_sends(sel,casella){
    var testo= document.getElementById(casella).value;
    if(sel.selectedIndex!=0){
        var lnk=sel.options[sel.selectedIndex].value
        if(lnk!=null){
            if (testo.indexOf(lnk)==-1) {
                if (testo == "") {
                    document.getElementById(casella).value=lnk;
                } else {
                    document.getElementById(casella).value=testo + ", " + lnk;
                }
            } else {
                alert ('Voce già scelta');
            }
        }
    } else document.getElementById(casella).value="";
}

Questo che segue è il form tramite cui viene chiamata la funzione JS.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<form name="paperoga" method="post" action="">
<table>
<tr>
<td>
<select size="1" id="scelta_nome" name="scelta_nome" onchange="find_sends(this,'metti_qua')">
<option selected="selected">- SCEGLI -</option>
<option value="Marco">Marco</option>
<option value="Giacomo">Giacomo</option>
<option value="Giovacchino">Giovacchino</option>
<option value="Pasquale">Pasquale</option>
<option value="Giovanni">Giovanni</option>
</select>
</td>
<td>
<input name="qualsiasi_nome" type="text" id="metti_qua" size="50" />
</td>
</tr>
</table>
</form> 

E questo è l'esempio pratico.

Prova scelte univoche

 

 



settore tecnico il sito di lorettabweb il Forum di sostegno
il forum il forum il forum