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.

I am not particularly clear on what you want to achieve on the form. Can you give a sample use case in your UI? — user1941489
– user1941489, Commented Aug 29, 2016 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
– Juan Garcia, Commented Aug 29, 2016 at 20:52

Community · Accepted Answer · 2017-05-23 10:29:11Z

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

edited May 23, 2017 at 10:29

CommunityBot

11 silver badge

answered Aug 29, 2016 at 21:46

yezzz

3,0381 gold badge12 silver badges20 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Yuri Pereira · Accepted Answer · 2016-08-29 20:59:00Z

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();
    });
}

answered Aug 29, 2016 at 20:59

Yuri Pereira

2,0051 gold badge20 silver badges25 bronze badges

1 Comment

Jaykumar Over a year ago

The question is about JavaScript. There is no JQuery tag.

Collectives™ on Stack Overflow

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

2 Answers 2

Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related