How to enable a button after the form is submitted using JavaScript

Question

I am trying to enable a button once the form is submitted. I can enable the button but I want to wait for the form to complete the process and then enable the button. I can wait for a few sec using setTimeout() and then enable the button but I don't want that. I want once the form has completed it's process then enable the button. I am not sure if this is a possible use case.

Form:

<input type=submit id="myButton" class="esignReports" value="Export E-Sign Information" onclick="disableReportButton(), enableReportButton()"/>

JS:

 function disableReportButton() {
    document.getElementById('viewIntegrationReport').submit();
    document.getElementById('myButton').disabled = true;
    document.getElementById('myButton').value = 'Please wait'; 
 }

 function enableReportButton() {
    document.getElementById('myButton').disabled = false;
    document.getElementById('myButton').value = 'Export E-Sign Information'; 
 }

Thanks.

Answer 1

Prevent form submit event, then submit via ajax, eg. using jQuery $.post. Use .done (or success handler in $.ajax) to call your functions:

$("form").on("submit", function(e){
    e.preventDefault();
    $.post( /* your data here */ )
        .done(function(){
            // do stuff after post
            disableReportButton();
            enableReportButton();
        };
});

An example with $.ajax, using success: Submit form via AJAX in jQuery

Answer 2

Try this in your app.js (your script file)

$( document ).ready(function() {
    document.getElementById('myButton').hide();
    function enableReportButton(callback) {
        $("form").on("submit", function(e){
           e.preventDefault();
           callback();
        });
    }

    enableReportButton( function() {
        document.getElementById('myButton').show();
    });
}