How to Disable Submit Button After Click in Sitecore Forms?

Question

I'm working with Sitecore 10.1 and facing a challenge with Sitecore forms. I want to disable the submit button right after it's clicked. I've attempted some script solutions but haven't found a reliable way that integrates smoothly with Sitecore's form handling.

Below script I tried but it didn't work

<script type="text/javascript">
// Disables submit button and changes its appearance only if the form is valid
$(document).ready(function() {
    $('form').each(function() {
        var form = $(this); // Current form in the loop
        form.on('submit', function(e) {
            // Check if the form is valid
            if(form.valid()) {
                var submitButton = form.find('input[type="submit"], button[type="submit"]');
                if (!submitButton.prop('disabled')) {
                    submitButton.prop('disabled', true).val('Submitting...').addClass('disabled-button');
                }
            }
        });
    });
});
</script>

Has anyone successfully implemented a solution for this? Any suggestions would be appreciated.

Answer 1

You can try this solution

let button = document.querySelector('button[type="submit"]')

button.addEventListener("click" , function () {

button.disabled = true;
    
})

Answer 2

You can also try this script to disable the button and you can modify this as per your need.

<script type="text/javascript">
jQuery.fn.preventDoubleSubmission = function() {
  $(this).on('submit',function(e) {
    var $form = $(this);
    if ($form.data('submitted') === true) {
      alert('The form is already submitted. Please wait.');
      e.preventDefault();
      $form.find(':submit').attr('disabled','disabled');
    } else {
      if($form.valid()) {
        $form.data('submitted', true);
      }
    }
  });
  return this;
};

$("form[data-sc-fxb='@Model.ItemId']").preventDoubleSubmission();
</script>

For more details refer to this one.

https://support.sitecore.com/kb?id=kb_article_view&sysparm_article=KB1001288

Hope this helps.