Disable Submit Button on Click on Gravity Forms While Ajax Is Enabled?
I'm Using Gravity Forms on Wordpress and Enqueueing a Script to Disable the Submit Button After a Click on Each Form Because My Team Has Been Having Problems...
I'm using gravity forms on wordpress and enqueueing a script to disable the submit button after a click on each form because my team has been having problems with double (triple, quadruple..) form submissions.
Basic script:
$(document).ready(function() {
$('#gform input[type=submit]', this).on('click', () => {
$('#gform input[type=submit]').prop('disabled', true);
});
});
It works on forms where AJAX isn't enabled and the forms aren't embedded. When I navigate to a page where this is the case, however, it works the first time and then, since the page doesn't refresh, the script doesn't apply to it anymore magically and it doesn't disable the button.
I thought this would run every time the button is clicked but something seems to be working incorrectly.
Any ideas would be appreciated! :D
1 Answer
I was able to accomplish this by adding the below JavaScript directly to the form using the HTML block within the form builder.
<script type="text/javascript">
if (document.querySelector(".gform_wrapper")) {
const submitBtn = document.querySelectorAll("input[type='submit']")[0];
submitBtn.addEventListener("click", () => {
submitBtn.disabled = true;
});
}
</script>
Hope this helps.
James Sterling reports on renewable energy developments, climate policy, ecological conservation, and green tech innovations around the globe.
