Show loading gif after clicking form submit using jQuery

Question

I m trying to simply show a loading gif once the form is submitted  My code is not working correctly for the loading gif to show  You ll see my image for the gif is set to visibility  hidden    lt script src  js jquery-1 11 1 min js  gt  lt  script gt    lt div class    style  width  480px  margin  0 auto  margin-top  20px   id  form wrapper  gt       lt img src  img loader gif  id  gif  style  display  block  margin  0 auto  width  100px  visibility  hidden   gt       lt div class  fade  id  form  gt           lt form action  process login php  method  POST  name  simplelogin  id  login form  gt  lt br   gt               lt label for  username  gt  amp nbsp  Username  lt  label gt               lt input type  username  name  username  id  username  size  30  required gt  lt br gt  lt br gt               lt label for  password  gt  amp nbsp  Password  lt  label gt               lt input type  password  name  password  id  password  size  30  required gt  lt br gt  lt br gt               lt input class  load button  type  submit  name  submit  id  submit  value  Submit  placeholder  Submit  gt           lt  form gt       lt  div gt   lt  div gt   lt div class  fifty  gt  lt  div gt    lt script type  text javascript  gt          load button   submit function                 gif   show             return true           lt  script gt

User · Answer

Button inputs don t have a submit event  Try attaching the event handler to the form instead    lt script type  text javascript  gt           login form   submit function                gif   show            return true             lt  script gt

User · Answer

The show   method only affects the display CSS setting  If you want to set the visibility you need to do it directly  Also  the  load button element is a button and does not raise a submit event  You would need to change your selector to the form for that to work       login form   submit function             gif   css  visibility    visible          Also note that return true  is redundant in your logic  so it can be removed

User · Answer

Better and clean example using JS only  Reference  TheDeveloperBlog com  Step 1 - Create your java script and place it in your HTML page    lt script type  text javascript  gt      function ShowLoading e            var div   document createElement  div            var img   document createElement  img            img src    loading bar GIF           div innerHTML    Loading    lt br   gt            div style cssText    position  fixed  top  5   left  40   z-index  5000  width  422px  text-align  center  background   EDDBB0  border  1px solid  000           div appendChild img           document body appendChild div           return true             These 2 lines cancel form submission  so only use if needed            window event cancelBubble   true            e stopPropagation           lt  script gt    in your form call the java script function on submit event     lt form runat  server   onsubmit  ShowLoading    gt   lt  form gt    Soon after you submit the form  it will show you the loading image

User · Answer

What about an onclick function        lt form id  form  gt       lt input type  text  name  firstInput  gt       lt button type  button  name  namebutton              onClick      gif   css  visibility    visible                            form   submit     gt       lt  form gt    Of course you can put this in a function and then trigger it with an onClick

[javascript] Show loading gif after clicking form submit using jQuery

Examples related to javascript

Examples related to jquery

Examples related to forms

Examples related to gif