How to Disable Submit Button on Form Submission in Magento 2
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.
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.
It ends up storing multiple same data of the same user in the database and creating confusion.
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.
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!
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!
Perform the same using the below code.
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
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 |
<form id="appointment-form" class="appointment-form" action="<?= $block->getFormAction(); ?>" data-mage-init='{"validation":{}}' enctype="multipart/form-data" method="post" name="appointment-form"> <fieldset class="fieldset"> <div class="field customer-name required"> <label class="label" for="first_name"> <span><?= $block->escapeHtmlAttr(__('First Name')) ?></span> </label> <div class="control"> <input id="first_name" name="first_name" value="" title="<?= $block->escapeHtmlAttr(__('First Name')) ?>" class="input-text required-entry" data-validate="{required:true}" autocomplete="off" aria-required="true" type="text"> </div> </div> <div class="field customer-name required"> <label class="label" for="last_name"> <span><?= $block->escapeHtmlAttr(__('Last Name')) ?></span> </label> <div class="control"> <input id="last_name" name="last_name" value="" title="<?= $block->escapeHtmlAttr(__('Name')) ?>" class="input-text required-entry" data-validate="{required:true}" autocomplete="off" aria-required="true" type="text"> </div> </div> <div class="field required"> <label for="email" class="label"> <span><?= $block->escapeHtmlAttr(__('Email')) ?></span> </label> <div class="control"> <input name="email" autocomplete="email" id="email" value="" title="<?= $block->escapeHtmlAttr(__('Email')) ?>" class="input-text" data-validate="{required:true, 'validate-email':true}" aria-required="true" type="email"> </div> </div> </fieldset> <div class="actions-toolbar"> <div class="primary"> <input name="form_key" type="hidden" value="<?= $block->getFormKey(); ?>"> <button type="submit" title="<?= $block->escapeHtmlAttr(__('Submit')) ?>" class="action submit primary btn btn-primary"> <span><?= $block->escapeHtml(__('Submit')) ?></span> </button> </div> </div> </form> <script type="text/x-magento-init"> { "*": { "Magento_Customer/js/block-submit-on-send": { "formId": "appointment-form" } } } </script> |
That’s it! You can easily disable submit button on form submission in Magento 2 by implementing the above code.
Any doubts about this solution can be mentioned in the Comments section below.
I’d be happy to help.
Also, do share the post with Magento Community via social media.
Thank you.
Prev
Meetanshi Magento Extensions Launches and Updates June [2021]
How to Implement Field Dependency from Different Groups in Magento 2 System.xml
Next