Disable Submit button after submit

  • 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

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.

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();
});

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

© 2008 - 2019. Gravity Forms is a project by Rocketgenius Inc.