Disable Submit button after submit

Get Help
, ,
1
  • When the user clicks submit I want the button to be disabled to avoid duplicate entries.

I’ve searched this on google and here and found a handful of different jQuery approaches, none of which I’ve been able to get working. They disable the button before submitting.

Is there a standard method for this very basic usability tweak?

Thanks

2

There is no standard method in Gravity Forms. We are planning on adding a feature to prevent duplicate submissions, in the upcoming 2.5 release. There is no public date set for the release of that feature though.

I will leave this open in case someone has a solution they have used which works well.

3

This is the solution I came up with it may be helpful to others.

Basically I am showing a full screen ‘loader’ overlay whenever a submit event is clicked (this includes navigating in multi-page forms).

In my page markup I have a <div class='overlay-spinner'> with some css:

.overlay-spinner {
   background-color: #ffffffe0;
   position: fixed;
   width: 100%;
   height: 100%;
   z-index: 100;
   top: 0;}

And inside it I display a custom animated gif with our company logo.

Then with jQuery in my scripts.js, hide the spinner whenever a form is loaded:

$(document).on('gform_page_loaded', function(event, form_id, current_page){
   $(".overlay-spinner").hide();
});

And show it whenever when navigation is clicked. In this case on form ID 9.

$("#gform_9").submit(function (event) {
    $(".overlay-spinner").show();
});
4

Looks like a cool solution. Thank you for sharing that.

5

Hi Chris,
Is this fully included in 2.5 now?
Richard

6

Hi Richard. Can you explain the type of duplicate submissions that are occurring for you? There is some duplicate prevention built in, and it would depend on the type of duplicate submission issue you are having. If you would like a complete evaluation, I recommend opening a support ticket here: https://www.gravityforms.com/support/

7

We’re experiencing the same. When having an AJAX form, and the user double-clicks on the submit button, you get duplicate entries.

Former mentioned solutions like Disabling the Submit button to prevent multiple entries « Gravity Support Forums doesn’t seem to work in 2.5 (anymore?). When hiding/disabling the submit button after clicking on it, stops the complete proces of submitting.

8

PS: this seems to work for us now (the opacity is not required of course, but adds a nice touch :slight_smile: ):

add_action( 'gform_enqueue_scripts', 'your_prefix_add_scripts' );
function your_prefix_add_scripts($form) {
	    echo '<script>
            document.addEventListener( "DOMContentLoaded", function( e ) {
                if ( typeof jQuery !== "undefined" ) {
                    jQuery(document).on( "click", "#gform_' . $form['id'] . ' [type=submit]", function(e) {
                        if( jQuery(this).data("isclicked" ) === true ) {
                            e.preventDefault();
                            return false;
                        }
                        
                        jQuery(this).css("opacity", 0.2).data("isclicked", true);
                    });
                }
            });
        </script>';
	}
1 Like
9

Nice one @uprise - thank you for sharing.

10

Hey Chris,

We’re on 2.5.6 and clicking the submit button multiple times before the form is replaced with the confirmation results in multiple entries. It doesn’t look like there’s anything in the 2.5 changelog. Is this bug still on the roadmap?

11

Hi Johnny. This has changed several times since 2.5 was released. I recommend taking a look at the latest release (v2.5.7.3) to see how this works for you, and if it’s not satisfactory, I recommend opening a support ticket:

Thank you.