2

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.

2 Answers 2

2

You can try this solution

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

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

button.disabled = true;
    
})
0

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.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.