Progress Button Using Ajax, Javascript And Jquery

Here i brought an all new tutorial to build a button with progress indication. It looks quite impressive and takes few lines of codes. We had used Ajax, Jquery and very important Javascript code. You just need to include "jquery.ajaxbuttonindicator.js" and  "jquery.min.js" files in the head section. They are script type.
A very important Ajax function is used in the whole code named ajaxbuttonindicator( );
All magic is performed in the Javascript. Only this Ajax function is called on the click of button. Value in the text-field goes to the php page and it return the string and displays on the HTML page.

Content Used :

• Ajax
• Javascript
• Jquery  
• A Simple Php Code 
  

  Javascript Code:

  $(document).ready(function() {
              $('button').ajaxbuttonindicator();
          });
          
          function send_request(a) {
              yourname = $('#i_name').val();
              $.post("backend.php", {name: yourname, action: a}, 
                  function(response) {
                      // Do something with the response.
                      $('#ajax_response').html(response.message);
                  }, 'json');
          }
   

  Before clicking:

  

   After Clicking:

  

  After Completion:

  

  PHP Code:

  
  

  200, 'message'=>'Success: '.$_POST['name'].''));
  			break;
  		case 'error':
  			header("HTTP/1.0 404 Not Found");
  			echo json_encode(array('code'=>200, 'message'=>'Error: '.$_POST['name'].''));
  			break;
  		default:
  			echo json_encode(array('code'=>200, 'message'=>'Default: '.$_POST['name'].''));
  	}
  	?>
  

  Note:

  If the timint between submition and completion is too fast put the time as per your requirment. Just as
  sleep(2); // 2 sec for completion the request.
  Please give your feedback for this post. Hope you will like it.