Capita spesso di dover inserire un form di richiesta sui nostri siti.
Se il Form a causa della lentezza della comunicazione tra web e db o server di posta, impiega qualche secondo in più del normale, dobbiamo far capire all’utente che tutto sta procedendo al meglio e che è inutile che continui a cliccare sul bottone INVIA reiterate volte con l’evidente conseguenza di spammare sia il DB che la casella email.
Utilizzando jQuery il problema si risolve in poche righe di codice e magari anche con un aspetto gradevole alla vista.
Lo script inizialmente fa visualizzare il pulsante di invio e tiene nascosto un DIV con all’inerno un immagine animata di loading. Dopo aver cliccato su di esso jQuery nasconde il bottone di invio, il form posta la richiesta e compare il DIV con all’intrno un immagine animata di loading che ha come intento di evitare qualunque altro click sul bottone e di far calmare gli animi agli utenti più cliccomani.
L’immagine di loading animata la potere creare gratuitamente da questo portale: AJAXLOAD
Di seguito il javascript da includere nella pagina.
|
0 1 2 3 4 5 6 7 8 9 10 11 12 13 |
<!-- inizio javascript --> <script type="text/javascript"> $(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 --> |
Questo è l’html della pagina.
|
0 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 |
<!-- inizio del form con ID 'form' --> <form id="form" name="form" action="#" method="post"> <p><label for="label01">label01</label><br/> <input id="label01" type="text" value="" name="label01" /></p> <p><label for="label02">label02</label><br /> <input id="label02" type="text" value="" name="label02" /></p> <p><label for="label03">label03</label><br /> <textarea id="label03" name="label03"></textarea></p> <!-- paragrafo con all'interno il bottone di invio --> <p id="bottoneinvia" /> <input type="submit" name="button" id="button" value="Submit" /> </p> <!-- fine paragrafo --> </form> <!-- fine form --> <!-- div con all'inerno un titolo e un immagine di attesa --> <div id="loading"> <h3>Please Wait...</h3> <p><img src="loader.gif" /></p> </div> <!-- fine del div --> |
Perchè lo script funzionei dobbiamo includere la libreria di jQuery nella head della pagina dove richiamiamo il javascript. La cosa migliore è prendere la libreria direttamente dal server di google, per non appesantire il nostro.
|
0 1 2 3 4 5 6 |
<head> <!--...---> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script> <!--...--> </head> |
Per chi mastica anche un po’ di CSS il tutto può diventare più cool se aggiungiamo un effetto di trasparenza over-page.
|
0 1 2 3 4 5 6 7 8 9 10 |
#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.
I commenti sono chiusi.