onSubmit Adding a Second Javascript Action After Form Validation

Question

I have a form that uses very basic input validation using javascript onSubmit before the server side processing begins in PHP.

However, due to the time the PHP script takes to process (uploading images etc) I am trying to use the same onSubmit function to display a "please wait" notice if it passes validation. Or is there a better way? I tried in PHP, but the processing has to complete before I can echo any output. Anything I have tried from other SO posts stops the validation process.

<form id="form" method="post" action="" onsubmit="return Validate(this)" autocomplete="off">

Current Javascript Example

function Validate(myForm) {
    var error = '';

    // Example Filed
    if(myForm.name.value == '') {
        error += '- Please enter your Name.\n';
    }

    // Show Error Notice
    if(error != '') {

        error = 'The form has not been completed correctly, please check the following:\n\n' + error;
        alert(error); // Displays Error
        return false;

    } else {
        // Allows the form to move on to PHP Processing
        // Need to Show Waiting Notice here
        return true;
    }
}

CSS & HTML Waiting Notice (Initially Hidden)

<style>
    #processing {
        display:block;
        position: fixed;
        top: 0;
        left: 0;
        background: rgba(255,255,255,0.8);
        width: 100%;
        height: 100%;
    }

    #popup {
        width: 300px;
        min-height: 160px;
        padding:20px;
        background-color: #fff;
        border: 5px solid #06C;
        text-align: center;
        color: #202020;
        position: absolute;
        left: 50%;
        top: 50%;
        margin-left: -150px;
        margin-top: -100px;
        -webkit-border-radius: 15px;
        -moz-border-radius: 15px;
        border-radius: 15px;
    }

    #popup img { 
        height:60px; 
        width:60px; 
    }

</style>
<div id="processing">
     <div id="popup">
         <img width="60" height="60" src="../waiting.gif" />   
         <h3>Please Wait!</h3>
         <p>The form is processing...</p>
     </div>
</div>

Any help would be appreciated

Answer 1

On your javascript validation, you could let the user know the image is loading by showing a simple message.

<div class="loading" style="display:none;">Loadin ...</div>

function Validate(myForm) {
    var error = '';

    // Example Filed
    if(myForm.name.value == '') {
        error += '- Please enter your Name.\n';
    }

    // Show Error Notice
    if(error != '') {

        error = 'The form has not been completed correctly, please check the following:\n\n' + error;
        alert(error); // Displays Error
        return false;

    } else {
        // Allows the form to move on to PHP Processing
        // Need to Show Waiting Notice here

        // show the user the image is loading
        $('#form .loading').show();
        return true;
    }
}

After it loads you may remove the message once you get a response from the server.

$('#form .loading').hide();

Answer 2

All you need to do is have the "...Please Wait..." element already present in the document, but hidden and then show it when the submit takes place. You do this by applying a CSS class to the element in the HTML, which hides it initially and then remove that class when the form is valid.

A couple of side notes...

Don't use inline HTML event attributes (onsubmit, onclick, etc.). That is how events were registered 20 years ago and there are many drawbacks to using them. Unfortunately, because most people just copy what others have done, the use of this approach just will not die. Instead, follow modern standards and use .addEventListener().

Also, don't ever name an element or a variable name as name is a property of the Global window object and the use of that name can cause problems in the code.

// Get references to the DOM elements that your code will need
var frm = document.getElementById("form");
var wait = document.getElementById("processing");
var userName = document.getElementById("txtName");

frm.addEventListener("submit", validate);  // Set up events the modern, standards-based way

// All event handlers will automatically be passed a reference 
// to the event object for that event
function validate(evt) {
    var error = '';

    // Example Filed
    if(userName.value == '') {
        error += '- Please enter your Name.\n';
    }

    // Show Error Notice
    if(error != '') {
        error = 'The form has not been completed correctly, please check the following:\n\n' + error;
        alert(error); // Displays Error
        evt.preventDefault();  // Stop the event

    } else {
        // Allows the form to move on to PHP Processing
        // Need to Show Waiting Notice here
        wait.classList.remove("hidden");  // Remove the hidden class
    }
}

#processing {
        display:block;
        position: fixed;
        top: 0;
        left: 0;
        background: rgba(255,255,255,0.8);
        width: 100%;
        height: 100%;
    }
    
    #processing.hidden { display:none } /* This hides the message by default */

    #popup {
        width: 300px;
        min-height: 160px;
        padding:20px;
        background-color: #fff;
        border: 5px solid #06C;
        text-align: center;
        color: #202020;
        position: absolute;
        left: 50%;
        top: 50%;
        margin-left: -150px;
        margin-top: -100px;
        -webkit-border-radius: 15px;
        -moz-border-radius: 15px;
        border-radius: 15px;
    }

    #popup img { 
        height:60px; 
        width:60px; 
    }

<form id="form" method="post" action="#" autocomplete="off">
  <input type="text" id="txtName">
  <input type="submit">
</form>
<div id="processing" class="hidden">
     <div id="popup">
         <img width="60" height="60" src="../waiting.gif" />   
         <h3>Please Wait!</h3>
         <p>The form is processing...</p>
     </div>
</div>