メインコンテンツに移動

メインナビゲーション

  • ホーム
  • サイトマップ
  • ビデオ
  • ご連絡

パンくず

  • ホーム
  • Drupalのフォーム(Form API)の「#states」で各フォーム要素の動作制御が可能

Drupalのフォーム(Form API)の「#states」で各フォーム要素の動作制御が可能

drupal
development
drupal
form

Drupalのフォーム(From API)が各要素の動作制御(JavaScript)が可能です

  • FormAPIで簡単に要素間の動作制御(JavaScriptの拡張)ができます。
  • 例えば、2選択肢の一方が選択された、その選択肢に応じるよう別の要素を表示させたい場合、Javascriptで実現する必要があります。ここで、Drupalのform配列にJavaScriptの拡張を記述する「states」を利用すれば良いです

 

FormAPIでフォーム作成記述に「#states」でjavascriptの拡張を自動的に行います

  • 上記コードは以下のとなります
/**
 * Implement hook_form
 */
function your_custom_form($node, &$form_state) {
  $form['type'] = array(
    '#type' => 'radios',
    '#options' => array(
      'agree' => t('賛成'),
      'disagree' => t('反対'),
    ),
    '#title' => t('投票してください'),
  );
  $form['survey'] = array(
    '#type' => 'fieldtext',
    '#title' => t('反対意見'),
    '#states' => array(
      'visible' => array(
        ':input[name="type"]' => array('value' => 'disagree'),
      ),
    ),
  );
}
  • 実際に、「states」部分の記述はjQueryのセレクターを利用して、参照先の動きをキャッチし、要素の属性を制御します。
  • jQueryのセレクターとその属性のキャッチ方法は以下のようなに行います
  • 「states」の記述で二つの要素(ラジオボタンと入力テキストボックス)の制御ができるようになります。
  • 以下の要素属性が「states」に記述することが可能です:
    • enabled
    • disabled
    • required
    • optional
    • visible
    • invisible
    • checked
    • unchecked
    • expanded
    • collapsed
drupal
development
form

やりたいこと:Drupalのフォーム(FormAPI)でajaxを実装して各フォーム要素を動的に制御したいです

  • 環境:Drupal7.54
  • フォーム(FormAPI)で各要素の表示/非表示などの制御が簡単にできます(Drupalのフォーム(Form API)の「#states」で各フォーム要素の動作制御が可能)。
    • フォームを作成時にJavascriptを意識しなくてよい
    • 事前にフォームの要素を用意して表示/非表示のようなお動作制御
    • データ取得するなどの動作制御はできません
  • ajaxで高等な動作(データ取得など)制御ができるので、FormAPIもこれ基盤を用意して、簡単に実装できます。

FormAPIで「#ajax」の記述(ポイント:callback、wrapper)だけで良いのでJavascriptの意識必要はありません

  • FormAPIがajaxのインターフェースを用意しています。Form記述で「#ajax」要素を追加すれば、Javascriptなどのコーティングはいらないです
    • callbak:ajaxのリクエストが来た時に呼び出される関数
    • wrapper:ajaxのサーバー処理完了後に結果を画面に表示させる場所の指定
  • 簡単の例:テキスト入力フォームを生成して、入力したメッセージを画面のどこかに再表示させるajax処理
    FormAPIのajaxの実装方法
  • ajaxの記述はFormAPIの実装時に追加します。
    /**
     *  Implementation of hook_menu()
     *  新規フォームを表示するページのメニュー設定
     */
    function my_module_name_menu() {
      $items['test/form'] = array(
          'title' => 'Ajaxテスト',
          'page callback' => 'drupal_get_form',
          'page arguments' => array('my_sample_form'),
          'access arguments' => array('access content'),
      );
    }
    
    /**
     * フォームの各要素の記述
     */
    function my_sample_form($form, &$form_state){
      // メッセージ入力フィールド
      $form['message'] = array(
          '#type' => 'textfield',
          '#title' => t('メッセージを入力'),
      );
    
      // 入力されたメッセージをajaxで表示する場所
      $form['msg_wrapper'] = array(
          '#type' => 'markup',
          '#markup' => "",
          '#prefix' => '<div id="msg-wrapper">',
          '#suffix' => '</div>',
      );
    
      // サブミットボタン
      $form['submit'] = array(
          '#type' => 'submit',
          '#value' => '送信',
          '#ajax' => array(
              'callback' => 'test_sample_form_ajax_callback',
              'wrapper' => 'msg-wrapper',
              'effect' => 'fade',
          ),
      );
    
      return $form;
    }
    
    /**
     * ajaxに呼び出される関数
     */
    function test_sample_form_ajax_callback($form, $form_state) {
      // 入力されたメッセージを指定した場所にセット
      $form['msg_wrapper']['#markup'] = '入力されたメッセージ:' .
                  check_plain($form_state['values']['message']) ;
      // 置換する部品を返す
      return $form['msg_wrapper'] ;
    }

     
drupal
development
form

やりたいこと:FormAPIよい定義されたフォームを必要な時にphpコードより呼び出したいです

  • 環境:Drupal7.54
  • FormAPIでフォームを定義すると、通常はhook_menuよりページとして呼び出されます(一般的な使い方)
  • Drupalのモジュールを改造するときに、HTMLタグでフォームを作成するより、FormAPIでフォームを生成するのは楽で、修正にも簡単でできます

関数:drupal_get_formでFormAPIより定義したフォームを簡単に呼び出し、レンダリングすることができます

  • 例:Panelsでページを構成するときに、PanelsPHPを利用してフォームを作成したいです
    drupalの関数(drupal_get_form)の使用
  • カスタムモジュールのどこか(module_load_includeでフォーム定義のファイルをロード)にフォームが定義すれば呼び出すことができます
      module_load_include('inc', 'node', 'node.pages');  // フォームの定義場所指定    
      $form = drupal_get_form('text_module_form');
      print drupal_render( $form );

     

ホーム

古松

検索

Article Category

  • apache(7)
  • css(19)
  • drupal(295)
  • Electron(4)
  • html(34)
  • javascript(27)
  • laravel(4)
  • linux(5)
  • macOS(2)
  • mysql(13)
  • php(19)
  • python(4)
  • SEO(12)
  • video(72)
  • Visual Studio Code(4)
  • windows(13)
  • wordpress(32)