abilitare tasto invio dopo campi obbligatori

[djjunior]

Ciao a tutti, ho un form dove ho inserito uno script in java che obbliga la compilazione obbligatoria da parte dell'utente, ora vorrei che fino a quando i campi obbligatori non siano completi il tasto invio deve essere disabilitato, come posso fare?
Grazie
Gino

[pierofix]

Un esempio generico:

XHTML

<input id="nome" name="nome" class="obbligatorio" />
<input id="cognome" name="cognome" />
<input id="email" name="email" class="obbligatorio" />

<input id="invia" type="submit" value="invia" />


Javascript

var inputs = document.getElementsByTagName('input')
var inputs_obbligatori = new Array()
for (var i = 0; i < inputs.length; i++)
{
   if ( inputs.item(i).className.indexOf('obbligatorio') != 0 )
   {
      inputs_obbligatori.push(inputs.item(i))
   }
}

var controllo = true
for (var i = 0; i < inputs_obbligatori; i++)
{
   if ( inputs_obbligatori[i].value == '' )
   {
      controllo = false
      break
   }
}

var invia = document.getElementById('invia')
invia.disabled = true
if ( controllo == true )
{
   invia.disabled = false
}

[djjunior]

Ciao PIEROFIX,
ho provato il codice che mi hai postato ma non funziona.
In pratica il tasto invia è attivo e c'è un errore java

'invia' e nullo o non è un oggetto

alla riga 29 che è:

invia.disabled = true

Puoi aiutarmi?
Grazie
Gino

[OcchioCrepato]

Prova a cambiare nome alla variabile invia

var btninvia = document.getElementById('invia')
btninvia.disabled = true
if ( controllo == true )
{
   btninvia.disabled = false
}

[pierofix]

No, non è quello il problema. Ero talmente di corsa che non mi ero accorto di aver scritto solo una minima parte dello script, e anche male. Appena ho un attimo provo a rimediare.

[OcchioCrepato]

Non ho controllato approfonditamente il codice che hai scritto ma mi sono concentrato solo sulla porzione che dava errore.
Mi è capitato che JS mi desse errore se chiamavo una variabile con lo stesso nome di un oggetto presente nella pagina Non so se è capitato anche voi

[djjunior]

Grazie per l'aiuto.
Gino

[pierofix]

Eccoci! Adesso dovrebbe funzionare:

XHTML (esempio)

<input id="nome" name="nome" class="obbligatorio" />
<input id="cognome" name="cognome" />
<input id="email" name="email" class="obbligatorio" />

<input id="invia" type="submit" value="invia" />


Javascript

window.onload = function()
{
   var invia = document.getElementById('invia')
   var inputs = document.getElementsByTagName('input')
   var inputs_obbligatori = new Array()
   for (var i = 0; i < inputs.length; i++)
   {
      if ( inputs.item(i).className == 'obbligatorio' )
      {
         inputs_obbligatori.push(inputs.item(i))
      }
   }

   function controlla_campi_obbligatori()
   {
      for (var i = 0; i < inputs_obbligatori.length; i++)
      {
         if ( inputs_obbligatori[i].value == '' )
         {
            invia.disabled = true
            break
         }
         else
         {
            invia.disabled = false
         }
      }
   }

   invia.disabled = true
   for (var i = 0; i < inputs.length; i++)
   {
      inputs.item(i).onkeyup = function()
      {
         controlla_campi_obbligatori()
      }
   }
}

Ho evidenziato con colori diversi i legami tra il markup e il codice javascript per facilitare l'individuazione delle parti eventualmente modificabili.