jQuery "please wait" while php executes

Question

I have a script that connects to the PayPal api to check for a valid credit card input. The script can take about 5 seconds to execute and in an effort to keep users from clicking "submit" multiple times if they don't see an immediate response, I'd like to place a "Please wait" indicator.

I have a div, "pleaseWait" which is hidden. In jQuery I have:

$('#submit').click(function(){
    $('#pleaseWait').show();
});

The only problem is if there is an issue, it will send the php error back and the "Please wait" will continue on screen. I decided to try another approach and echo the jQuery in php after the script starts to run, and hide it if there is an error.

 /* Echo the jQuery so the "Please wait" indicator will show on screen */
 echo "<script type=\"text/javascript\" src=\"http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js\"></script>";
 echo "<script type='text/javascript' charset='utf-8'>";
 echo "\$(document).ready(function(){";
 echo "\$('#pleaseWait').show();";
 echo "});";
 echo "</script>";


 if($error == ""){

      /* There is not an error, run php. */

 }else{
      /* There was an error, stop the jQuery from displaying the "please wait" and display the error */
      echo "<script type=\"text/javascript\" src=\"http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js\"></script>";
      echo "<script type='text/javascript' charset='utf-8'>";
      echo "\$(document).ready(function(){";
      echo "\$('#pleaseWait').hide();";
      echo "});";
      echo "</script>";
 }

This can work, but seems really messy. Is there a better way to do this other than multiple echos in php?

Answer 1

try use ajax

$('#submit').click(function(){
    $('#pleaseWait').show();
    $.post('url',card,function(data){
         $('#pleaseWait').hide();
         alert(data);
    })
});