3

Here's my script:

<form action='' method='' onsubmit='refreshpage();'>
<input name='refresh' type="image" SRC="images/Next-Page-Button.gif" HEIGHT="60" WIDTH="173" BORDER="0" value='Refresh'>
</form>

I want it when the user clicks the "next page" button a loading or please wait will pop up because it takes over 30 sec for the next page and I want the members to know the site is working, but also make the popup go away after the page is loaded.

Also if you want to see the button in action my site is www.socialmedianetworkexchange.com and it's when you click the "earn facebook likes" button.

Nathan
  • 11,814
  • 11
  • 50
  • 93
Tahoe Cale
  • 83
  • 1
  • 2
  • 8
  • Why are you refreshing the page when you could just use AJAX to submit the form? – Nathan Nov 26 '11 at 02:28
  • It needs to send the info to the database and get more sites to "like" – Tahoe Cale Nov 26 '11 at 02:38
  • Oh, well AJAX does that same thing, but no page refresh ;) It is basically submitting the form, but without refreshing the page. See my answer below for the loading thing. :) – Nathan Nov 26 '11 at 02:50
  • See [jQuery AJAX](http://api.jquery.com/jQuery.ajax/). `$.post` and `$.get` is easier to use if you are just going to use a certain method type, see these links: [jQuery $.get](http://api.jquery.com/jQuery.get/) or [jQuery $.post](http://api.jquery.com/jQuery.post/) – Nathan Dec 10 '11 at 04:56

1 Answers1

12

You could show an element over the page when they click it, and then it will go away by itself upon navigating to the other page.

JavaScript:

function showLoading() {
    document.getElementById('loadingmsg').style.display = 'block';
    document.getElementById('loadingover').style.display = 'block';
}

HTML/CSS:

<style type="text/css">
      #loadingmsg {
      color: black;
      background: #fff; 
      padding: 10px;
      position: fixed;
      top: 50%;
      left: 50%;
      z-index: 100;
      margin-right: -25%;
      margin-bottom: -25%;
      }
      #loadingover {
      background: black;
      z-index: 99;
      width: 100%;
      height: 100%;
      position: fixed;
      top: 0;
      left: 0;
      -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=80)";
      filter: alpha(opacity=80);
      -moz-opacity: 0.8;
      -khtml-opacity: 0.8;
      opacity: 0.8;
    }
</style>

<div id='loadingmsg' style='display: none;'>Redirecting, please wait...</div>
<div id='loadingover' style='display: none;'></div>
<form action='' method='post' onsubmit='refreshpage();showLoading();'> 
   <input name='refresh' type="image" src="images/Next-Page-Button.gif" height="60" width="173" border="0" value='Refresh'> 
</form>

You can change the loading message to whatever you wish for it to say, of course.

Edit:

Just add the onclick event to the <li> like:

<li onclick="showLoading()">
   <a href="facebook.php">
      <img src="images/logos/facebooklikeicon.png" height="25" border="0" /> Earn Coins Facebook 
   </a>
</li>

Make sure you have the other HTML, CSS and JavaScript above this for the function to work.

Community
  • 1
  • 1
Nathan
  • 11,814
  • 11
  • 50
  • 93