Problema "onsubmit" con firefox

[francesco.zeno]

Problema "onsubmit" con firefox

L'intento è quello di evitare che gli utenti inviino più volte lo stesso form.

Ho pensato di applicare, all'evento onsubmit, una funzione javascript che crea un div che copre tutto il form, con una gif animata come avviso di caricamento.

Il tutto però non funziona a dovere.....

Su IE funziona benissimo, Firefox, invece, crea il div ma non carica nessuna immagine, né se impostata come sfondo al div, né se specificata in un tag img.

Il testo viene visualizzato, le regole del CSS vengono applicate, ma le immagini proprio non ne vogliono sapere.......

Applicando la funzione all'evento onclick Firefox si comporta bene, ma se un utente invia il form premendo invio, ovviamente, la funzione non viene richiamata.

Questo è il codice:```

<script type='text/javascript'>
function disabilitaForm(id)
{

tag = document.getElementById(id);

tag.innerHTML = "<div id='loading' style='width:200px; height:200px; background-image:url(img/loading.gif); position:absolute'></div>";

}
</script>

<div id='loading'></div>
<form action="..." onsubmit="return disabilitaForm('loading');">
<input type='text' name='testo' />
<input type="submit" value="Invia" />
</form>

[claudioweb]

Ciao

Potresti fare in modo molto semplice senza div.
Puoi impostare una variabile booleana (true o false) e cambiarla al primo submit.
Una volta cambiata se si tenta un altro submit se la variabile è cambiata lo si impedisce con un
return false;

Oppure, se sei pratico, puoi anche usare JQuery e dopo aver effettuato il submit aggiungere il disabled.

[francesco.zeno]

Grazie claudioweb, ma l'utente come viene messo in attesa?

durante le prove ho notato che saltuariamente la pagina di risposta al submit arriva dopo molti secondi, nel sistema pensato da me apparirebbe una gif animata di caricamento, che magari sollecita l'utente ad attendere un attimo in più prima di fuggire disperato

Ciao
Francesco

[bazzilla]

In effetti anche io avrei adottato un'altra soluzione.

Per prima cosa eviterei di dare 2 volte lo stesso ID: definisci con id="loading" sia il div contenitore che il div che gli andrai ad inserire dentro.

Per farlo funzionare dovrebbe bastare un return false; come ultima istruzione della tua funzione (NON sull'onclick del submit).
In questo modo non restituisce il controllo al form e il browser dovrebbe chiamare correttamente l'immagine.

Fa sapere.