JavaScript防止表單重復提交的方法

Posted on by

背景

假設我們正在開發一個應用，該應用允許用戶上報突發事件。用戶需要填寫一系列信息並提交表單。為瞭避免用戶在網絡延遲或者誤操作的情況下多次點擊提交按鈕，我們需要在代碼中加入防止重復提交的邏輯。

小白級別：簡單粗暴的禁用提交按鈕

一種簡單的方法是在提交表單時禁用提交按鈕。這可以在JavaScript中通過以下代碼實現：

document.getElementById("submitBtn").disabled = true;

這樣，在用戶點擊提交按鈕後，按鈕就會變為不可用狀態，防止用戶再次點擊。但是，這種方法存在一個問題：如果提交失敗，用戶無法再次點擊提交按鈕，除非刷新頁面。

進階級別：使用標志變量

為瞭解決上述問題，我們可以使用一個標志變量來跟蹤提交狀態。當用戶提交表單時，我們將標志變量設置為true，表示正在提交。在提交結束後，我們將標志變量設置回false。這樣，如果提交失敗，用戶可以再次點擊提交按鈕。示例如下：

var submitting = false; // 定義一個變量用於跟蹤提交狀態 - Define a variable to track the submission status
 
function onSubmit() {
  if (submitting) {
    alert("請勿重復提交！");
    return;
  }
 
  submitting = true;
 
  // 提交表單的邏輯...
  
  // 提交結束後，將提交狀態設置回 false
  submitting = false;
}

大神級別：優雅地處理 AJAX 請求

在實際項目中，我們通常使用 AJAX 進行表單提交，以實現無刷新更新頁面。為瞭更好地處理重復提交問題，我們可以在 AJAX 請求的開始和結束時更新提交狀態。這樣，我們可以確保在請求尚未結束時，用戶無法再次點擊提交按鈕。示例代碼如下：

var submitting = false; // 定義一個變量用於跟蹤提交狀態 - Define a variable to track the submission status
 
function submit() {
  if (submitting) {
    layer.msg("請勿重復提交！", {icon: 5, time: 2000});
    return false;
  }
 
  submitting = true;
 
  // ... 其他表單驗證代碼
 
  var reportPage = top.layer.open({
    // ... 其他屬性配置
    yes: function (data) {
    // ... 其他邏輯代碼
    var result = ajax返回的結果
    if (result.code == '0') {
        layer.msg("成功", {icon: 6, time: 2000});
    } else {
        layer.msg("失敗", {icon: 5, time: 2000});
    }
    // 請求結束，將提交狀態設置回 false
    submitting = false;
    },
    btn2: function (index, layero) {
        top.layer.close(reportPage); // 關閉當前頁面
    }
  });
  return false;
}

通過上述代碼，我們可以確保在 AJAX 請求進行中，用戶無法再次點擊提交按鈕。當請求結束後，不論成功或失敗，我們都將提交狀態設置回 `false`，使得用戶可以在需要時再次點擊提交按鈕。

總結

從小白級別到大神級別，我們學習瞭種防止表單重復提交的方法。對於初學者來說，簡單禁用提交按鈕可能就足夠瞭。然而，在實際項目中，我們通常需要使用更高級的方法，如標志變量和優雅地處理 AJAX 請求。最後，希望這篇文章能幫助大傢更好地理解如何防止表單重復提交，提高代碼的穩定性和可維護性。 

到此這篇關於JavaScript防止表單重復提交的方法的文章就介紹到這瞭,更多相關JS防止表單重復提交內容請搜索WalkonNet以前的文章或繼續瀏覽下面的相關文章希望大傢以後多多支持WalkonNet！

推薦閱讀：