0

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.

matisetorm
  • 857
  • 8
  • 21
Jaykumar
  • 165
  • 1
  • 8
  • 23
  • I am not particularly clear on what you want to achieve on the form. Can you give a sample use case in your UI? –  Aug 29 '16 at 20:51
  • Ji what i recommend is to check every n seconds for the status of the process, the process should send you back a status, create a function that do that check and use the setTimeout to execute that function. Inside the function of the status is still processing, the use setTimeout again calling the same function again, do that until the process is completed. I suggest also to check with retries, if not you will have an infinite checking loop. – Juan Garcia Aug 29 '16 at 20:52

2 Answers2

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

Community
  • 1
  • 1
yezzz
  • 2,990
  • 1
  • 10
  • 19
0

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();
    });
}
Yuri Pereira
  • 1,945
  • 17
  • 24