Form Submission - Enable/Disable Submit button - Statamic V2

[kbarkhurst]

This question is not Statamic specific per se but understanding how to do this will improve the usability of my current Statamic sites, so thank you for any and all teaching assistance you'll provide.

Goal:
I'm using Statamic forms and want the Submit button to be disabled during form submission and enabled again upon success or fail.

I've learned how to do this is Javascript and even included a setTimeout to disable the button for a minimum set amount of time, regardless of how fast the submission actually takes. However, I do not understand how to apply something similar to this to the Statamic form submissions. A successful javascript solution for an API call is on my codepen here:
https://codepen.io/kbkbkb/pen/KKGyXxq

I'm looking to implement something similar to what is shown in the CodePen link above on a Statamic V2 website that uses Bootstrap/Jquery.

I'm unsure how to accomplish this. Is the enable/disable functionality implemented in php? Is it javascript added to the template where my form is located? Can someone perhaps show a code example of how they've accomplished this on their site? Is it different to implement on Statamic V2 and Statamic V3 or is it the same concept?

To note: I do have Statamic V3 sites, but as these are all using the Peak theme, the disabled button is already happening on forms because of scripts added on _form.antlers.html. The Peak theme is using Alpine.js and Tailwind CSS. Therefore, the model I can see working on Peak can not be implemented on my Statamic V2 site that is not using the Peak Starter Kit.

Appreciate the input!

[edalzell]

However, I do not understand how to apply something similar to this to the Statamic form submissions.

I don't understand how Statamic form submissions are any different. How are you submitting them?

[twd3]

I highly recommend installing AlpineJS: https://alpinejs.dev/
Then wrapping form in a div with x-data and putting something like this on the button:

<div x-data="{ buttonDisabled: false }">
<button type="submit" x-bind:disabled="buttonDisabled" :class="{'btn-submitting': buttonDisabled}"
</div>

You would also need this on your Statamic form tag:

{{ form:contact redirect="/contact-thank-you" id="contactForm" x-on:submit="buttonDisabled = true" }}