cambiare i campi di un FORM tramite un SELECT

**maolu** · 09-06-2005, 12:32

Ciao a tutti.
Voglio realizzare un form tramite il quale inserire tipi differenti di dati.
Tramite un select vorrei realizzare una cosa del genere :

<select>
<option>testi</option>
<option>files</option>
</select>

In modo tale che scegliendo un determinato tipo dall'option box, LA RIMANENTE PARTE DEL FORM si modifichi di conseguenza.

Per capirci con un esempio: se uno sceglie testi, sotto gli compare una textarea in cui inserire del testo, se sceglie files gli compare un pulsante per uploadare un file ecc.ecc.
Di default le aree dovrebbero essere invisibili..

Spero di essere stato sufficientemente chiaro...grazie per le risposte!

**Yoava333** · 09-06-2005, 12:49

codice:

  
 <form action="">
  <select onchange="this.form.action = this[this.selectedIndex].value;alert(this.form.action)">
   <option>-</option>
   <option value="t.asp">testi</option>
   <option value="f.asp">files</option>
  </select>
 </form>

**maolu** · 09-06-2005, 12:57

dunque...
Il tuo esempio e' chiaro, pero' il mio problema e' avere gli input sotto il selettore.

Per capirci al variare della scelta che l'utente fa, la TEXTAREA o l'INPUT devono comparire/scomparire.

Il mio problema e' come gestire la visibilta' di tali elementi...

**maolu** · 09-06-2005, 13:54

**maolu** · 09-06-2005, 14:48

OK, ho risolto.
Se a qualcuno interessasse ho fatto cosi':

<html>
<head>
<style type="text/css">
.nascosto{display:none}
</style>

<script language=javascript>
function changeIt(value)
{
if (value==1)
{
document.getElementById("testi").style.display = "inline";
document.getElementById("files").style.display = "none";
}
else
{
document.getElementById("testi").style.display = "none";
document.getElementById("files").style.display = "inline";
}
}
</script>

</head>

<body>

<form action="">
<select onchange="this.form.action = this[this.selectedIndex].value; changeIt(this.form.action);">
<option value="1">testi</option>
<option value="2">files</option>
</select>
</form>

<form name="testi" class="nascosto" action="">
<textarea cols=120 rows=15 name=testo>
</textarea>
<input type=submit value=Inserisci>
</form>

<form name="files" class="nascosto" action="">
<input type=file name=myfile SIZE=30>
<input type=submit value=Upload>
</form>

</html>

Discussione: cambiare i campi di un FORM tramite un SELECT

Strumenti discussione

Ricerca discussione

Visualizza

cambiare i campi di un FORM tramite un SELECT

Permessi di invio