預防重複送出【前端篇】

前端網頁常會遇到使用者連續點擊按鈕
(因為我覺得網頁沒反應、我的滑鼠左鍵壞掉等)
造成重複收到Post而執行
整理一下網路上找到的防止重複Post的方法

圖片來源Designed by Freepik

---

1. 1. 按下按鈕前詢問(簡易)

1-1 按鈕加入事件
OnClientClick="return confirm('確定新增嗎？');"
按下按鈕時，跳出視窗提醒使用者，
按下確認才會執行按鈕點擊

1. 2. 按下按鈕前詢問(進階)

比較麻煩，但變化較多
1. 下載插件，並引用參考
a. SweetAlert(範例使用SweetAlert 8.X版)
https://sweetalert2.github.io/v8.html

b. jQuery 任一版本
< script type="text/javascript" src="jquery.min.js">

< script src="sweetalert2.all.min.js" >
< !-- Optional: include a polyfill for ES6 Promises for IE11 -->
< script src="https://cdn.jsdelivr.net/npm/promise-polyfill" >

< link rel="stylesheet" href="sweetalert2.min.css">

2. 按鈕加入自訂class名稱，並加入事件
< asp:Button ID="btn... CssClass="delData" OnClientClick='return false;' />
3. form的最後方加入隱藏的linkbutton
< asp:LinkButton ID="LinkButton1" runat="server" Style="display: none">
4. 頁面加入Java Script
function myConfirm(ctrl, alertTitle, alertMsg, alertIcon) {
  let btnName = $(ctrl).attr("name");
  Swal.fire({
    title: alertTitle,
    text: alertMsg,
    icon: alertIcon,
    showCancelButton: true,
    confirmButtonColor: '#3085d6',
    cancelButtonColor: '#d33',
    confirmButtonText: 'Yes!',
    cancelButtonText: '我想想'
  }).then(function (result) {
    if (result.value) {
      __doPostBack(btnName, "");
    }
    else
      Swal.fire("取消作業", "", "error");
  })
}

5. 新增js，於前端偵測按鈕click事件
$(document).ready(function () {
  $("input.delData").click(function () {
    myConfirm(this, '確定要移除嗎？', '', 'warning');
  });
});

這方法雖然比較麻煩
除了可以彈出視窗再次確認
還可以利用SweetAlert做出更多變化
以上兩種方法是我常用的方式

最後補充防止使用者於表單輸入中按下Enter 觸發按鈕點擊事件 方法是加入一段JavaScript $(document).ready(function () {
  $("input").keypress(function (e) {
    code = e.keyCode ? e.keyCode : e.which; // in case of browser compatibility
    if (code == 13) {
      e.preventDefault();
      // do something
      /* also can use return false; instead. */
    }
  });
});