JSP 防止表單重複提交的實用技巧

前言

在 Web 開發中，使用者若連續點擊提交按鈕，可能導致表單重複送出，造成資料重複或系統負擔。Struts 2 雖內建防重複機制，但預設會導向錯誤頁面，體驗不佳。本文介紹兩種純前端 JavaScript 解法，讓重複提交「靜默失效」，僅執行一次送出。

方法一：標記變量法

利用全域布林旗標 checkSubmitFlg，首次提交時設為 true，後續提交直接回傳 false 阻止送出。

<script type="text/javascript">
var checkSubmitFlg = false;
function checkSubmit() {
    if (checkSubmitFlg) return false;
    checkSubmitFlg = true;
    return true;
}
</script>

<form onsubmit="return checkSubmit();" method="post">
    <!-- 表單欄位 -->
    <input type="submit" value="送出" />
</form>

此法在 IE6 與 Firefox 均測試有效，簡單輕量。

方法二：禁用提交按鈕（含延時）

針對回應緩慢的伺服器，提交後立即將所有 type="submit" 按鈕設為 disabled，給使用者視覺回饋。但直接禁用會導致按鈕自帶的 onclick 等事件失效，故加入 100ms 延時。

<script type="text/javascript">
function disableSubmit(form) {
    var elements = form.elements;
    for (var i = 0; i < elements.length; i++) {
        if (elements[i].type === 'submit') {
            elements[i].disabled = true;
        }
    }
}
</script>

<form name="form1" onsubmit="setTimeout('disableSubmit(form1)',100); return checkSubmit();" method="post">
    <!-- 表單欄位 -->
    <input type="submit" value="送出" />
</form>

測試顯示 IE6 正常，Firefox 略有問題，但可作為第二層防護。

總結

• 方法一：邏輯簡單，相容性佳，適合大多數場景。
• 方法二：使用者體驗較好，適合處理緩慢請求，建議搭配方法一雙重保險。