How to Disable Submit Button on Form Submission in Magento 2

Thank you.
Also, do share the post with Magento Community via social media.
Collecting customer data is the most common requirement you may have addressed while performing customization in Magento 2 store or developing Magento 2 extensions. One of the best ways to do so is through forms, and for that, you need to create custom form in Magento 2.
Something went wrong.
It ends up storing multiple same data of the same user in the database and creating confusion.
I’d be happy to help.
It gives acknowledgment to users that their data is getting processed and the next operation will be executed soon. Additionally, it helps you to prevent multiple form submissions also!

Method to Disable Submit Button on Form Submission in Magento 2

Use the below code in form.phtml file located at app/code/Vendor/Extension/view/frontend/templates

Any doubts about this solution can be mentioned in the Comments section below.
Thank you for subscribing.
Perform the same using the below code.
In order to avoid such a situation, we need to prevent multiple form submissions, and it can be done using the below method to disable submit button on form submission in Magento 2
We can get the data on the click event of the submit button and pass it to the database. In this process, what if the user press the submit button frequently while the data storing operation is still in the processing state? The users may do so because they may not get acknowledgment of their form submission.

Get Weekly Updates

That’s it! You can easily disable submit button on form submission in Magento 2 by implementing the above code.

For instance, a user enters the required detail in the custom form and clicks on submit button. After clicking the button once, just disable submit button on the form submission until the data is still in the processing stage. It prevents unnecessary clicks as well as helps to improve the user experience too!
Never miss Magento tips, tricks, tutorials, and news.

/**/

/*.mfp-bg{background:#000000d4}
/*]]>*/

/*.mfp-bg.mfp-ready{opacity:.6}
/*]]>*/

(based on 0 Reviews)