{"id":350,"date":"2011-01-20T17:23:58","date_gmt":"2011-01-20T16:23:58","guid":{"rendered":"https:\/\/www.giannifavilli.it\/blog\/?p=350"},"modified":"2022-02-22T16:06:54","modified_gmt":"2022-02-22T15:06:54","slug":"jquery-please-wait","status":"publish","type":"post","link":"https:\/\/www.giannifavilli.it\/blog\/jquery-please-wait\/","title":{"rendered":"Please Wait !!! &#8230; per Form con jQuery"},"content":{"rendered":"<p>Capita spesso di dover inserire un form di richiesta sui nostri siti.<\/p>\n<p>Se il Form a causa della lentezza della comunicazione tra web e db o server di posta, impiega qualche secondo in pi\u00f9 del normale, dobbiamo far capire all&#8217;utente che tutto sta procedendo al meglio e che \u00e8 inutile che continui a cliccare sul bottone INVIA reiterate volte con l&#8217;evidente conseguenza di spammare sia il DB che la casella email.<\/p>\n<p>Utilizzando jQuery il problema si risolve in poche righe di codice e magari anche con un aspetto gradevole alla vista.<\/p>\n<p><!--more--><\/p>\n<div class=\"clear-block\"><div class=\"ad alignnone\">\n\t\t\t\t<script async src=\"\/\/pagead2.googlesyndication.com\/pagead\/js\/adsbygoogle.js\"><\/script>\n\t\t\t\t<!-- GianniFavilli - Responsive -->\n\t\t\t\t<ins class=\"adsbygoogle\"\n\t\t\t\t     style=\"display:block\"\n\t\t\t\t     data-ad-client=\"ca-pub-1205156047762515\"\n\t\t\t\t     data-ad-slot=\"6873384605\"\n\t\t\t\t     data-ad-format=\"auto\"><\/ins>\n\t\t\t\t<script>\n\t\t\t\t(adsbygoogle = window.adsbygoogle || []).push({});\n\t\t\t\t<\/script>\n\t\t\t\t<\/div><\/div>\n<p>Lo script inizialmente fa visualizzare il pulsante di invio e tiene nascosto un DIV con all&#8217;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&#8217;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\u00f9 cliccomani.<\/p>\n<p>L&#8217;immagine di loading animata la potere creare gratuitamente da questo portale: <a href=\"http:\/\/www.ajaxload.info\/\" target=\"_blank\" rel=\"noopener\">AJAXLOAD<\/a><\/p>\n<p>Di seguito il javascript da includere nella pagina.<\/p>\n<div class=\"clear-block\"><div class=\"ad alignnone\">\n\t\t\t\t<script async src=\"\/\/pagead2.googlesyndication.com\/pagead\/js\/adsbygoogle.js\"><\/script>\n\t\t\t\t<!-- GianniFavilli - Responsive -->\n\t\t\t\t<ins class=\"adsbygoogle\"\n\t\t\t\t     style=\"display:block\"\n\t\t\t\t     data-ad-client=\"ca-pub-1205156047762515\"\n\t\t\t\t     data-ad-slot=\"6873384605\"\n\t\t\t\t     data-ad-format=\"auto\"><\/ins>\n\t\t\t\t<script>\n\t\t\t\t(adsbygoogle = window.adsbygoogle || []).push({});\n\t\t\t\t<\/script>\n\t\t\t\t<\/div><\/div>\n<pre class=\"lang:xhtml decode:true  \">&lt;!-- inizio javascript --&gt;\r\n&lt;script type=\"text\/javascript\"&gt;\r\n$(document).ready(function(){\r\n\t$('#loading').hide(); \/\/ la pagina viene caricata con il div id 'loading' nascosto\r\n\t$('#bottoneinvia').click(function() { \/\/ al click sul bottone applica la segunete funzione\r\n\t$('#bottoneinvia').hide(); \/\/ nasconde il bottone invia\r\n\t$('#loading').show(); \/\/ visualizza il div 'loading'\r\n\t$('#form').submit(); \/\/ elabora il form\r\n});\r\n});\r\n&lt;\/script&gt;\r\n&lt;!-- fine javascript --&gt;<\/pre>\n<p>Questo \u00e8 l&#8217;html della pagina.<\/p>\n<div class=\"clear-block\"><div class=\"ad alignnone\">\n\t\t\t\t<script async src=\"\/\/pagead2.googlesyndication.com\/pagead\/js\/adsbygoogle.js\"><\/script>\n\t\t\t\t<!-- GianniFavilli - Responsive -->\n\t\t\t\t<ins class=\"adsbygoogle\"\n\t\t\t\t     style=\"display:block\"\n\t\t\t\t     data-ad-client=\"ca-pub-1205156047762515\"\n\t\t\t\t     data-ad-slot=\"6873384605\"\n\t\t\t\t     data-ad-format=\"auto\"><\/ins>\n\t\t\t\t<script>\n\t\t\t\t(adsbygoogle = window.adsbygoogle || []).push({});\n\t\t\t\t<\/script>\n\t\t\t\t<\/div><\/div>\n<pre class=\"lang:xhtml decode:true \">&lt;!-- inizio del form con ID 'form' --&gt;\r\n&lt;form id=\"form\" name=\"form\" action=\"#\" method=\"post\"&gt;\r\n&lt;p&gt;&lt;label for=\"label01\"&gt;label01&lt;\/label&gt;&lt;br\/&gt;\r\n&lt;input id=\"label01\" type=\"text\" value=\"\" name=\"label01\" \/&gt;&lt;\/p&gt;\r\n&lt;p&gt;&lt;label for=\"label02\"&gt;label02&lt;\/label&gt;&lt;br \/&gt;\r\n&lt;input id=\"label02\" type=\"text\" value=\"\" name=\"label02\" \/&gt;&lt;\/p&gt;\r\n&lt;p&gt;&lt;label for=\"label03\"&gt;label03&lt;\/label&gt;&lt;br \/&gt;\r\n&lt;textarea id=\"label03\" name=\"label03\"&gt;&lt;\/textarea&gt;&lt;\/p&gt;\r\n\r\n&lt;!-- paragrafo con all'interno il bottone di invio --&gt;\r\n&lt;p id=\"bottoneinvia\" \/&gt;\r\n&lt;input type=\"submit\" name=\"button\" id=\"button\" value=\"Submit\" \/&gt;\r\n&lt;\/p&gt;\r\n&lt;!-- fine paragrafo --&gt;\r\n\r\n&lt;\/form&gt;\r\n&lt;!-- fine form --&gt;\r\n\r\n&lt;!-- div con all'inerno un titolo e un immagine di attesa --&gt;\r\n&lt;div id=\"loading\"&gt;\r\n  &lt;h3&gt;Please Wait...&lt;\/h3&gt;\r\n  &lt;p&gt;&lt;img src=\"loader.gif\" \/&gt;&lt;\/p&gt;\r\n&lt;\/div&gt;\r\n&lt;!-- fine del div --&gt;<\/pre>\n<p>Perch\u00e8 lo script funzionei dobbiamo includere la libreria di jQuery nella head della pagina dove richiamiamo il javascript. La cosa migliore \u00e8 prendere la libreria direttamente dal server di google, per non appesantire il nostro.<\/p>\n<div class=\"clear-block\"><div class=\"ad alignnone\">\n\t\t\t\t<script async src=\"\/\/pagead2.googlesyndication.com\/pagead\/js\/adsbygoogle.js\"><\/script>\n\t\t\t\t<!-- GianniFavilli - Responsive -->\n\t\t\t\t<ins class=\"adsbygoogle\"\n\t\t\t\t     style=\"display:block\"\n\t\t\t\t     data-ad-client=\"ca-pub-1205156047762515\"\n\t\t\t\t     data-ad-slot=\"6873384605\"\n\t\t\t\t     data-ad-format=\"auto\"><\/ins>\n\t\t\t\t<script>\n\t\t\t\t(adsbygoogle = window.adsbygoogle || []).push({});\n\t\t\t\t<\/script>\n\t\t\t\t<\/div><\/div>\n<pre class=\"lang:xhtml decode:true\">&lt;head&gt;\r\n&lt;!--...---&gt;\r\n&lt;script type=\"text\/javascript\" src=\"http:\/\/ajax.googleapis.com\/ajax\/libs\/jquery\/1.4.2\/jquery.min.js\"&gt;&lt;\/script&gt;\r\n&lt;!--...--&gt;\r\n&lt;\/head&gt;<\/pre>\n<p>Per chi mastica anche un po&#8217; di CSS il tutto pu\u00f2 diventare pi\u00f9 cool se aggiungiamo un effetto di trasparenza over-page.<\/p>\n<div class=\"clear-block\"><div class=\"ad alignnone\">\n\t\t\t\t<script async src=\"\/\/pagead2.googlesyndication.com\/pagead\/js\/adsbygoogle.js\"><\/script>\n\t\t\t\t<!-- GianniFavilli - Responsive -->\n\t\t\t\t<ins class=\"adsbygoogle\"\n\t\t\t\t     style=\"display:block\"\n\t\t\t\t     data-ad-client=\"ca-pub-1205156047762515\"\n\t\t\t\t     data-ad-slot=\"6873384605\"\n\t\t\t\t     data-ad-format=\"auto\"><\/ins>\n\t\t\t\t<script>\n\t\t\t\t(adsbygoogle = window.adsbygoogle || []).push({});\n\t\t\t\t<\/script>\n\t\t\t\t<\/div><\/div>\n<pre class=\"lang:css decode:true\">#loading {\r\n   display:none;\r\n   position:fixed;\r\n   left:0;\r\n   top:0;\r\n   width:100%;\r\n   height:100%;\r\n   background-image:url(\"transparentbg.png\");\r\n}<\/pre>\n<p>Dove transparentbg.png \u00e8 un immagine con una trasparenza (o alpha) dell&#8217;80% (o come pi\u00f9 vi piace) della grandezza di 25px per 25px.<br \/>\n\t<!--\n\t<div class=\"paga_box_sandbox\"><h4>In questo momento non fare donazioni, sto testando il sistema. Grazie!<\/h4>\t<p>Donazione per il mantenimento del blog<\/p>\n\t<form method=\"post\" name=\"paypal_form_donag_806\" action=\"https:\/\/www.sandbox.paypal.com\/cgi-bin\/webscr\">\n\t\t<input type=\"hidden\" name=\"business\" value=\"info@giannifavilli.it\" \/>\n\t\t<input type=\"hidden\" name=\"cmd\" value=\"_donations\" \/>\n\t\t<input type=\"hidden\" name=\"return\" value=\"http:\/\/www.giannifavilli.it\/blog\/grazie\/\" \/>\n\t\t<input type=\"hidden\" name=\"cancel_return\" value=\"http:\/\/www.giannifavilli.it\/blog\/wp-json\/wp\/v2\/posts\/350\" \/>\n\t\t<input type=\"hidden\" name=\"notify_url\" value=\"http:\/\/www.giannifavilli.it\/listen\/donazione_pp_ipn.php\" \/>\n\t\t<input type=\"hidden\" name=\"rm\" value=\"2\" \/>\n\t\t<input type=\"hidden\" name=\"currency_code\" value=\"EUR\" \/>\n\t\t<input type=\"hidden\" name=\"lc\" value=\"IT\" \/>\n\t\t<input type=\"hidden\" name=\"cbt\" value=\"Grazie! Premi qui per torna sul blog\" \/>\n\t\t<input type=\"hidden\" name=\"item_name\" value=\"Donazione per il mantenimento del blog Gianni Favilli\" \/>\n\t\t<div style=\"text-align:center; width:100%; margin: auto;\">\n\t\t<select class=\"\" name=\"amount\" id=\"amount\" style=\"margin: auto;\">\n\t\t\t<option value=\"1\">Offrimi un Caff\u00e8 - 1 Euro<\/option>\n\t\t\t<option value=\"3\">Offrimi un Aperitivo - 3 Euro<\/option>\n\t\t\t<option value=\"5\">Offrimi una Birra - 5 Euro<\/option>\n\t\t\t<option value=\"15\">Offrimi una Pizza - 15 Euro<\/option>\n\t\t\t<option value=\"25\">Offrimi una Cena - 25 Euro<\/option>\n\t\t<\/select>\n\t\t<\/div>\n\t\t<!\/\/\/\/--<input type=\"hidden\" name=\"custom\" value=\"\" \/>-\/\/\/\/->\n\t\t<input type=\"hidden\" name=\"custom\" value=\"DonazioneGenericaGF\" \/>\n\t\t<input type=\"hidden\" name=\"no_note\" value=\"1\" \/>\n\t\t<input class=\"pulsantepp\" type=\"image\" src=\"https:\/\/www.paypalobjects.com\/it_IT\/IT\/i\/btn\/btn_donateCC_LG.gif\" name=\"submit\" alt=\"PayPal - Il metodo rapido, sicuro e affidabile per fare donazioni.\" \/>\n\t<\/form>\n\t<\/div>\n\t-->\n\t<\/p>\n","protected":false},"excerpt":{"rendered":"<p>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\u00f9 del normale, dobbiamo far capire all&#8217;utente che tutto sta procedendo al meglio e che \u00e8 inutile che continui a cliccare sul bottone INVIA reiterate volte con l&#8217;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.<\/p>\n","protected":false},"author":2,"featured_media":0,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"jetpack_post_was_ever_published":false,"_jetpack_newsletter_access":"","_jetpack_dont_email_post_to_subs":false,"_jetpack_newsletter_tier_id":0,"_jetpack_memberships_contains_paywalled_content":false,"_jetpack_memberships_contains_paid_content":false,"footnotes":"","jetpack_publicize_message":"","jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":false,"jetpack_social_options":{"image_generator_settings":{"template":"highway","default_image_id":0,"font":"","enabled":false},"version":2}},"categories":[17],"tags":[24,23,22,21],"class_list":["post-350","post","type-post","status-publish","format-standard","hentry","category-programmazione","tag-css","tag-html","tag-javascript","tag-jquery"],"jetpack_publicize_connections":[],"jetpack_featured_media_url":"","jetpack_sharing_enabled":true,"jetpack_shortlink":"https:\/\/wp.me\/p4SGGs-5E","_links":{"self":[{"href":"https:\/\/www.giannifavilli.it\/blog\/wp-json\/wp\/v2\/posts\/350","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.giannifavilli.it\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.giannifavilli.it\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.giannifavilli.it\/blog\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/www.giannifavilli.it\/blog\/wp-json\/wp\/v2\/comments?post=350"}],"version-history":[{"count":0,"href":"https:\/\/www.giannifavilli.it\/blog\/wp-json\/wp\/v2\/posts\/350\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.giannifavilli.it\/blog\/wp-json\/wp\/v2\/media?parent=350"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.giannifavilli.it\/blog\/wp-json\/wp\/v2\/categories?post=350"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.giannifavilli.it\/blog\/wp-json\/wp\/v2\/tags?post=350"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}