javascript: how to add 'modal' div, or at least delay untill finish reading

Question

I have a form with some fields. If some of the fields are not filled-in - I want to show an alert. If other fields are not filled-in - I want to show an 'soft-alert' and continue submitting the form.

when I use javascript alert window - all works well.

when I use show\hide DIV with my message, the form is submitted before the user manage to read the message.

I tried to use setTimeout but it does not work.

Any ideas?

similiar questions, but without the 'soft-alert': Onclick validate form, if valid only submit form jQuery Modal that appears on form submit

my JavaScript code:

 // - - - - - - - -
  // -  $popUp alert:
  // - - - - - - - -
    $('#popUpCloseBtn').click(function() {
        $('#popUpMainText').html('');
        $('#popUpHeaderText').html('');
        $('#popUpContainer').css("display", "none");
    });

   function popUpShow() {
        var popUpObj = document.getElementById("popUpContainer");
        popUpObj.style.display = "block";

        var topPos = 200; // ($(window).height() / 2) - (popUpObj.offsetHeight / 2);
        var leftPos = ($(window).width() / 2) - (popUpObj.offsetWidth / 2);

        popUpObj.style.top = topPos + "px";
        popUpObj.style.left = leftPos + "px";

    }

  function showAlert(htmlTitle, htmlText, isErr) {
    if (isErr) {
      $('#popUpMainText').addClass("popUpTextError").removeClass("popUpTextSuccess");
    } else {
      $('#popUpMainText').addClass("popUpTextSuccess").removeClass("popUpTextError");
    }
    $('#popUpMainText').html(htmlText);
    $('#popUpHeaderText').html(htmlTitle);
    popUpShow(); 
  }


  // - - - - - - - -
  // -  submit form:
  // - - - - - - - -

    $("#Save").click(function(){
        return SaveSubmit();
    });


    function SaveSubmit() {

       var isEmptyField1 = (document.getElementById('f1').value.trim() == '' )
       var isEmptyField2 = (document.getElementById('f2').value.trim() == '' )

       var strErr = "";
       if ( isEmptyField1 ) {
         strErr += "<b>WARNING ! YOU CAN NOT CONTINUE.</b>" + "<br />";
         strErr += "The following fields are empty, please enter them to continue:" + "<br />";
         strErr += "field 1 <br />";
         strErr += "field 2 <br />";

         // alert(strErr);
         var popUpTitle = "Alert";
         var popUpText = strErr;
         var popUpIsErr = true;
         showAlert(popUpTitle, popUpText, popUpIsErr);
         return false;
       }

       if ( isEmptyField2 ) {  // 'soft-alert' :
         strErr += "FOR INFORMATION ! The following fields are empty: " + "<br />";
         strErr += "field 3 \n";
         strErr += "field 4 \n";

         // alert(strErr);
         var popUpTitle = "Alert";
         var popUpText = strErr;
         var popUpIsErr = false;
         showAlert(popUpTitle, popUpText, popUpIsErr);
         setTimeout(function() {  
           var x = " // wait a little, so the user can read the message";
           document.form_display.submit();
           return true;
         }, 20 * 1000); // It does not wait 20 seconds!!!
         // do not return false!
       }


       // If gets here, all is ok . . .
         document.form_display.submit();
         return true;
    }

my HTML code:

     <FORM . . .>
            . . . 
            <input type="submit" name="Save" id="Save" value="Enregistrer" >
     </FORM>


<div id="popUpContainer" class="popUpContainer">
      <div class="popUpHeader" ><span id="popUpHeaderText" ></span></div>
      <div class="popUpMain" ><span id="popUpMainText"></span></div>
      <div class="popUpFooter" ><input id="popUpCloseBtn" type="submit" value="Close" /></div>
</div>

Check out [this Question](http://stackoverflow.com/questions/6515502/javascript-form-submit-confirm-or-cancel-submission-dialog-box)! I think it can help you with your problem! — TeemoBiceps, Feb 20 '17 at 16:08
You would need to use something like this in order to prevent submitting the form before all checks are valid `$("#Save").click(function(e){ e.preventDefault() return SaveSubmit(); }); ` — Manuel Cheța, Feb 20 '17 at 16:09
@TeemoBiceps - If I use JavaScript alert, it is modal window, and all works well. How do I make my own wDIV behave as modal ? — Atara, Feb 21 '17 at 09:23

score 0 · Accepted Answer · answered Feb 22 '17 at 18:05

I changed the code: SaveSubmit() does not submit the form. instead a special "Close" button for the soft-alert is submitting:

  $('#popUpCloseBtn').click(function() {
    popUpClose();
  });
  $('#popUpCloseAndSaveBtn').click(function() {
    // popUpClose(); 
    document.form_display.submit();
  });

  function showAlert(htmlTitle, htmlText, isErr) {
    if (isErr) {
        $('#popUpCloseBtn').css("display", "block");
        $('#popUpCloseAndSaveBtn').css("display", "none");      
    } else {
        $('#popUpCloseAndSaveBtn').css("display", "block");
        $('#popUpCloseBtn').css("display", "none");     
   }
    . . .

    function SaveSubmit() {
    . . .
    if ( isEmptyField2 ) {
    . . .
         showAlert(popUpTitle, popUpText, popUpIsErr); 
         return false;  // the DIV.closeAndSaveBtn will submit the form

javascript: how to add 'modal' div, or at least delay untill finish reading

1 Answers1