Attendere prego… nascondere il submit con jQuery

loading! Sul sito di Gianni Favilli (www.giannifavilli.it) hotrovatoquesto script in jQuery comodo per nascondere il pulsante “submit” quando di preme, per evitare che l’utente lo prema più volte.
Ecco lo script da inserire nell'<head>:

/* inizio javascript */
<script type="text/javascript">// <![CDATA[
$(document).ready(function(){
        $('#loading').hide(); // la pagina viene caricata con il div id 'loading' nascosto
        $('#bottoneinvia').click(function() { // al click sul bottone applica la segunete funzione
        $('#bottoneinvia').hide(); // nasconde il bottone invia
        $('#loading').show(); // visualizza il div 'loading'
        $('#form').submit(); // elabora il form
    });
});
// ]]></script>
/* fine javascript */

E questo nell’HTML

<!-- inizio del form con ID 'form' --></pre>
<form id="form" action="#" method="post" name="form">
< label for="label01">label01

<input id="label01" type="text" name="label01" value="" />

<label for="label02">label02</label>

<input id="label02" type="text" name="label02" value="" />

<label for="label03">label03</label>

<textarea id="label03" name="label03"></textarea>

<!-- paragrafo con all'interno il bottone di invio -->

<input id="button" type="submit" name="button" value="Submit" />

< !-- fine paragrafo --></form>
<pre>
<!-- fine form -->

<!-- div con all'inerno un titolo e un immagine di attesa --></pre>
<div id="loading">
<h3>Please Wait...</h3>
<img src="loader.gif" alt="" /></div>
<pre>
<!-- fine del div -->

e nel CSS

#loading {
   display:none;
   position:fixed;
   left:0;
   top:0;
   width:100%;
   height:100%;
   background-image:url("transparentbg.png");
}

Dove transparentbg.png è un immagine con una trasparenza (o alpha) dell’80% (o come più vi piace) della grandezza di 25px per 25px.


Pubblicato

in

da

Tag: