web-dev-qa-db-ja.com

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

Drupalは、ノードページであっても、複数のフォームの送信を妨げないようです。これは [〜＃〜] qa [〜＃〜] がサーバー側で修正することを提案しています。

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

他の解決策はありますか？

7forms
13
uwe

これはdevにのみ存在しますが、 Hide Submit モジュールが役立ちます。機能の1つは次のとおりです。

送信ボタンがクリックされた後、非表示にする（または無効にする）

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

12
Clive

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;
        }  
      });
    });
  }
};
10
Eugene Fidelin

最も簡単な方法は、フォームの送信後にボタンを無効にするテーマベースの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検証でエラーがキャッチされた場合、フォーム送信は二度と実行できないと確信しているので、これをテストし、必要に応じてカスタマイズしてください。送信ボタンが無効になっている間もプレビューボタンをクリックできるため、両方のボタンを無効にしました。明らかにあなたの走行距離は私によって異なります。

0
Mayday