web-dev-qa-db-ja.com

クリックされたときにカスタムJavaScriptを呼び出すフォームにボタンを追加する方法

クリックしたときにフォームにボタンを作成したい：

  1. カスタムJavaScriptを呼び出す
  2. フォームを送信しません

これはDrupal 8フォームで可能ですか？

8formsjavascript
4
Mudassar Ali

この例では、カスタムボタンアクションをDrupal 8フォームに追加しました。ボタンをクリックすると、フォームが送信されなくなり、カスタムJavaScriptがいくつかの作業を実行できるようになります。

ここに3つの部分があります：

  1. フォームボタン要素、#attachedライブラリ
  2. カスタムモジュールのライブラリ宣言
  3. ライブラリの.jsファイル

そして、これがサンプルコードです：

in ExampleForm.php

$form['actions']['clear'] = [
  '#type' => 'button',
  '#value' => $this->t('Clear'),
  '#attributes' => [
    'onclick' => 'return false;'
  ],
  '#attached' => array(
    'library' => array(
      'example/foo',
    ),
  ),
];

example.libraries.yml

foo:
  js:
    js/foo.js: {}

js/foo.js

Drupal.behaviors.example_hello = {
  attach: function (context, settings) {

    // Attach a click listener to the clear button.
    var clearBtn = document.getElementById('edit-clear');
    clearBtn.addEventListener('click', function() {

        // Do something!
        console.log('Clear button clicked!');

    }, false);

  }
};

すべてのキャッシュをクリアして、新しいfoo.jsライブラリがDrupal 8。

4
tyler.frankenstein

Button_typeをbuttonに設定します。

$form['js_action'] = array(
  '#type' => 'button', 
  '#value' => t('Click me'), 
);

添付するカスタムJS。

$form['js_action']['#attached'] => array(
  'js' => array(
     drupal_get_path('module', 'ajax_example') . '/ajax_example.js',
);

Ajaxの呼び出しは次のようになります。

$form['js_action']['#ajax'] => array(
  'callback' => 'poll_choice_js',
  'wrapper' => 'poll-choices',
  'method' => 'replace',
  'effect' => 'fade',
),

次のようなメニューコールバックを使用します。

/**
 * Menu callback for AJAX additions. Render the new poll choices.
 */
function poll_choice_js($form, $form_state) {
  return $form['choice_wrapper']['choice'];
}

詳細は [〜＃〜] api [〜＃〜] を確認してください。

4
rémy

Button_typeを 'button'に設定しても、結果のタグの 'type'属性は変更されず、クラスが追加されるだけです。 「ボタン」または「送信」フォーム要素を使用する場合、「送信」以外のタイプのボタンを作成する方法はありません。このようなボタンのデフォルトの動作を妨げるJavaScriptをいつでも添付できますが、お勧めしません。

私の好ましい方法は、汎用のhtml_tag要素を使用して専用ボタンを作成することです。

$element['nosubmit_button'] = [
  '#type' => 'html_tag',
  '#tag' => 'input',
  '#attributes' => [
    'type' => 'button',
    'value' => t("It won't trigger submit"),
    'class' => 'button',
    'name' => 'nosubmit_button',
  ],
  '#attached' => [
    'library' => [
      'mylibrary',
    ],
  ],

Drupal 8では、個々のjsまたはcssファイルではなく、ライブラリを添付する必要があることにも注意してください。

同じ目的を達成する方法は他にもあります。たとえば、「markup」要素タイプを使用して、ボタンの必要なHTMLマークアップを「#markup」プロパティとして指定できます。 #allowed_tagsプロパティにも注意してください。マークアップはフィルタリングされ、デフォルトではどのタグも通過しません（ボタンタグは通過しないなど）。

3
gease