Jquery Method to hide all the buttons and submit buttons from a HTML FORM on the page whenever the form is submitted.

JQuery is widely used these days for all type of page html tag manipulations and is frequently used to hide, show, navigate the form elements.

Some times when a form is submitted we need to hide / disable all the submit buttons from the page so that we can avoid the double form submissions and avoid any errors related to double request.

To achieve the same to some extent and avoid such errors, following code can be used to hide all the submit buttons from the page within the form which is being submitted.

$(document).ready( function() {
   $("form").each(function() {
      $(this).submit(function(){
          $(document).find("input[type=button],input[type=submit]").each(function(){
             var display=$(this).css("display");
             if(display!='none'){
                $(this).hide();
                $(this).parent().append("");
             }
          });
      });
   });
});

How it works: It finds all the form elements in the document loaded and on submit of the form it finds all the HTML INPUT tags of type BUTTON and SUBMIT.

And on each it check and finds the CSS attribute "DISPLAY" and if its NOT 'none' then it will hide the INPUT BUTTON/SUBMIT and will append an image (loading.gif) to its parent tag, so that it appears at the same positions as the button.

Hope it will help you solve some issues related to Form Submission. Feel free to comment if any issues.