Disabilitare i campi di un form

**simone75** · 20-07-2006, 15:52

Io stò cercando di disabilitare alcuni campi di un form in base alla scelta tramite una select. Ho scritto il seguente codice ma non funziona bene:

function cp(){
if(document.modulo.registrazione[1].value = "privato")
{
document.modulo.ragsoc.disabled = true;
document.modulo.piva.disabled = true;
return false;
}
else if(document.modulo.registrazione[2].value = "azienda")
{
document.modulo.nome.disabled = true;
document.modulo.cognome.disabled = true;
return false;
}
return true
}

<body>
<select size="1" name="registrazione" onchange="return cp();">
<option value="scegli">Scegli </option>
<option value="privato">Privato </option>
<option value="azienda">Azienda</option>
</select>
Nome <input name="nome" type="text">
Cognome <input name="cognome" type="text">
Ragione Sociale <input name="ragsoc" type="text">
Partita Iva <input name="piva" type="text">
</body>

Sia che scelgo "privato" o "azienda" mi vengono disabilitati sempre i campi "ragione sociale" e "partita iva" mentre "nome" e "cognome" rimangono invariati.
Dove sto sbagliando??

**cavicchiandrea** · 20-07-2006, 16:15

Originariamente inviato da simone75
Io stò cercando di disabilitare alcuni campi di un form in base alla scelta tramite una select. Ho scritto il seguente codice ma non funziona bene:

function cp(){
if(document.modulo.registrazione[1].value = "privato")
{
document.modulo.ragsoc.disabled = true;
document.modulo.piva.disabled = true;
return false;
}
else if(document.modulo.registrazione[2].value = "azienda")
{
document.modulo.nome.disabled = true;
document.modulo.cognome.disabled = true;
return false;
}
return true
}

<body>
<select size="1" name="registrazione" onchange="return cp();">
<option value="scegli">Scegli </option>
<option value="privato">Privato </option>
<option value="azienda">Azienda</option>
</select>
Nome <input name="nome" type="text">
Cognome <input name="cognome" type="text">
Ragione Sociale <input name="ragsoc" type="text">
Partita Iva <input name="piva" type="text">
</body>

Sia che scelgo "privato" o "azienda" mi vengono disabilitati sempre i campi "ragione sociale" e "partita iva" mentre "nome" e "cognome" rimangono invariati.
Dove sto sbagliando??

Prova cosi:

codice:

function cp(Sel){
if(Sel == "privato")
  {
  document.modulo.ragsoc.disabled = true;
  document.modulo.piva.disabled = true;
  return false;
  }
else if(Sel == "azienda")
  {
  document.modulo.nome.disabled = true;
  document.modulo.cognome.disabled = true;
  return false;
  } 
else if(Sel == "scegli")
  {
 alert("Opzione non amessa");
  return false;
  } 
  return true
}

<body>
<select size="1" name="registrazione" onchange="return cp(this[this.selectedIndex].value);">
<option value="scegli">Scegli  </option>
<option value="privato">Privato  </option>					    
<option value="azienda">Azienda</option>
</select>
Nome <input name="nome" type="text">
Cognome <input name="cognome" type="text">
Ragione Sociale <input name="ragsoc" type="text">
Partita Iva <input name="piva" type="text">
</body>

**simone75** · 20-07-2006, 16:59

Purtroppo c'è un piccolo problema. Funziona meglio di prima ma solo alla prima scelta. Cioè se, una volta caricata la pagina, scegliamo privato o azienda funziona correttamente, Se invece ad es. clicchiamo su privato e poi cambiamo idea e scegliamo azienda, alla seconda scelta rimangono tutti e quattro campi bloccati. Solo se facciamo il refresh della pagina si sbloccano i campi della prima scelta.
Come si può risolvere?

**cavicchiandrea** · 20-07-2006, 18:15

Prova cosi:

codice:

function cp(Sel){
if(Sel == "privato"){
  document.modulo.ragsoc.disabled = true;
  document.modulo.piva.disabled = true;
  return false;
  }else{
  document.modulo.ragsoc.disabled = false;
  document.modulo.piva.disabled = false;
  return false;
}
if(Sel == "azienda") {
  document.modulo.nome.disabled = true;
  document.modulo.cognome.disabled = true;
  return false;
  }else{ 
 document.modulo.nome.disabled = false;
  document.modulo.cognome.disabled = false;
  return false;
}
if(Sel == "scegli"){
 alert("Opzione non amessa");
  return false;
  } 

}

<body>
<select size="1" name="registrazione" onchange="return cp(this[this.selectedIndex].value);">
<option value="scegli">Scegli  </option>
<option value="privato">Privato  </option>					    
<option value="azienda">Azienda</option>
</select>
Nome <input name="nome" type="text">
Cognome <input name="cognome" type="text">
Ragione Sociale <input name="ragsoc" type="text">
Partita Iva <input name="piva" type="text">
</body>

**pierofix** · 20-07-2006, 21:57

Mi avete dato lo spunto per provare una cosetta:

- http://www.pierofix.it/temp/dom/form...disabilita.htm

Vi invito a dare un'occhiata al codice per vedere i ragionamenti che ho usato, soprattutto per tenere separato il javascript dal markup. In generale, può interessare?

**cavicchiandrea** · 20-07-2006, 22:08

Originariamente inviato da pierofix
Mi avete dato lo spunto per provare una cosetta:

- http://www.pierofix.it/temp/dom/form...disabilita.htm

Vi invito a dare un'occhiata al codice per vedere i ragionamenti che ho usato, soprattutto per tenere separato il javascript dal markup. In generale, può interessare?

Piero sei un grande

**pierofix** · 21-07-2006, 09:51

Mi sono accorto che caca-IE non supporta removeAttribute (lo avevo già letto sul forum ma non avevo ancora provato

). Il colore di sfondo dei fieldset, quindi, su IE non funziona a dovere.

Se interessa a tutti i costi la compatibilità su quel "browser", si potrebbe modificare come segue la funzione do_disable:

codice:

function do_disable()
{
   getSelectedUser()

   if ( tipo_utente_selezionato == 'privato' )
   {
      disable_fields('dati_azienda')
      enable_fields('dati_privato')

      document.getElementById('dati_azienda').className = 'fieldset_disabled'
      // Toglietemi quando IE avrà fatto la fine che merita
      if ( document.all )
      {
         document.getElementById('dati_privato').className = ''
         return
      }
      document.getElementById('dati_privato').removeAttribute('class')
   }
   else if ( tipo_utente_selezionato == 'azienda' )
   {					      disable_fields('dati_privato')
      enable_fields('dati_azienda')				      
      document.getElementById('dati_privato').className = 'fieldset_disabled'
      // Toglietemi quando IE avrà fatto la fine che merita
      if ( document.all )
      {
         document.getElementById('dati_azienda').className = ''
         return
      }
      document.getElementById('dati_azienda').removeAttribute('class')
   }
}

**pierofix** · 21-07-2006, 21:57

Ecco, ho avuto modo di modificare l'esempio online, con il problema di IE ora risolto:

- http://www.pierofix.it/temp/dom/form...disabilita.htm

Se notate, poi, ho modificato lo script in modo tale che si riescano a disattivare non solo gli input ma anche eventuali textarea o select.

Adoro questo approccio del DOM in quanto mi ha permesso - ad esempio in questo caso - di creare nuove funzionalità nello script senza andare ad inquinare minimamente il markup e la struttura del form.

Che ne dite?

**pierofix** · 22-07-2006, 21:58

Ho dato una sistemata al codice e ho aggiunto qualche piccolo accorgimento in più per aumentare l'usabilità e l'accessibilità del form.

**pierofix** · 25-07-2006, 10:27

La funzione che abilita e disabilita i campi l'ho attribuita all'evento onclick dei due input radio.

Su Opera però, ad esempio, se uso la tastiera per muovermi nel form, dopo aver selezionato il radio che mi interessa devo anche premere la barra spazio (per 'cliccare', appunto). Su FF e IE no.

In teoria ha ragione Opera, però se non usassi onclick (e usassi un altro evento come onselect) avrei che la funzione verrebbe richiamata dopo il primo click (che va a vuoto).

Che evento potrei usare, o, in sostanza, come risolvere?

La pagina di esempio - lo ripeto - è la seguente:

- http://www.pierofix.it/temp/dom/form...disabilita.htm

Grazie.

Discussione: Disabilitare i campi di un form

Strumenti discussione

Ricerca discussione

Visualizza

Disabilitare i campi di un form

Re: Disabilitare i campi di un form

Permessi di invio