Reputation: 155
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.
Upvotes: 0
Views: 104
Reputation: 3020
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
Upvotes: 1
Reputation: 1995
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();
});
}
Upvotes: 0