How do I trigger a POPUP with onClick Sumbit button ?

abiodunajai 371 Reputation points
2022-05-19T07:27:52.387+00:00

Kindly assist with the Information Popup to give user feedback after the Submit button is Clicked.

My Code

@model ProgressSamples.MusicGenre  
  
@{  
  ViewBag.Title = "Font Awesome Spinner";  
}  
  
<!-- Styles for Wait Messages -->  
<link href="~/Content/font-awesome.min.css" rel="stylesheet" />  
  
<style>  
  .submit-progress-bg {  
    background-color: lightgray;  
    opacity: .5;  
  }  
  
  .submit-progress {  
    position: fixed;  
    top: 50%;  
    left: 50%;  
    height: 6em;  
    padding-top: 2.3em;  
    z-index: 1;  
    /* The following properties are the ones most likely to change */  
    width: 20em;  
    /* Set 'margin-left' to a negative number that is 1/2 of 'width' */  
    margin-left: -10em;  
    padding-left: 2.1em;  
    background-color: black;  
    color: white;  
    -webkit-border-radius: 0.4em;  
    -moz-border-radius: 0.4em;  
    border-radius: 0.4em;  
    box-shadow: 0.4em 0.4em rgba(0,0,0,0.6);  
    -webkit-box-shadow: 0.4em 0.4em rgba(0,0,0,0.6);  
    -moz-box-shadow: 0.4em 0.4em rgba(0,0,0,0.6);  
  }  
  
  /* Changing style for spinner */  
  .submit-progress {  
    padding-top: 2em;  
    width: 23em;  
    margin-left: -11.5em; /* Set to a negative number that is 1/2 of the width */  
  }  
  
    .submit-progress i {  
      margin-right: 0.5em;  
    }  
</style>  
  
@using (Html.BeginForm())  
{  
  <!-- ** BEGIN POP-UP MESSAGE AREA ** -->  
  <div class="submit-progress hidden">  
    <i class="fa fa-2x fa-spinner fa-spin"></i>  
    <label>Please wait while Saving Data...</label>  
  </div>  
  <!-- ** END POP-UP MESSAGE AREA ** -->  
  
  <div class="row">  
    <div class="col-sm-6 center-block">  
      <div class="panel panel-default">  
        <div class="panel-heading">  
          <h3 class="panel-title">Add Music Genre</h3>  
        </div>  
        <div class="panel-body">  
          <div class="form-group">  
            <label>Music Genre</label>  
            @Html.TextBoxFor(m => m.Genre, new { @class = "form-control" })  
          </div>  
        </div>  
        <div class="panel-footer">  
          <button type="submit"  
                  id="submitButton"  
                  class="btn btn-primary"  
                  onclick="return DisplayProgressMessage(this, 'Saving...');">  
            Save  
          </button>  
        </div>  
      </div>  
    </div>  
  </div>  
}  
  
<script>  
function DisplayProgressMessage(ctl, msg) {  
  // Turn off the "Save" button and change text  
  $(ctl).prop("disabled", true).text(msg);  
  // Gray out background on page  
  $("body").addClass("submit-progress-bg");  
  
  // Wrap in setTimeout so the UI can update the spinners  
  setTimeout(function () {  
    $(".submit-progress").removeClass("hidden");  
  }, 1);  
  
  return true;  
}  
</script>  

The Popup is not firing when the Sumit button is clicked.

Your assistance will be greatly appreciated.

Best regards

Lawrence

@Yihui Sun-MSFT
@Yihui Sun
@Jerry Cai-MSFT

ASP.NET Core
ASP.NET Core
A set of technologies in the .NET Framework for building web applications and XML web services.
4,079 questions
ASP.NET
ASP.NET
A set of technologies in the .NET Framework for building web applications and XML web services.
3,220 questions
0 comments No comments
{count} votes

Accepted answer
  1. Zhi Lv - MSFT 31,756 Reputation points Microsoft Vendor
    2022-05-20T06:43:56.157+00:00

    Hi @abiodunajai ,

    How do I trigger a POPUP with onClick Sumbit button

    There are two methods to show the popup before submitting the form:
    One is to change the submit type button to a button type button.
    Another one is to use the event.preventDefault() method to prevent the default submit button submit behavior. code like this:

    203992-image.png

    I have amended the script as directed by changing the type=''submit' to type='button' with the new Javascript but it is still not firing the Popup.

    It will be greatly appreciated if a Fiddle is attached for a practical demonstration, please.

    Agree with Bruce, perhaps the submit and redirect action is too fast. You can try to remove the $("form").submit(); from the JS function, in this scenario, the form is not submitted and the popup will continue displaying.

    203920-image.png

    Or, you can use the setTimeout method to wait 2 seconds, after the timeout it will submit the form. code like this:

        // Wrap in setTimeout so the UI can update the spinners  
        $(".submit-progress").removeClass("hidden");  
        //submit the form.  
        setTimeout(function () {  
            $("form").submit();   
        }, 2000);  
    

    The output as below: you can view the source code from here: 204021-pagecode.txt

    203983-2.gif

    If using the above methods the popup still not showing, try to use F12 developer tools to check if there any error.


    If the answer is the right solution, please click "Accept Answer" and kindly upvote it. If you have extra questions about this answer, please click "Comment".
    Note: Please follow the steps in our documentation to enable e-mail notifications if you want to receive the related email notification for this thread.

    Best regards,
    Dillion


2 additional answers

Sort by: Most helpful
  1. Bruce (SqlWork.com) 53,501 Reputation points
    2022-05-19T15:47:11.317+00:00

    once you start the submit, the browser start to shutdown page processing. change the button to type="button" so it will not submit, then the javascript:

    function DisplayProgressMessage(ctl, msg) {
       // Turn off the "Save" button and change text
       $(ctl).prop("disabled", true).text(msg);
       // Gray out background on page
       $("body").addClass("submit-progress-bg");
       // display
       $(".submit-progress").removeClass("hidden");
    
       // submit in setTimeout so the UI can update the spinners
       setTimeout(function () {
             $("form").submit();
       });
    
     }
    

  2. Bruce (SqlWork.com) 53,501 Reputation points
    2022-05-19T22:19:18.553+00:00

    I just copied your code and it worked. maybe your response is too fast to see the popup.

    0 comments No comments