クリック後に送信ボタンを無効にする方法は?


13

Drupalは、ノードページ上であっても、複数のフォーム送信を妨げないようです。このQAでは、サーバー側で修正することをお勧めします。

クリック後に送信ボタンを無効にするにはどうすればよいですか?

他のソリューションはありますか?


DrupalのフォームAPIは、フォームトークンの値チェックのおかげで二重送信を防ぎませんか?同じトークンを使用してフォームを2回送信することはできませんか?
ジョナサンエルモア

回答:


12

これはdevにしかありませんが、Hide Submitモジュールがトリックを行います。機能の1つは次のとおりです。

クリックした後、送信ボタンを非表示(または無効)にします

開発サイトにインストールしたばかりで、ノード追加フォームでうまく機能しているようです。送信ボタンをクリックすると、非表示になり、フォームが最終的に送信される前に、読み込み中の画像と「お待ちください...」メッセージに置き換えられます。ただし、他の形式では試していません。


独自のカスタムモジュールのフォームで非表示サブミットモジュールを機能させる方法についてのアイデアはありますか?サイト全体に広がることを望んでいましたが、そうではないようです。
user785179

@ user785179は、実装方法を確認します。hook_form_alter()使用しhook_form_FORMID_alter()ている場合は、genericに切り替えhook_form_alter()ます。ifが一般的な場合は、これにhook_form_alter()いくつかを追加orしますif
モウォ

このソリューションには注意してください-hide submitモジュールは、ajaxのアップロードを中断し、オートコンプリートの問題を引き起こします。また、場合によっては、最初のクリックでsubmitボタンがまったく何もしません。サイトからアンインストールするだけでした。
ジェンランプトン

@Jen Strange、私は何十年もそのような問題を見ることなく何十ものサイトで使ってきました。おそらく、あなたは別のモジュールがインストールされていること、それを妨げる
クライヴ

10

Drupal 7のソリューションを次に示します。コードはHide Submitモジュールの簡易バージョンです。

このコードは、「さらに追加」ボタンやAJAXフォームでも正常に機能します。

Drupal.behaviors.hideSubmitButton = {
  attach: function(context) {
    $('form.node-form', context).once('hideSubmitButton', function () {
      var $form = $(this);
      $form.find('input.form-submit').click(function (e) {
        var el = $(this);
        el.after('<input type="hidden" name="' + el.attr('name') + '" value="' + el.attr('value') + '" />');
        return true;
      });
      $form.submit(function (e) {
        if (!e.isPropagationStopped()) {
          $('input.form-submit', $(this)).attr('disabled', 'disabled');
          return true;
        }  
      });
    });
  }
};

これを管理テーマに実装したいと思います。ファイルsitename.jsを作成し、上記のコードをコピーしました。動作していません。物事を調整する必要がありますか?
Justme

@ Justme、sitename.jsファイルをどこに置きましたか?モジュールまたはサブテーマの場合は、.infoファイルに追加してロードするか、他の場所でdrupal_add_js()を呼び出してページで取得する必要があります。ページソースに追加されているのがわかりますか?
ジェンランプトン

Thxsが解決しました。これが次の間にあることを知りませんでした:(function($){and})(jQuery); jsファイル内。シャルムのように動作します!!
Justme

0

最も簡単な方法は、テーマベースのJavaScriptソリューションを実行して、フォーム送信後にボタンを無効にすることです。theme.infoファイルに、javascriptファイルを入れて、テーマAPIでロードできるようにします。

scripts[] = js/themename-script.js

次に、themename-script.jsでDrupal.behaviors.themenameセクションに追加して、次のようにします。

Drupal.behaviors.themename = function()
{
  $('.node-form').submit(function(){
    $('#edit-submit').attr("disabled", "disabled");
    $('#edit-preview').attr("disabled", "disabled");
  });
}

したがって、フローは次のとおりです。

  1. テーマはjavascriptをロードします
  2. Drupal.behaviors.themenameはページのロード時に起動されます
  3. ノード追加フォーム(上記の例に基づいたクラス、フォームのタイプに応じてカスタマイズ可能)のフォーム送信では、送信ボタン(送信およびプレビュー)を無効にして、再度クリックできないようにします。

上記が危険である可能性のあるajax処理があり、form_api検証でエラーが検出された場合、フォーム送信が二度と行われない可能性があるため、これをテストし、ニーズに合わせてカスタマイズしてください。送信ボタンが無効になっているときにプレビューボタンをクリックすることができるため、両方のボタンを無効にしました。明らかにあなたのマイレージは異なります。


2
古いDrupal.behaviors宣言スタイルを使用しています。Drupal 7では機能しませんDrupal.behaviors.themename = { attach: function (context, settings) { // ...。詳細については、Drupal 7でのJavaScriptの管理を参照してください
Clive

宣言スタイルの修正
ユージンフィデリン

このスクリプト「node-form」からどの値を置き換える必要がありますか?
pal4life

これを管理テーマで機能させようとしましたが、運はありませんでした。テーマ名をadminimalに変更し、sitename.jsの完全なコードをコピーして、これをテーマ情報ファイルに追加しました。それでも、同じフォームのより多くのサブミットを簡単に取得できます。
Justme
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.