如何在使用 JavaScript 提交表单后启用按钮答案

【问题标题】：How to enable a button after the form is submitted using JavaScript如何在使用 JavaScript 提交表单后启用按钮
【发布时间】：2016-08-29 20:45:35
【问题描述】：

我正在尝试在提交表单后启用按钮。我可以启用该按钮，但我想等待表单完成该过程，然后启用该按钮。我可以使用setTimeout() 等待几秒钟，然后启用该按钮，但我不希望这样。我想一旦表单完成它的过程然后启用按钮。我不确定这是否是一个可能的用例。

表格：

<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'; 
 }

谢谢。

【问题讨论】：

我不是特别清楚你想在表单上实现什么。你能在你的 UI 中给出一个示例用例吗？
我建议每隔 n 秒检查一次进程的状态，该进程应该向您发送一个状态，创建一个执行该检查的函数并使用 setTimeout 执行该函数。函数里面的状态还在处理中，使用 setTimeout 再次调用相同的函数，直到处理完成。我建议也检查重试，否则你将有一个无限的检查循环。

标签： javascript html

【解决方案1】：

阻止表单提交事件，然后通过ajax提交，例如。使用 jQuery $.post。使用 .done（或 $.ajax 中的成功处理程序）调用您的函数：

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

$.ajax 示例，使用成功：Submit form via AJAX in jQuery

【讨论】：

【解决方案2】：

在你的 app.js（你的脚本文件）中试试这个

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

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

【讨论】：

问题是关于 JavaScript 的。没有 JQuery 标签。