Submit the form using JavaScript showing the please wait message not functioning-CodePudding

In my ASP.NET MVC application, in a form submit event I wanted to show please wait for a message when clicking the submit button.

There also I have added required attributes for the mandatory fields.

So I modified the code as follows. Then it checks the required fields are filled before submitting.

But when this happens it doesn't show the please wait for meassage.

Even if all fields are filled, it's also submitting the data without showing the Please wait for message.

This is the example I got from the internet. https://weblogs.asp.net/psheriff/displaying-a-wait-message-on-an-mvc-page

This is my customized code

<div >
  <input type="submit" value="Register Customer" id="submitButton"  onclick="return DisplayProgressMessage();" />
</div>

Javascript

function DisplayProgressMessage(ctl, msg) {
  //document.getElementById('submitButton').style.display = 'none',
  $('my-form').on('submit', CheckRequired);
  $(ctl).prop("disabled", true);
  $(ctl).text(msg);
  $(".submit-progress").removeClass("hidden");
  $("body").addClass("submit-progress-bg");

};

CodePudding user response：

Finally I made it doing this change

  let allAreFilled = true;
 document.getElementById("my-form").querySelectorAll("[required]").forEach(function (i) {
   if (!allAreFilled) return;
   if (!i.value) {
     allAreFilled = false;
     return;
   }
 })
 if (!allAreFilled) {

 } else {
   $(ctl).prop("disabled", true);
   $(ctl).text(msg);
   $(".submit-progress").removeClass("hidden");
   $("body").addClass("submit-progress-bg");
   document.getElementById("my-form").submit();
 }