New GravityForms Doesn't Support Button Animation

Hi. We have this code that we use to change the button animation. It works in Version 2.4.22 but not in Version 2.5.5.1.

jQuery('.gform_wrapper').on('click', '.gform_button', function() {

          submitContactForm( jQuery(this) );

      });

      function submitContactForm( _this ){

          _this.off('click');
          _this.css('opacity', '0.5');
          _this.val('Sending...');

          _this.attr('disabled', 'disabled');// using this will stop the form from submitting
          jQuery('.gform_wrapper form').submit();// this will make sure that it submits

          //console.log('calibrating...');
      }

Any idea why this doesn’t work anymore?

The way the submit button is treated changed in version 2.5 and later. You will have to update your code to work with the new Gravity Forms version.

Can what this user is trying to accomplish become core functionality? Even disabling the button on click and showing the spinner inside the button would be really helpful to prevent duplicate submissions and provide feedback to the user.

Hi @joelcomit - it’s not possible with default functionality at this time, and a JavaScript or jQuery solution is the only way I know of to accomplish this currently.

Are you able to point me to documentation on how it has changed? I searched the changelog and there was no mention of changes to how the submit button is treated.

Hey Chris,

This thread, the user also supplies some javascript that no longer works and freezes the form.

How can we disable the submit button after the user has clicked “submit”?

This would be a great feature in gravity forms to have.

Taylor

Hi Taylor. I don’t have a method for that at this time. If you would like to suggest that for inclusion in a future release, I recommend adding that to our product roadmap. Click the blue :heavy_plus_sign: in the lower left on this page to add a note for our product team:

https://www.gravityforms.com/gravity-forms-roadmap/

Thank you.

Suggested. I didn’t know I needed this but realised i do. Just building a 80 field 3 page monster of a form with UR and APC and I’m sure I will need this.

It isn’t animation but it does say “Processing, please wait…”

<script type="text/javascript">
	jQuery(document).ready(function($){
		//NOTE: replace 64 below with your actual form ID
		$('#gform_submit_button_64').on('click', function(event){
			$(this).prop('value', 'Processing, please wait...');
		});
	});
</script>

That’s an ok solution but then what happens if the form doesn’t submit and discovers errors or missing required fields. Is there a way to have some kind of callback so that we can reset the button to “Submit”?

We also need this and are really shocked that scripts that worked in versions prior to 2.5 stopped working as soon as we upgraded and actually broke the submission process. Both of the below scripts used to work prior to GF 2.5 BUT now don’t allow the form to actually be submitted when the button is clicked. Is there any way to have the Submit button say “Processing…” after the button is clicked and reverts back to “Submit” if the validation did not allow the entry to be submitted?

Two scripts that used to work in versions prior to GF 2.5:
1.
jQuery(function($){
$(".gform_wrapper form").on(“submit”, function(e){
b = $(“input[type=submit]”, this);
b.attr(“disabled”, true);
b.css(“background”, “darkgray”);
b.css(“color”, “black”);
b.val(“Processing…”);
});
});

jQuery( document ).ready( function ( $ ) {
$( ‘input[type=“submit”]’ ).on( ‘click’, function () {
$( this ).prop( ‘disabled’, true ).val( ‘Processing…’ );
$( this ).parents( ‘form’ ).submit();
} )
} );

Hi Mikhail. Samuel replied here:

I am going to close this topic rather than continue it, because it is so old. Feel free to open a new topic if you need to. Thank you.