ボタンのダブルクリック防止

フォームのサブミットボタンの中に、例えば決済ボタンなどは2度押しすると不具合が生じる場合があります。

hide_submitモジュールは、ボタンの2度押しの禁止に役立ちます。同時にビジュアルな砂時計的なものを代用表示できますので、サブミット時にかかる時間を多少ごまかせるかもしれません。

↓の例は、デフォルトで用意されている画像をランダムに表示しています。

hide_submitモジュールでボタンのダブルクリックを防止する前に

下記手順を実行する前に、高機能エディタ(FCKeditor)のEdit FCKeditor profileページのVisibility Setting:Fields to exclude欄に以下の3つのCSSクラスを追加し、下記3項目に対してFCKeditorを無効にします。

 

  • edit-hide-submit-js-load-pages
  • edit-hide-submit-form-exclusion
  • edit-hide-submit-attribute-filter

この3つを追加しないと、下記設定時、HTMLタグが入ってはいけないところにpタグ等が入ってしまうのでhode_submitモジュールが誤動作します。

 

hide_submitモジュールでボタンのダブルクリックを防止するには

 

 

  1. 管理セクション≫サイトの構築≫モジュールでhide_submitモジュールを有効にします。
  2. 管理セクション≫サイトの環境設定≫Hide Submitで以下各種設定を行います。
    1)Script Settings

    Script mode:動作モード、Javascript load options:有効範囲を指定します。ここでは全てのページでボタンを隠すと共にメッセージを表示するように設定しました。
  3. メッセージを設定します。
  4. 画像を指定します。

    ここでは、デフォルトで用意されている画像をランダムに表示するように設定しました。オリジナル画像(アニメーションをアップロードすることもできます)