Abilitare e disabilitare inputbox e textarea alternativamente con javascript

**Yuppies** · 17-02-2011, 19:11

un saluto a tutti qui del forum.
Volevo chiedere il vostro aiuto perchè non riesco a compiere una operazione con javascript.

Vi spiego il mio obiettivo:
ho tre radio button e vorrei che:
il form parte con la prima inputbox attiva e le successive tre inputbox disattive (sono disattive anche le due textarea)
alla pressione del secondo radio si disattivino le prime 4 inputbox e l'ultima textarea e si attivi la prima textarea;
alla pressione del terzo radio si disattivino le prime 4 inputbox e la prima textarea e si attivi la seconda textarea;
alla pressione della prima radio si disattivino la prima e la seconda textarea nonchè la seconda, la terza e la quarta inputbox e si attivi la prima inputbox;

naturalmente quando si effettua una disattivazione, i valori presenti nella inputbox o textarea dovrebbero sparire azzerandosi.

il codice che ho scritto è il seguente ma non mi funziona.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script language="Javascript" type="text/javascript">
function Disabilita(btnradio, obj_textarea)
{ if(parseInt(btnradio.value))
{ obj_textarea.value = ""
obj_textarea.disabled = true;
}
else
{ obj_textarea.disabled = false;
}
}
</script>
</head>

<body>
<form method="POST" action="?save=1" enctype="multipart/form-data" name="modulo">
<div id="scelta_1_elenco_radio"><input type="radio" name="TipoInserimento" value="elenco" checked onClick="Disabilita(this, this.form.semplice);"/></div>
<div id="scelta_2_elenco_radio"><input type="radio" name="TipoInserimento" value="semplice" onClick="Disabilita(this, this.form.semplice);"/></div>
<div id="scelta_3_elenco_radio"><input type="radio" name="TipoInserimento" value="avanzata" /></div>
<div id="txt_titolo_elenco">ELENCO</div>
<div id="sei">1° :
<input name="1" type="text" disabled="disabled" size="70" /></div>
<div id="quattro">2° :
<input name="2" type="text" disabled="disabled" size="70" /></div>
<div id="due">3° :
<input name="3" type="text" disabled="disabled" size="70" /></div>
<div id="input_4">4° :
<input name="4" type="text" disabled="disabled" size="70" /></div>
<div id="input_5">SEMPLICE
<textarea name="semplice" cols="66" rows="7" disabled="disabled" ></textarea></div>
<div id="input_6">AVANZATA
<textarea name="avanzata" cols="66" rows="7" disabled="disabled" ></textarea></div>
</form>
</body>
</html>

GRAZIE a chi mi da una mano.

**NonCeLaFaccio+** · 18-02-2011, 13:37

Ciao,
io gestirei caso per caso tutte le disable e gli svuotamenti anche se così il codice inevitabilmente si allunga, vedi se può andar bene.

La colorazione in giallo dei campi attivi l'ho aggiunta solo per comodità di test.

codice:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script language="Javascript" type="text/javascript">
   function stato(scelta) {
      switch (scelta) {
         case '1': {
            document.getElementById('1').disabled = false;
            document.getElementById('1').style.background = "yellow";
            document.getElementById('2').disabled = true;
            document.getElementById('2').value = "";
            document.getElementById('2').style.background = "white";
            document.getElementById('3').disabled = true;
            document.getElementById('3').value = "";
            document.getElementById('3').style.background = "white";
            document.getElementById('4').disabled = true;
            document.getElementById('4').value = "";
            document.getElementById('4').style.background = "white";
            document.getElementById('semplice').disabled = true;
            document.getElementById('semplice').value = "";
            document.getElementById('semplice').style.background = "white";
            document.getElementById('avanzata').disabled = true;
            document.getElementById('avanzata').value = "";
            document.getElementById('avanzata').style.background = "white";
            break;
         }
         case '2': {
            document.getElementById('1').disabled = true;
            document.getElementById('1').value = "";
            document.getElementById('1').style.background = "white";
            document.getElementById('2').disabled = true;
            document.getElementById('2').value = "";
            document.getElementById('2').style.background = "white";
            document.getElementById('3').disabled = true;
            document.getElementById('3').value = "";
            document.getElementById('3').style.background = "white";
            document.getElementById('4').disabled = true;
            document.getElementById('4').value = "";
            document.getElementById('4').style.background = "white";
            document.getElementById('semplice').disabled = false;
            document.getElementById('semplice').style.background = "yellow";
            document.getElementById('avanzata').disabled = true;
            document.getElementById('avanzata').value = "";
            document.getElementById('avanzata').style.background = "white";
            break;
         }
         case '3': {
            document.getElementById('1').disabled = true;
            document.getElementById('1').value = "";
            document.getElementById('1').style.background = "white";
            document.getElementById('2').disabled = true;
            document.getElementById('2').value = "";
            document.getElementById('2').style.background = "white";
            document.getElementById('3').disabled = true;
            document.getElementById('3').value = "";
            document.getElementById('3').style.background = "white";
            document.getElementById('4').disabled = true;
            document.getElementById('4').value = "";
            document.getElementById('4').style.background = "white";
            document.getElementById('semplice').disabled = true;
            document.getElementById('semplice').value = "";
            document.getElementById('semplice').style.background = "white";
            document.getElementById('avanzata').disabled = false;
            document.getElementById('avanzata').style.background = "yellow";
            break;
         }
      }
   }
</script>
</head>

<body>
   <form method="post" action="?save=1" enctype="multipart/form-data" name="modulo">
      <div id="scelta_1_elenco_radio">
         <input type="radio" name="TipoInserimento" value="elenco" onclick="stato('1');" checked />
      </div>
      <div id="scelta_2_elenco_radio">
         <input type="radio" name="TipoInserimento" value="semplice" onclick="stato('2');" />
      </div>
      <div id="scelta_3_elenco_radio">
         <input type="radio" name="TipoInserimento" value="avanzata" onclick="stato('3');" />
      </div>

      <div id="txt_titolo_elenco">ELENCO</div>

      <div id="sei">1° :
         <input id="1" type="text" size="70" style="background:yellow;"/>
      </div>
      <div id="quattro">2° :
         <input id="2" type="text" disabled="disabled" size="70" />
      </div>
      <div id="due">3° :
         <input id="3" type="text" disabled="disabled" size="70" />
      </div>
      <div id="input_4">4° :
         <input id="4" type="text" disabled="disabled" size="70" />
      </div>

      <div id="input_5">SEMPLICE
         <textarea id="semplice" cols="66" rows="7" disabled="disabled" ></textarea>
      </div>
      <div id="input_6">AVANZATA
         <textarea id="avanzata" cols="66" rows="7" disabled="disabled" ></textarea>
      </div>
   </form>
</body>
</html>

Ciao

**cavicchiandrea** · 18-02-2011, 13:55

Io fare cosi:

codice:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script language="Javascript" type="text/javascript">
function Disabilita(stato1,stato2,stato3,stato4,stato5,stato6)
            document.getElementById('_1').disabled = stato1;
            document.getElementById('_2').disabled = stato2;
            document.getElementById('_3').disabled = stato3;
            document.getElementById('_4').disabled = stato4;
            document.getElementById('semplice').disabled = stato5;
            document.getElementById('avanzata').disabled = stato6;
}
</script>
</head>

<body>
<form method="POST" action="?save=1" enctype="multipart/form-data" name="modulo">
<div id="scelta_1_elenco_radio"><input type="radio" name="TipoInserimento" value="elenco" checked onClick="Disabilita(true, false, false, false, false, false);"/></div> 
<div id="scelta_2_elenco_radio"><input type="radio" name="TipoInserimento" value="semplice" onClick="Disabilita(false, false, false, false, true, false);"/></div>
<div id="scelta_3_elenco_radio"><input type="radio" name="TipoInserimento" value="avanzata" onClick="Disabilita(false, false, false, false, false, true);" /></div>
<div id="txt_titolo_elenco">ELENCO</div>
<div id="sei">1° :
<input name="_1" id="_1" type="text" disabled="disabled" size="70" /></div>
<div id="quattro">2° :
<input name="_2" id="_2" type="text" disabled="disabled" size="70" /></div>
<div id="due">3° :
<input name="_3 id="_3" type="text" disabled="disabled" size="70" /></div>
<div id="input_4">4° :
<input name="_4" id="_4" type="text" disabled="disabled" size="70" /></div> 
<div id="input_5">SEMPLICE
<textarea name="semplice" id="semplice" cols="66" rows="7" disabled="disabled" ></textarea></div>
<div id="input_6">AVANZATA
<textarea name="avanzata" id="avanzata" cols="66" rows="7" disabled="disabled" ></textarea></div>
</form>
</body>

Discussione: Abilitare e disabilitare inputbox e textarea alternativamente con javascript

Strumenti discussione

Ricerca discussione

Visualizza

Abilitare e disabilitare inputbox e textarea alternativamente con javascript

Permessi di invio