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...');
}
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.
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 in the lower left on this page to add a note for our product team:
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();
} )
} );
in the lower left on this page to add a note for our product team: