Web Development

How to add a spinner just above the submit button of form without modifying php code using JQuery

Actually this is little bit advanced technique, you need to have a good idea regarding jQuery. Basically I had to add a spinner just before the submit button of the form, so that viewers get idea that the form submission is working and they don’t get confused.

Here is the JQuery Code I used:

	jQuery(document).ready(function(){
			 
		jQuery( 'form' ).on( 'click', 'SUBMIT BUTTON ID OR CLASS', function (e) { 
	
          var formElement = document.querySelector('FORM ID OR CLASS');
   
          
          
          if(formElement.reportValidity()){
                   jQuery('CLASS OR ID OF DIV AFTER WHICH THE SPINNER WILL ADD').after('<img style="width:70px;" src="YOUR SPINNER URL">');
          }        
          
          
		 }); 
		
		
 
	 
 }); 

Please feel free to ask question in the comments section if you have any question regarding the code and i will describe you.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s