JS實現防止重複點選提交

1.1 問題描述

預設工具欄提交按鈕在提交時，會自動禁用提交按鈕本身以及頁面任何操作，以防使用者誤操作。

但是如果使用了自訂按鈕來提交，或者使用了JS提交API來實現提交，就沒有這個效果了。且頁面不會提示使用者正在提交，所以容易帶來一些誤操作。針對這類問題，要怎麼解決呢？

1.2 解決思路

利用 JS API在按鈕的點選事件中禁用按鈕，然後在相應填報事件中重新啟動按鈕，這樣就能保證資料成功入庫後才可以再次點選提交。

API說明可參考：API匯總

2.1 準備範本

準備一個大數據量的範本，本範例直接用了 range() 函式來模擬

2.2 新增按鈕

在B1 儲存格中新增一個「按鈕元件」，設定按鈕類型為「普通」，按鈕名稱為「提交」，元件名稱為「submit」。如下圖所示：

2.3 設定填報屬性

選中提交按鈕所在 B1 儲存格，給元件新增一個點選事件，類型選擇「提交入庫」，並綁定資料庫欄位。如下圖所示：

2.4 設定禁用按鈕

選中提交按鈕所在 B1 儲存格，再次給元件新增一個點選事件，用於在點選該按鈕後禁用自己並給出提示。

JavaScript 程式碼如下：

this.setEnable(false);
//禁用當前按鈕
FR.Msg.alert("提示","提交中，請耐心等待");
//彈出提示

2.5 設定啟動按鈕

選中提交按鈕所在 B1 儲存格，在 2.3 設定的填報屬性介面中找到「設定回呼函式」功能，用JS實現填報結束後啟動按鈕的功能。

JavaScript 程式碼如下：

if (fr_submitinfo.success) {
	FR.Msg.toast('提交成功');
} else {
	FR.Msg.toast('提交失敗，錯誤資訊為：' + fr_submitinfo.failinfo);
}
_g().getWidgetByName("submit").setEnable(true);
//啟動提交按鈕

2.6 效果預覽

儲存報表，點選「填報預覽」，點選提交按鈕。效果如下圖所示：

注1：按鈕中設定提交事件，不會觸發資料校驗功能，如果需要資料校驗，可以參考範例二。

注2：不支援行動端預覽。

3.1 準備範本

準備一個大數據量的範本，本範例直接用了 range() 函式來模擬。

3.2 新增按鈕

在B1 儲存格中新增一個「按鈕元件」，設定按鈕類型為「普通」，按鈕名稱為「提交」，元件名稱為「submit」。如下圖所示：

3.3 設定填報屬性

在「範本>報表填報屬性」中設定填報屬性。

3.4 設定提交按鈕

選中提交按鈕所在 B1 儲存格，給元件新增一個點選事件

JavaScript 程式碼如下：

this.setEnable(false);
//禁用當前按鈕
setTimeout(function() {
	_g().verifyAndWriteReport(true);
	//校驗並提交
}, 100)

3.5 設定檢驗後事件

菜單欄點選範本>範本Web屬性>填報頁面設定，選擇為該範本單獨設定，新增校驗後事件，如下圖所示：

JavaScript 程式碼如下：

if (fr_verifyinfo.success) {
	alert("提交中，請耐心等待");
	//校驗成功則彈出提示
} else {
	_g().getWidgetByName("submit").setEnable(true);
	//校驗失敗則重新啟動按鈕
}

3.6 設定填報後事件

菜單欄點選範本>範本Web屬性>填報頁面設定，選擇為該範本單獨設定，新增填報後事件，如下圖所示：

JavaScript 程式碼如下：

_g().getWidgetByName("submit").setEnable(true);
//重新啟動按鈕

3.7 效果預覽

儲存範本範本，填報預覽效果如 1.1問題描述 中所示。

注：不支援行動端預覽。

點選下載範本：

JS實現防止重複點選提交-範例一.cpt

JS實現防止重複點選提交-範例二.cpt