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

drupal
development
drupal
form

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

  • FormAPIで簡単に要素間の動作制御（JavaScriptの拡張）ができます。
  • 例えば、２選択肢の一方が選択された、その選択肢に応じるよう別の要素を表示させたい場合、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 );