表单提交后通过计时器控制按钮禁用/样式修改的实现问题

你的现有代码逻辑是点击按钮先禁用按钮，再触发页面刷新，完全和需求的「先完成表单提交，再禁用按钮10秒/修改按钮状态10秒」相反。下面分三种场景给你调整代码：

场景1：无刷新AJAX提交表单，完成后禁用按钮10秒 #

普通表单提交会刷新页面，导致按钮状态重置，所以用AJAX提交表单，确保提交完成后再处理按钮：

HTML代码 #

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form id="voteForm" method="POST" action="#">
    <button id="upside" type="submit" class="">Up</button>
</form>

JS代码 #

// 绑定表单提交事件
$("#voteForm").on("submit", function(e) {
    // 阻止默认表单提交行为
    e.preventDefault();
    const $btn = $("#upside");
    
    // 提交前临时禁用防止重复点击
    $btn.attr("disabled", true);
    
    // AJAX提交表单数据
    $.ajax({
        url: $(this).attr("action"),
        method: $(this).attr("method"),
        data: $(this).serialize(),
        success: function(response) {
            // 提交成功后，保持禁用状态10秒
            setTimeout(function() {
                $btn.removeAttr("disabled");
            }, 10000); // 10秒=10000毫秒
        },
        error: function() {
            // 提交失败立即恢复按钮可用
            $btn.removeAttr("disabled");
            alert("提交失败，请重试");
        }
    });
});

场景2：提交后修改按钮样式/文本，维持10秒 #

如果需求是提交后按钮变色、改文字（比如显示「已提交」），10秒后恢复原状：

JS代码（基于场景1的HTML） #

$("#voteForm").on("submit", function(e) {
    e.preventDefault();
    const $btn = $("#upside");
    const originalText = $btn.text();
    const originalClass = $btn.attr("class");
    
    // 修改按钮状态和样式
    $btn.attr("disabled", true).text("已提交").addClass("submitted");
    
    $.ajax({
        url: $(this).attr("action"),
        method: $(this).attr("method"),
        data: $(this).serialize(),
        complete: function() {
            // 不管成功失败，10秒后恢复按钮原状
            setTimeout(function() {
                $btn.removeAttr("disabled").text(originalText).attr("class", originalClass);
            }, 10000);
        }
    });
});

搭配CSS定义变色样式：

.submitted {
    background-color: #28a745;
    color: white;
    border-color: #28a745;
}

场景3：必须用普通表单提交（页面会刷新） #

如果业务要求必须刷新页面提交，那需要用localStorage记录提交时间，页面加载时检查是否在10秒内，来设置按钮状态：

JS代码 #

function checkSubmitStatus() {
    const $btn = $("#upside");
    const submitTime = localStorage.getItem("lastSubmitTime");
    const now = Date.now();
    
    if (submitTime && (now - parseInt(submitTime) < 10000)) {
        // 10秒内刚提交过，禁用按钮并计时恢复
        $btn.attr("disabled", true);
        const remaining = 10000 - (now - parseInt(submitTime));
        setTimeout(function() {
            $btn.removeAttr("disabled");
            localStorage.removeItem("lastSubmitTime");
        }, remaining);
    }
}

// 页面加载时检查状态
$(document).ready(function() {
    checkSubmitStatus();
    
    // 表单提交前记录时间
    $("#voteForm").on("submit", function() {
        localStorage.setItem("lastSubmitTime", Date.now().toString());
    });
});

HTML代码 #

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form id="voteForm" method="POST" action="#">
    <button id="upside" type="submit" class="">Up</button>
</form>

内容的提问来源于stack exchange，提问作者fahad qayyum