VisualforceでcommandButtonの二重送信を防ぐ方法

Visualforceページでを使用する際、二重クリックによる二重送信を防ぐ方法について解説します。以下の例では、JavaScriptを使用して、ボタンを最初のクリック後に無効化する実装を行います。

---

ソリューション: JavaScriptを用いたボタンの無効化

以下は、で二重クリックを防ぐためのコード例です。

Visualforceページ

<apex:page>
    <script>
        function disableButton(button) {
            button.disabled = true; // ボタンを無効化
            button.value = 'Processing...'; // ボタンの表示を変更
        }
    </script>

    <apex:form>
        <apex:commandButton 
            value="Submit" 
            action="{!processAction}" 
            onclick="disableButton(this);" 
            rerender="none" />
    </apex:form>
</apex:page>

---

コードの説明

1. JavaScript関数 disableButton

   • disableButton関数は、引数として渡されたボタン要素を無効化します。
   • ボタンのdisabled属性をtrueに設定し、表示メッセージを「Processing...」に変更します。

2. onclickイベント

   • ボタンがクリックされた際に、disableButton(this)を呼び出します。
   • thisは現在クリックされたボタンを指します。

3. rerender="none"

   • 再描画を避けるためにrerender属性をnoneに設定します。
   • 再描画が必要な場合は、適切に調整してください。

---

注意点

• ボタンの動作を確認する際、ブラウザキャッシュの影響を受ける場合があります。その場合はキャッシュをクリアしてください。
• 複数のボタンがある場合、無効化する対象を適切に指定する必要があります。

---

結論

この方法を使用することで、二重クリックによる誤動作やデータの重複送信を防ぐことができます。特に重要な処理を伴うボタンに適用することを推奨します。