Più volte abbiamo sottolineato l'importanza di Javascript riguardo la gestione di form HTML. Abbiamo mostrato come selezionare l'intero contenuto di una textarea, come verificare la presenza di dati inseriti in un form e finalmente come impostare il cowntdown di caratteri in una textarea. Per visionare gli arretrati cliccate su questi link.
Questa settimana torniamo sull'argomento degli effetti Javascript sui form HTML. L'esempio mostra come rendere inattivi i tasti di spedizione del form una volta che lo stesso è stato spedito. In altri termini il javascript dopo la spedizione dei dati rende impossibile replicare l'operazione, evitando form doppi o spamming.
L'esempio si compone di 1 file:
- esempio.htm
Per una più semplice comprensione del presente script fai continuamente riferimento ai file sopracitati, verificando le procedure e i dati espressi. Solo in questo modo, con un continuo confronto, comprenderai le peculiarità di questo Javascript.
Questo file simula la pagina di inserimento dati.
Il codice dell'esempio va inserito interamente nel body del documento e nella stessa porzione di pagina. In altre parole lo script deve anticipare il codice HTML che crea il form, altrimenti gli effetti non si producono.
Impostiamo lo script:
<script type="text/javascript" language="javascript">
function submitonce(theform){
if (document.all||document.getElementById){
for (i=0;i<theform.length;i++){
var tempobj=theform.elements[i]
if(tempobj.type.toLowerCase()=="submit"||tempobj.type.toLowerCase()=="reset")
tempobj.disabled=true
}
setTimeout('alert("Il form è stato spedito. Da questo momento il tasto di
spedizione è disabilitato")',2000)
}
else
alert("Il form è stato spedito. Da questo momento il tasto di spedizione è
disabilitato semprechè tu stia usando MsIe 4+ o Netscape 6")
return false
}
</script>
setTimeout('alert("Il form è stato spedito. Da questo momento il tasto di spedizione è disabilitato")',2000)
Questo codice dopo 2 secondi (2000 millisecondi) mostra una finestra di alert con la script contenuta tra "", che conferma la spedizione ai browser che supportano lo script.
alert("Il form è stato spedito. Da questo momento il tasto di spedizione è disabilitato semprechè tu stia usando MsIe 4+ o Netscape 6")
Questo codice ha una funzione di conferma simile al primo, ma a differenza di quello viene visualizzato dai browser che non supportano lo script.
Impostato lo script il codice che crea il form deve avere una struttura simile a questa:
<form method="POST" name="test" onSubmit="return submitonce(this)">
<input type="text" name="T1" size="20">
<textarea rows="6" name="S1" cols="30"></textarea>
<input type="submit" value="Spedisci" name="B1">
<input type="reset" value="Reset" name="B2">
</form>
<form method="POST" name="test" onSubmit="return submitonce(this)">
È importante che il tag di apertura del Form contenga l'attributo name="test" e il gestore di eventi "onSubmit".
