メインコンテンツに移動

メインナビゲーション

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

パンくず

  • ホーム
  • DrupalのFormAPIでマルチステップフォーム作成の基本

DrupalのFormAPIでマルチステップフォーム作成の基本

drupal
development
form

やりたいこと:一つのURLで複数のステップフォームを作成したいです

  • 背景:Drupal7.54、FormAPIでマルチステップフォームの作成
  • FormAPIで簡単にフォームを作成します(例:Drupalの関数(drupal_get_form)を利用してFormAPIで作成したフォームを任意の場所でPHPに呼び出されることができます )
  • 一つのURLで複数のステップフォームを作成する要望があります

FormAPIでマルチステップフォーム作成の要点:「$form_state」でステップの定義、「form_submit()」関数内でステップの判別とフォームの再構築

  • FormAPIでマルチステップフォームを作成時に二つの要点ああります
  • 「$form_state」オブジェクトに任意のステップ識別変数を追加します(例:$form_state['pager'])
    • もちろん、$form_state['storage']の利用も可能です
    • 各ステップのフォームで識別文字列を定義します(例:$form_state['pager']='page_1')
  • 各ステップフォームの送信/次へボタンが押されたら、イベントをキャッチするform_submit()関数内でステップの判別、フォームの再構築を行います
    • ステップの判別: if($form_state['pager']=='page_1')
    • 次のステップのフォーム定義: $form_state['pager']=='page_2'
    • フォームの再構築: $form_state['rebuild']==TRUE
      DrupalのFormAPIでマルチステップフォームの要点
    • マルチステップのサンプルプログラム(送信ボタンを押すとステップ1とステップ2を交替で表示する)
      /**
       *  メニューでURLの定義
       */
      function your_module_menu() {
        $items['form/multiple-step'] = array(
            'title' => t('Multiple Step Form Test'),
            'page callback' => 'drupal_get_form',
            'page arguments' => array('multiple_step_form'),
            'access arguments' => array('access content'),
        );
        return $items;
      }
      
      /**
       *  マルチステップフォームの定義
       */
      function multiple_step_form($form, &$form_state){
      	switch( $form_state['pager'] ) {
              case  'page_1'  :
              return page_one_form();
              break;
      
              case  'page_2'  :
              return page_two_form();
              break;
      	}
      }
      
      /**
       *  ステップ1 フォームの定義
       */
      function page_one_form( $form, &$form_state ){
       // ステップの定義
        $form_state['pager'] = "page_1";
       // 任一のメッセージ表示
        $form['message_field'] = array(
            '#type' => 'markup',
            '#markup' => 'Form Step 1',
        );
        // サブミットボタン
        $form['submit'] = array(
            '#type' => 'submit',
            '#value' => '送信',
        );
       // サブミットボタンのイベントハンドラー
        $form['#submit'][] = 'page_one_form_submit';
      
        return $form;}
      }
      
      /**
       *  ステップ2 フォームの定義
       */
      function page_two_form( $form, &$form_state ){
        // ステップの定義
       $form_state['pager'] = "page_two";
       // 任一のメッセージ表示
        $form['test_form']=array(
            '#type' => 'item',
            '#title' => 'Multiple Step Form',
            '#markup' => '<p>Step 2</p>',
        );
       // サブミットボタン
        $form['submit'] = array(
            '#type' => 'submit',
            '#value' => '送信',
        );
       // サブミットボタンのイベントハンドラー
        $form['#submit'][] = 'page_two_form_submit';
        return $form;
      }
      
      /**
       *  ステップ1のボタンイベントハンドラー
       */
      function page_one_form_submit($form, &$form_state){
        $form_state['pager']['card_page']= "page_two";
        $form_state['rebuild'] = true;
        return ;
      }
      
      /**
       *  ステップ2のボタンイベントハンドラー
       */
      function page_two_form_submit($form, &$form_state){
        $form_state['pager']['card_page']= "page_one";
        $form_state['rebuild'] = true;
        return ;
      }

       
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 );

     

drupal
development
form
ajax

やりたいこと:DrupalのAJAXでマルチステップフォームを作成したいです

  • 背景:Drupal7.54、FormAPIのAJAXを利用して、マルチステップフォームの作成
  • FormAPIでマルチステップフォームの作成ができます(DrupalのFormAPIでマルチステップフォーム作成の基本 )
  • マルチステップフォームの作成には、AJAXの方が有利です
    • フォームHTMLの部分を置換すればよいので、全体的なページの更新必要はありません(パフォーマンスが良い)
    • AJAXがサーバーサイトとの交信URLが隠されています
    • DrupalのAJAXフレームワークを直接の利用で、簡単に実現できます(各ステップのフォームを直接に指定することができ、考え方が明確的)

DrupalのAJAXのdrupal_command_replace関数でフォームを置換してマルチステップフォームを作成します

  • DrupalのAJAXの利用は:Drupalのフォーム(FromAPI)でのajaxの実装 を参考してください
  • 各ステップのフォームがAJAXのコールバック関数内で定義しますので、FormAPIの実装方法より明確的になります
    DrupalのAJAXでマルチステップフォームの作成
  • AJAXで実装したマルチステップフォーム(ステップ1とステップ2の交替表示)例
    /**
     *  メニューでURLの定義
     */
    function your_module_menu() {
      $items['form/multiple-step'] = array(
          'title' => t('Multiple Step Form Test'),
          'page callback' => 'drupal_get_form',
          'page arguments' => array('page_one_form'),
          'access arguments' => array('access content'),
      );
      return $items;
    }
    
    /**
     *  ステップ1 フォームの定義
     */
    function page_one_form( $form, &$form_state ){
    
      $form['message_field'] = array(
          '#type' => 'markup',
          '#markup' => 'Form Step 1',
      );
      // サブミットボタン
      $form['submit'] = array(
          '#type' => 'submit',
          '#value' => '送信',
    	  '#ajax' => array(
            'callback' => 'card_1_ajax_callback',
          ),
      );
    
      return $form;}
    }
    
    /**
     *  ステップ2 フォームの定義
     */
    function page_two_form( $form, &$form_state ){
    
      $form['test_form']=array(
          '#type' => 'item',
          '#title' => 'Multiple Step Form',
          '#markup' => '<p>Step 2</p>',
      );
      $form['submit'] = array(
          '#type' => 'submit',
          '#value' => '送信',
    	  '#ajax' => array(
            'callback' => 'card_2_ajax_callback',
          ),
      );
    
      return $form;
    }
    
    /**
     *  ステップ1のコールバック関数
     */
    function card_1_ajax_callback($form, &$form_state){
     // 次のステップのフォームの用意
      $form =  drupal_rebuild_form( 'card_two_form', $form_state );
     // フォームのHTML部分の置換コマンド用意
      $commands[]=ajax_command_replace( '#block-system-main',
    		'<section class="block block-system clearfix" 
    				 id="block-system-main">'.render($form).'</section>' );
    
      return array('#type' => 'ajax', '#commands' => $commands);
    }
    
    /**
     *  ステップ2のコールバック関数
     */
    function card_2_ajax_callback($form, &$form_state){
     // 次のステップのフォームの用意
      $form =  drupal_rebuild_form( 'card_one_form', $form_state );
     // フォームのHTML部分の置換コマンド用意
      $commands[]=ajax_command_replace( '#block-system-main','<section class="block block-system clearfix" id="block-system-main">'.render($form).'</section>' );
    
      return array('#type' => 'ajax', '#commands' => $commands);
    }
    

     

drupal
development
form

やりたいこと:一つのURLで複数のステップフォームを作成したいです

  • 背景:Drupal7.54、FormAPIでマルチステップフォームの作成
  • FormAPIで簡単にフォームを作成します(例:Drupalの関数(drupal_get_form)を利用してFormAPIで作成したフォームを任意の場所でPHPに呼び出されることができます )
  • 一つのURLで複数のステップフォームを作成する要望があります

FormAPIでマルチステップフォーム作成の要点:「$form_state」でステップの定義、「form_submit()」関数内でステップの判別とフォームの再構築

  • FormAPIでマルチステップフォームを作成時に二つの要点ああります
  • 「$form_state」オブジェクトに任意のステップ識別変数を追加します(例:$form_state['pager'])
    • もちろん、$form_state['storage']の利用も可能です
    • 各ステップのフォームで識別文字列を定義します(例:$form_state['pager']='page_1')
  • 各ステップフォームの送信/次へボタンが押されたら、イベントをキャッチするform_submit()関数内でステップの判別、フォームの再構築を行います
    • ステップの判別: if($form_state['pager']=='page_1')
    • 次のステップのフォーム定義: $form_state['pager']=='page_2'
    • フォームの再構築: $form_state['rebuild']==TRUE
      DrupalのFormAPIでマルチステップフォームの要点
    • マルチステップのサンプルプログラム(送信ボタンを押すとステップ1とステップ2を交替で表示する)
      /**
       *  メニューでURLの定義
       */
      function your_module_menu() {
        $items['form/multiple-step'] = array(
            'title' => t('Multiple Step Form Test'),
            'page callback' => 'drupal_get_form',
            'page arguments' => array('multiple_step_form'),
            'access arguments' => array('access content'),
        );
        return $items;
      }
      
      /**
       *  マルチステップフォームの定義
       */
      function multiple_step_form($form, &$form_state){
      	switch( $form_state['pager'] ) {
              case  'page_1'  :
              return page_one_form();
              break;
      
              case  'page_2'  :
              return page_two_form();
              break;
      	}
      }
      
      /**
       *  ステップ1 フォームの定義
       */
      function page_one_form( $form, &$form_state ){
       // ステップの定義
        $form_state['pager'] = "page_1";
       // 任一のメッセージ表示
        $form['message_field'] = array(
            '#type' => 'markup',
            '#markup' => 'Form Step 1',
        );
        // サブミットボタン
        $form['submit'] = array(
            '#type' => 'submit',
            '#value' => '送信',
        );
       // サブミットボタンのイベントハンドラー
        $form['#submit'][] = 'page_one_form_submit';
      
        return $form;}
      }
      
      /**
       *  ステップ2 フォームの定義
       */
      function page_two_form( $form, &$form_state ){
        // ステップの定義
       $form_state['pager'] = "page_two";
       // 任一のメッセージ表示
        $form['test_form']=array(
            '#type' => 'item',
            '#title' => 'Multiple Step Form',
            '#markup' => '<p>Step 2</p>',
        );
       // サブミットボタン
        $form['submit'] = array(
            '#type' => 'submit',
            '#value' => '送信',
        );
       // サブミットボタンのイベントハンドラー
        $form['#submit'][] = 'page_two_form_submit';
        return $form;
      }
      
      /**
       *  ステップ1のボタンイベントハンドラー
       */
      function page_one_form_submit($form, &$form_state){
        $form_state['pager']['card_page']= "page_two";
        $form_state['rebuild'] = true;
        return ;
      }
      
      /**
       *  ステップ2のボタンイベントハンドラー
       */
      function page_two_form_submit($form, &$form_state){
        $form_state['pager']['card_page']= "page_one";
        $form_state['rebuild'] = true;
        return ;
      }

       
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 );

     

drupal
development
form
ajax

やりたいこと:DrupalのAJAXでマルチステップフォームを作成したいです

  • 背景:Drupal7.54、FormAPIのAJAXを利用して、マルチステップフォームの作成
  • FormAPIでマルチステップフォームの作成ができます(DrupalのFormAPIでマルチステップフォーム作成の基本 )
  • マルチステップフォームの作成には、AJAXの方が有利です
    • フォームHTMLの部分を置換すればよいので、全体的なページの更新必要はありません(パフォーマンスが良い)
    • AJAXがサーバーサイトとの交信URLが隠されています
    • DrupalのAJAXフレームワークを直接の利用で、簡単に実現できます(各ステップのフォームを直接に指定することができ、考え方が明確的)

DrupalのAJAXのdrupal_command_replace関数でフォームを置換してマルチステップフォームを作成します

  • DrupalのAJAXの利用は:Drupalのフォーム(FromAPI)でのajaxの実装 を参考してください
  • 各ステップのフォームがAJAXのコールバック関数内で定義しますので、FormAPIの実装方法より明確的になります
    DrupalのAJAXでマルチステップフォームの作成
  • AJAXで実装したマルチステップフォーム(ステップ1とステップ2の交替表示)例
    /**
     *  メニューでURLの定義
     */
    function your_module_menu() {
      $items['form/multiple-step'] = array(
          'title' => t('Multiple Step Form Test'),
          'page callback' => 'drupal_get_form',
          'page arguments' => array('page_one_form'),
          'access arguments' => array('access content'),
      );
      return $items;
    }
    
    /**
     *  ステップ1 フォームの定義
     */
    function page_one_form( $form, &$form_state ){
    
      $form['message_field'] = array(
          '#type' => 'markup',
          '#markup' => 'Form Step 1',
      );
      // サブミットボタン
      $form['submit'] = array(
          '#type' => 'submit',
          '#value' => '送信',
    	  '#ajax' => array(
            'callback' => 'card_1_ajax_callback',
          ),
      );
    
      return $form;}
    }
    
    /**
     *  ステップ2 フォームの定義
     */
    function page_two_form( $form, &$form_state ){
    
      $form['test_form']=array(
          '#type' => 'item',
          '#title' => 'Multiple Step Form',
          '#markup' => '<p>Step 2</p>',
      );
      $form['submit'] = array(
          '#type' => 'submit',
          '#value' => '送信',
    	  '#ajax' => array(
            'callback' => 'card_2_ajax_callback',
          ),
      );
    
      return $form;
    }
    
    /**
     *  ステップ1のコールバック関数
     */
    function card_1_ajax_callback($form, &$form_state){
     // 次のステップのフォームの用意
      $form =  drupal_rebuild_form( 'card_two_form', $form_state );
     // フォームのHTML部分の置換コマンド用意
      $commands[]=ajax_command_replace( '#block-system-main',
    		'<section class="block block-system clearfix" 
    				 id="block-system-main">'.render($form).'</section>' );
    
      return array('#type' => 'ajax', '#commands' => $commands);
    }
    
    /**
     *  ステップ2のコールバック関数
     */
    function card_2_ajax_callback($form, &$form_state){
     // 次のステップのフォームの用意
      $form =  drupal_rebuild_form( 'card_one_form', $form_state );
     // フォームのHTML部分の置換コマンド用意
      $commands[]=ajax_command_replace( '#block-system-main','<section class="block block-system clearfix" id="block-system-main">'.render($form).'</section>' );
    
      return array('#type' => 'ajax', '#commands' => $commands);
    }
    

     

drupal
development
form

やりたいこと:一つのURLで複数のステップフォームを作成したいです

  • 背景:Drupal7.54、FormAPIでマルチステップフォームの作成
  • FormAPIで簡単にフォームを作成します(例:Drupalの関数(drupal_get_form)を利用してFormAPIで作成したフォームを任意の場所でPHPに呼び出されることができます )
  • 一つのURLで複数のステップフォームを作成する要望があります

FormAPIでマルチステップフォーム作成の要点:「$form_state」でステップの定義、「form_submit()」関数内でステップの判別とフォームの再構築

  • FormAPIでマルチステップフォームを作成時に二つの要点ああります
  • 「$form_state」オブジェクトに任意のステップ識別変数を追加します(例:$form_state['pager'])
    • もちろん、$form_state['storage']の利用も可能です
    • 各ステップのフォームで識別文字列を定義します(例:$form_state['pager']='page_1')
  • 各ステップフォームの送信/次へボタンが押されたら、イベントをキャッチするform_submit()関数内でステップの判別、フォームの再構築を行います
    • ステップの判別: if($form_state['pager']=='page_1')
    • 次のステップのフォーム定義: $form_state['pager']=='page_2'
    • フォームの再構築: $form_state['rebuild']==TRUE
      DrupalのFormAPIでマルチステップフォームの要点
    • マルチステップのサンプルプログラム(送信ボタンを押すとステップ1とステップ2を交替で表示する)
      /**
       *  メニューでURLの定義
       */
      function your_module_menu() {
        $items['form/multiple-step'] = array(
            'title' => t('Multiple Step Form Test'),
            'page callback' => 'drupal_get_form',
            'page arguments' => array('multiple_step_form'),
            'access arguments' => array('access content'),
        );
        return $items;
      }
      
      /**
       *  マルチステップフォームの定義
       */
      function multiple_step_form($form, &$form_state){
      	switch( $form_state['pager'] ) {
              case  'page_1'  :
              return page_one_form();
              break;
      
              case  'page_2'  :
              return page_two_form();
              break;
      	}
      }
      
      /**
       *  ステップ1 フォームの定義
       */
      function page_one_form( $form, &$form_state ){
       // ステップの定義
        $form_state['pager'] = "page_1";
       // 任一のメッセージ表示
        $form['message_field'] = array(
            '#type' => 'markup',
            '#markup' => 'Form Step 1',
        );
        // サブミットボタン
        $form['submit'] = array(
            '#type' => 'submit',
            '#value' => '送信',
        );
       // サブミットボタンのイベントハンドラー
        $form['#submit'][] = 'page_one_form_submit';
      
        return $form;}
      }
      
      /**
       *  ステップ2 フォームの定義
       */
      function page_two_form( $form, &$form_state ){
        // ステップの定義
       $form_state['pager'] = "page_two";
       // 任一のメッセージ表示
        $form['test_form']=array(
            '#type' => 'item',
            '#title' => 'Multiple Step Form',
            '#markup' => '<p>Step 2</p>',
        );
       // サブミットボタン
        $form['submit'] = array(
            '#type' => 'submit',
            '#value' => '送信',
        );
       // サブミットボタンのイベントハンドラー
        $form['#submit'][] = 'page_two_form_submit';
        return $form;
      }
      
      /**
       *  ステップ1のボタンイベントハンドラー
       */
      function page_one_form_submit($form, &$form_state){
        $form_state['pager']['card_page']= "page_two";
        $form_state['rebuild'] = true;
        return ;
      }
      
      /**
       *  ステップ2のボタンイベントハンドラー
       */
      function page_two_form_submit($form, &$form_state){
        $form_state['pager']['card_page']= "page_one";
        $form_state['rebuild'] = true;
        return ;
      }

       
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 );

     

drupal
development
form
ajax

やりたいこと:DrupalのAJAXでマルチステップフォームを作成したいです

  • 背景:Drupal7.54、FormAPIのAJAXを利用して、マルチステップフォームの作成
  • FormAPIでマルチステップフォームの作成ができます(DrupalのFormAPIでマルチステップフォーム作成の基本 )
  • マルチステップフォームの作成には、AJAXの方が有利です
    • フォームHTMLの部分を置換すればよいので、全体的なページの更新必要はありません(パフォーマンスが良い)
    • AJAXがサーバーサイトとの交信URLが隠されています
    • DrupalのAJAXフレームワークを直接の利用で、簡単に実現できます(各ステップのフォームを直接に指定することができ、考え方が明確的)

DrupalのAJAXのdrupal_command_replace関数でフォームを置換してマルチステップフォームを作成します

  • DrupalのAJAXの利用は:Drupalのフォーム(FromAPI)でのajaxの実装 を参考してください
  • 各ステップのフォームがAJAXのコールバック関数内で定義しますので、FormAPIの実装方法より明確的になります
    DrupalのAJAXでマルチステップフォームの作成
  • AJAXで実装したマルチステップフォーム(ステップ1とステップ2の交替表示)例
    /**
     *  メニューでURLの定義
     */
    function your_module_menu() {
      $items['form/multiple-step'] = array(
          'title' => t('Multiple Step Form Test'),
          'page callback' => 'drupal_get_form',
          'page arguments' => array('page_one_form'),
          'access arguments' => array('access content'),
      );
      return $items;
    }
    
    /**
     *  ステップ1 フォームの定義
     */
    function page_one_form( $form, &$form_state ){
    
      $form['message_field'] = array(
          '#type' => 'markup',
          '#markup' => 'Form Step 1',
      );
      // サブミットボタン
      $form['submit'] = array(
          '#type' => 'submit',
          '#value' => '送信',
    	  '#ajax' => array(
            'callback' => 'card_1_ajax_callback',
          ),
      );
    
      return $form;}
    }
    
    /**
     *  ステップ2 フォームの定義
     */
    function page_two_form( $form, &$form_state ){
    
      $form['test_form']=array(
          '#type' => 'item',
          '#title' => 'Multiple Step Form',
          '#markup' => '<p>Step 2</p>',
      );
      $form['submit'] = array(
          '#type' => 'submit',
          '#value' => '送信',
    	  '#ajax' => array(
            'callback' => 'card_2_ajax_callback',
          ),
      );
    
      return $form;
    }
    
    /**
     *  ステップ1のコールバック関数
     */
    function card_1_ajax_callback($form, &$form_state){
     // 次のステップのフォームの用意
      $form =  drupal_rebuild_form( 'card_two_form', $form_state );
     // フォームのHTML部分の置換コマンド用意
      $commands[]=ajax_command_replace( '#block-system-main',
    		'<section class="block block-system clearfix" 
    				 id="block-system-main">'.render($form).'</section>' );
    
      return array('#type' => 'ajax', '#commands' => $commands);
    }
    
    /**
     *  ステップ2のコールバック関数
     */
    function card_2_ajax_callback($form, &$form_state){
     // 次のステップのフォームの用意
      $form =  drupal_rebuild_form( 'card_one_form', $form_state );
     // フォームのHTML部分の置換コマンド用意
      $commands[]=ajax_command_replace( '#block-system-main','<section class="block block-system clearfix" id="block-system-main">'.render($form).'</section>' );
    
      return array('#type' => 'ajax', '#commands' => $commands);
    }
    

     

drupal
development
form

やりたいこと:一つのURLで複数のステップフォームを作成したいです

  • 背景:Drupal7.54、FormAPIでマルチステップフォームの作成
  • FormAPIで簡単にフォームを作成します(例:Drupalの関数(drupal_get_form)を利用してFormAPIで作成したフォームを任意の場所でPHPに呼び出されることができます )
  • 一つのURLで複数のステップフォームを作成する要望があります

FormAPIでマルチステップフォーム作成の要点:「$form_state」でステップの定義、「form_submit()」関数内でステップの判別とフォームの再構築

  • FormAPIでマルチステップフォームを作成時に二つの要点ああります
  • 「$form_state」オブジェクトに任意のステップ識別変数を追加します(例:$form_state['pager'])
    • もちろん、$form_state['storage']の利用も可能です
    • 各ステップのフォームで識別文字列を定義します(例:$form_state['pager']='page_1')
  • 各ステップフォームの送信/次へボタンが押されたら、イベントをキャッチするform_submit()関数内でステップの判別、フォームの再構築を行います
    • ステップの判別: if($form_state['pager']=='page_1')
    • 次のステップのフォーム定義: $form_state['pager']=='page_2'
    • フォームの再構築: $form_state['rebuild']==TRUE
      DrupalのFormAPIでマルチステップフォームの要点
    • マルチステップのサンプルプログラム(送信ボタンを押すとステップ1とステップ2を交替で表示する)
      /**
       *  メニューでURLの定義
       */
      function your_module_menu() {
        $items['form/multiple-step'] = array(
            'title' => t('Multiple Step Form Test'),
            'page callback' => 'drupal_get_form',
            'page arguments' => array('multiple_step_form'),
            'access arguments' => array('access content'),
        );
        return $items;
      }
      
      /**
       *  マルチステップフォームの定義
       */
      function multiple_step_form($form, &$form_state){
      	switch( $form_state['pager'] ) {
              case  'page_1'  :
              return page_one_form();
              break;
      
              case  'page_2'  :
              return page_two_form();
              break;
      	}
      }
      
      /**
       *  ステップ1 フォームの定義
       */
      function page_one_form( $form, &$form_state ){
       // ステップの定義
        $form_state['pager'] = "page_1";
       // 任一のメッセージ表示
        $form['message_field'] = array(
            '#type' => 'markup',
            '#markup' => 'Form Step 1',
        );
        // サブミットボタン
        $form['submit'] = array(
            '#type' => 'submit',
            '#value' => '送信',
        );
       // サブミットボタンのイベントハンドラー
        $form['#submit'][] = 'page_one_form_submit';
      
        return $form;}
      }
      
      /**
       *  ステップ2 フォームの定義
       */
      function page_two_form( $form, &$form_state ){
        // ステップの定義
       $form_state['pager'] = "page_two";
       // 任一のメッセージ表示
        $form['test_form']=array(
            '#type' => 'item',
            '#title' => 'Multiple Step Form',
            '#markup' => '<p>Step 2</p>',
        );
       // サブミットボタン
        $form['submit'] = array(
            '#type' => 'submit',
            '#value' => '送信',
        );
       // サブミットボタンのイベントハンドラー
        $form['#submit'][] = 'page_two_form_submit';
        return $form;
      }
      
      /**
       *  ステップ1のボタンイベントハンドラー
       */
      function page_one_form_submit($form, &$form_state){
        $form_state['pager']['card_page']= "page_two";
        $form_state['rebuild'] = true;
        return ;
      }
      
      /**
       *  ステップ2のボタンイベントハンドラー
       */
      function page_two_form_submit($form, &$form_state){
        $form_state['pager']['card_page']= "page_one";
        $form_state['rebuild'] = true;
        return ;
      }

       
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 );

     

drupal
development
form
ajax

やりたいこと:DrupalのAJAXでマルチステップフォームを作成したいです

  • 背景:Drupal7.54、FormAPIのAJAXを利用して、マルチステップフォームの作成
  • FormAPIでマルチステップフォームの作成ができます(DrupalのFormAPIでマルチステップフォーム作成の基本 )
  • マルチステップフォームの作成には、AJAXの方が有利です
    • フォームHTMLの部分を置換すればよいので、全体的なページの更新必要はありません(パフォーマンスが良い)
    • AJAXがサーバーサイトとの交信URLが隠されています
    • DrupalのAJAXフレームワークを直接の利用で、簡単に実現できます(各ステップのフォームを直接に指定することができ、考え方が明確的)

DrupalのAJAXのdrupal_command_replace関数でフォームを置換してマルチステップフォームを作成します

  • DrupalのAJAXの利用は:Drupalのフォーム(FromAPI)でのajaxの実装 を参考してください
  • 各ステップのフォームがAJAXのコールバック関数内で定義しますので、FormAPIの実装方法より明確的になります
    DrupalのAJAXでマルチステップフォームの作成
  • AJAXで実装したマルチステップフォーム(ステップ1とステップ2の交替表示)例
    /**
     *  メニューでURLの定義
     */
    function your_module_menu() {
      $items['form/multiple-step'] = array(
          'title' => t('Multiple Step Form Test'),
          'page callback' => 'drupal_get_form',
          'page arguments' => array('page_one_form'),
          'access arguments' => array('access content'),
      );
      return $items;
    }
    
    /**
     *  ステップ1 フォームの定義
     */
    function page_one_form( $form, &$form_state ){
    
      $form['message_field'] = array(
          '#type' => 'markup',
          '#markup' => 'Form Step 1',
      );
      // サブミットボタン
      $form['submit'] = array(
          '#type' => 'submit',
          '#value' => '送信',
    	  '#ajax' => array(
            'callback' => 'card_1_ajax_callback',
          ),
      );
    
      return $form;}
    }
    
    /**
     *  ステップ2 フォームの定義
     */
    function page_two_form( $form, &$form_state ){
    
      $form['test_form']=array(
          '#type' => 'item',
          '#title' => 'Multiple Step Form',
          '#markup' => '<p>Step 2</p>',
      );
      $form['submit'] = array(
          '#type' => 'submit',
          '#value' => '送信',
    	  '#ajax' => array(
            'callback' => 'card_2_ajax_callback',
          ),
      );
    
      return $form;
    }
    
    /**
     *  ステップ1のコールバック関数
     */
    function card_1_ajax_callback($form, &$form_state){
     // 次のステップのフォームの用意
      $form =  drupal_rebuild_form( 'card_two_form', $form_state );
     // フォームのHTML部分の置換コマンド用意
      $commands[]=ajax_command_replace( '#block-system-main',
    		'<section class="block block-system clearfix" 
    				 id="block-system-main">'.render($form).'</section>' );
    
      return array('#type' => 'ajax', '#commands' => $commands);
    }
    
    /**
     *  ステップ2のコールバック関数
     */
    function card_2_ajax_callback($form, &$form_state){
     // 次のステップのフォームの用意
      $form =  drupal_rebuild_form( 'card_one_form', $form_state );
     // フォームのHTML部分の置換コマンド用意
      $commands[]=ajax_command_replace( '#block-system-main','<section class="block block-system clearfix" id="block-system-main">'.render($form).'</section>' );
    
      return array('#type' => 'ajax', '#commands' => $commands);
    }
    

     

drupal
development
form

やりたいこと:一つのURLで複数のステップフォームを作成したいです

  • 背景:Drupal7.54、FormAPIでマルチステップフォームの作成
  • FormAPIで簡単にフォームを作成します(例:Drupalの関数(drupal_get_form)を利用してFormAPIで作成したフォームを任意の場所でPHPに呼び出されることができます )
  • 一つのURLで複数のステップフォームを作成する要望があります

FormAPIでマルチステップフォーム作成の要点:「$form_state」でステップの定義、「form_submit()」関数内でステップの判別とフォームの再構築

  • FormAPIでマルチステップフォームを作成時に二つの要点ああります
  • 「$form_state」オブジェクトに任意のステップ識別変数を追加します(例:$form_state['pager'])
    • もちろん、$form_state['storage']の利用も可能です
    • 各ステップのフォームで識別文字列を定義します(例:$form_state['pager']='page_1')
  • 各ステップフォームの送信/次へボタンが押されたら、イベントをキャッチするform_submit()関数内でステップの判別、フォームの再構築を行います
    • ステップの判別: if($form_state['pager']=='page_1')
    • 次のステップのフォーム定義: $form_state['pager']=='page_2'
    • フォームの再構築: $form_state['rebuild']==TRUE
      DrupalのFormAPIでマルチステップフォームの要点
    • マルチステップのサンプルプログラム(送信ボタンを押すとステップ1とステップ2を交替で表示する)
      /**
       *  メニューでURLの定義
       */
      function your_module_menu() {
        $items['form/multiple-step'] = array(
            'title' => t('Multiple Step Form Test'),
            'page callback' => 'drupal_get_form',
            'page arguments' => array('multiple_step_form'),
            'access arguments' => array('access content'),
        );
        return $items;
      }
      
      /**
       *  マルチステップフォームの定義
       */
      function multiple_step_form($form, &$form_state){
      	switch( $form_state['pager'] ) {
              case  'page_1'  :
              return page_one_form();
              break;
      
              case  'page_2'  :
              return page_two_form();
              break;
      	}
      }
      
      /**
       *  ステップ1 フォームの定義
       */
      function page_one_form( $form, &$form_state ){
       // ステップの定義
        $form_state['pager'] = "page_1";
       // 任一のメッセージ表示
        $form['message_field'] = array(
            '#type' => 'markup',
            '#markup' => 'Form Step 1',
        );
        // サブミットボタン
        $form['submit'] = array(
            '#type' => 'submit',
            '#value' => '送信',
        );
       // サブミットボタンのイベントハンドラー
        $form['#submit'][] = 'page_one_form_submit';
      
        return $form;}
      }
      
      /**
       *  ステップ2 フォームの定義
       */
      function page_two_form( $form, &$form_state ){
        // ステップの定義
       $form_state['pager'] = "page_two";
       // 任一のメッセージ表示
        $form['test_form']=array(
            '#type' => 'item',
            '#title' => 'Multiple Step Form',
            '#markup' => '<p>Step 2</p>',
        );
       // サブミットボタン
        $form['submit'] = array(
            '#type' => 'submit',
            '#value' => '送信',
        );
       // サブミットボタンのイベントハンドラー
        $form['#submit'][] = 'page_two_form_submit';
        return $form;
      }
      
      /**
       *  ステップ1のボタンイベントハンドラー
       */
      function page_one_form_submit($form, &$form_state){
        $form_state['pager']['card_page']= "page_two";
        $form_state['rebuild'] = true;
        return ;
      }
      
      /**
       *  ステップ2のボタンイベントハンドラー
       */
      function page_two_form_submit($form, &$form_state){
        $form_state['pager']['card_page']= "page_one";
        $form_state['rebuild'] = true;
        return ;
      }

       
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 );

     

drupal
development
form
ajax

やりたいこと:DrupalのAJAXでマルチステップフォームを作成したいです

  • 背景:Drupal7.54、FormAPIのAJAXを利用して、マルチステップフォームの作成
  • FormAPIでマルチステップフォームの作成ができます(DrupalのFormAPIでマルチステップフォーム作成の基本 )
  • マルチステップフォームの作成には、AJAXの方が有利です
    • フォームHTMLの部分を置換すればよいので、全体的なページの更新必要はありません(パフォーマンスが良い)
    • AJAXがサーバーサイトとの交信URLが隠されています
    • DrupalのAJAXフレームワークを直接の利用で、簡単に実現できます(各ステップのフォームを直接に指定することができ、考え方が明確的)

DrupalのAJAXのdrupal_command_replace関数でフォームを置換してマルチステップフォームを作成します

  • DrupalのAJAXの利用は:Drupalのフォーム(FromAPI)でのajaxの実装 を参考してください
  • 各ステップのフォームがAJAXのコールバック関数内で定義しますので、FormAPIの実装方法より明確的になります
    DrupalのAJAXでマルチステップフォームの作成
  • AJAXで実装したマルチステップフォーム(ステップ1とステップ2の交替表示)例
    /**
     *  メニューでURLの定義
     */
    function your_module_menu() {
      $items['form/multiple-step'] = array(
          'title' => t('Multiple Step Form Test'),
          'page callback' => 'drupal_get_form',
          'page arguments' => array('page_one_form'),
          'access arguments' => array('access content'),
      );
      return $items;
    }
    
    /**
     *  ステップ1 フォームの定義
     */
    function page_one_form( $form, &$form_state ){
    
      $form['message_field'] = array(
          '#type' => 'markup',
          '#markup' => 'Form Step 1',
      );
      // サブミットボタン
      $form['submit'] = array(
          '#type' => 'submit',
          '#value' => '送信',
    	  '#ajax' => array(
            'callback' => 'card_1_ajax_callback',
          ),
      );
    
      return $form;}
    }
    
    /**
     *  ステップ2 フォームの定義
     */
    function page_two_form( $form, &$form_state ){
    
      $form['test_form']=array(
          '#type' => 'item',
          '#title' => 'Multiple Step Form',
          '#markup' => '<p>Step 2</p>',
      );
      $form['submit'] = array(
          '#type' => 'submit',
          '#value' => '送信',
    	  '#ajax' => array(
            'callback' => 'card_2_ajax_callback',
          ),
      );
    
      return $form;
    }
    
    /**
     *  ステップ1のコールバック関数
     */
    function card_1_ajax_callback($form, &$form_state){
     // 次のステップのフォームの用意
      $form =  drupal_rebuild_form( 'card_two_form', $form_state );
     // フォームのHTML部分の置換コマンド用意
      $commands[]=ajax_command_replace( '#block-system-main',
    		'<section class="block block-system clearfix" 
    				 id="block-system-main">'.render($form).'</section>' );
    
      return array('#type' => 'ajax', '#commands' => $commands);
    }
    
    /**
     *  ステップ2のコールバック関数
     */
    function card_2_ajax_callback($form, &$form_state){
     // 次のステップのフォームの用意
      $form =  drupal_rebuild_form( 'card_one_form', $form_state );
     // フォームのHTML部分の置換コマンド用意
      $commands[]=ajax_command_replace( '#block-system-main','<section class="block block-system clearfix" id="block-system-main">'.render($form).'</section>' );
    
      return array('#type' => 'ajax', '#commands' => $commands);
    }
    

     

drupal
development
form

やりたいこと:一つのURLで複数のステップフォームを作成したいです

  • 背景:Drupal7.54、FormAPIでマルチステップフォームの作成
  • FormAPIで簡単にフォームを作成します(例:Drupalの関数(drupal_get_form)を利用してFormAPIで作成したフォームを任意の場所でPHPに呼び出されることができます )
  • 一つのURLで複数のステップフォームを作成する要望があります

FormAPIでマルチステップフォーム作成の要点:「$form_state」でステップの定義、「form_submit()」関数内でステップの判別とフォームの再構築

  • FormAPIでマルチステップフォームを作成時に二つの要点ああります
  • 「$form_state」オブジェクトに任意のステップ識別変数を追加します(例:$form_state['pager'])
    • もちろん、$form_state['storage']の利用も可能です
    • 各ステップのフォームで識別文字列を定義します(例:$form_state['pager']='page_1')
  • 各ステップフォームの送信/次へボタンが押されたら、イベントをキャッチするform_submit()関数内でステップの判別、フォームの再構築を行います
    • ステップの判別: if($form_state['pager']=='page_1')
    • 次のステップのフォーム定義: $form_state['pager']=='page_2'
    • フォームの再構築: $form_state['rebuild']==TRUE
      DrupalのFormAPIでマルチステップフォームの要点
    • マルチステップのサンプルプログラム(送信ボタンを押すとステップ1とステップ2を交替で表示する)
      /**
       *  メニューでURLの定義
       */
      function your_module_menu() {
        $items['form/multiple-step'] = array(
            'title' => t('Multiple Step Form Test'),
            'page callback' => 'drupal_get_form',
            'page arguments' => array('multiple_step_form'),
            'access arguments' => array('access content'),
        );
        return $items;
      }
      
      /**
       *  マルチステップフォームの定義
       */
      function multiple_step_form($form, &$form_state){
      	switch( $form_state['pager'] ) {
              case  'page_1'  :
              return page_one_form();
              break;
      
              case  'page_2'  :
              return page_two_form();
              break;
      	}
      }
      
      /**
       *  ステップ1 フォームの定義
       */
      function page_one_form( $form, &$form_state ){
       // ステップの定義
        $form_state['pager'] = "page_1";
       // 任一のメッセージ表示
        $form['message_field'] = array(
            '#type' => 'markup',
            '#markup' => 'Form Step 1',
        );
        // サブミットボタン
        $form['submit'] = array(
            '#type' => 'submit',
            '#value' => '送信',
        );
       // サブミットボタンのイベントハンドラー
        $form['#submit'][] = 'page_one_form_submit';
      
        return $form;}
      }
      
      /**
       *  ステップ2 フォームの定義
       */
      function page_two_form( $form, &$form_state ){
        // ステップの定義
       $form_state['pager'] = "page_two";
       // 任一のメッセージ表示
        $form['test_form']=array(
            '#type' => 'item',
            '#title' => 'Multiple Step Form',
            '#markup' => '<p>Step 2</p>',
        );
       // サブミットボタン
        $form['submit'] = array(
            '#type' => 'submit',
            '#value' => '送信',
        );
       // サブミットボタンのイベントハンドラー
        $form['#submit'][] = 'page_two_form_submit';
        return $form;
      }
      
      /**
       *  ステップ1のボタンイベントハンドラー
       */
      function page_one_form_submit($form, &$form_state){
        $form_state['pager']['card_page']= "page_two";
        $form_state['rebuild'] = true;
        return ;
      }
      
      /**
       *  ステップ2のボタンイベントハンドラー
       */
      function page_two_form_submit($form, &$form_state){
        $form_state['pager']['card_page']= "page_one";
        $form_state['rebuild'] = true;
        return ;
      }

       
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 );

     

drupal
development
form
ajax

やりたいこと:DrupalのAJAXでマルチステップフォームを作成したいです

  • 背景:Drupal7.54、FormAPIのAJAXを利用して、マルチステップフォームの作成
  • FormAPIでマルチステップフォームの作成ができます(DrupalのFormAPIでマルチステップフォーム作成の基本 )
  • マルチステップフォームの作成には、AJAXの方が有利です
    • フォームHTMLの部分を置換すればよいので、全体的なページの更新必要はありません(パフォーマンスが良い)
    • AJAXがサーバーサイトとの交信URLが隠されています
    • DrupalのAJAXフレームワークを直接の利用で、簡単に実現できます(各ステップのフォームを直接に指定することができ、考え方が明確的)

DrupalのAJAXのdrupal_command_replace関数でフォームを置換してマルチステップフォームを作成します

  • DrupalのAJAXの利用は:Drupalのフォーム(FromAPI)でのajaxの実装 を参考してください
  • 各ステップのフォームがAJAXのコールバック関数内で定義しますので、FormAPIの実装方法より明確的になります
    DrupalのAJAXでマルチステップフォームの作成
  • AJAXで実装したマルチステップフォーム(ステップ1とステップ2の交替表示)例
    /**
     *  メニューでURLの定義
     */
    function your_module_menu() {
      $items['form/multiple-step'] = array(
          'title' => t('Multiple Step Form Test'),
          'page callback' => 'drupal_get_form',
          'page arguments' => array('page_one_form'),
          'access arguments' => array('access content'),
      );
      return $items;
    }
    
    /**
     *  ステップ1 フォームの定義
     */
    function page_one_form( $form, &$form_state ){
    
      $form['message_field'] = array(
          '#type' => 'markup',
          '#markup' => 'Form Step 1',
      );
      // サブミットボタン
      $form['submit'] = array(
          '#type' => 'submit',
          '#value' => '送信',
    	  '#ajax' => array(
            'callback' => 'card_1_ajax_callback',
          ),
      );
    
      return $form;}
    }
    
    /**
     *  ステップ2 フォームの定義
     */
    function page_two_form( $form, &$form_state ){
    
      $form['test_form']=array(
          '#type' => 'item',
          '#title' => 'Multiple Step Form',
          '#markup' => '<p>Step 2</p>',
      );
      $form['submit'] = array(
          '#type' => 'submit',
          '#value' => '送信',
    	  '#ajax' => array(
            'callback' => 'card_2_ajax_callback',
          ),
      );
    
      return $form;
    }
    
    /**
     *  ステップ1のコールバック関数
     */
    function card_1_ajax_callback($form, &$form_state){
     // 次のステップのフォームの用意
      $form =  drupal_rebuild_form( 'card_two_form', $form_state );
     // フォームのHTML部分の置換コマンド用意
      $commands[]=ajax_command_replace( '#block-system-main',
    		'<section class="block block-system clearfix" 
    				 id="block-system-main">'.render($form).'</section>' );
    
      return array('#type' => 'ajax', '#commands' => $commands);
    }
    
    /**
     *  ステップ2のコールバック関数
     */
    function card_2_ajax_callback($form, &$form_state){
     // 次のステップのフォームの用意
      $form =  drupal_rebuild_form( 'card_one_form', $form_state );
     // フォームのHTML部分の置換コマンド用意
      $commands[]=ajax_command_replace( '#block-system-main','<section class="block block-system clearfix" id="block-system-main">'.render($form).'</section>' );
    
      return array('#type' => 'ajax', '#commands' => $commands);
    }
    

     

drupal
development
form

やりたいこと:一つのURLで複数のステップフォームを作成したいです

  • 背景:Drupal7.54、FormAPIでマルチステップフォームの作成
  • FormAPIで簡単にフォームを作成します(例:Drupalの関数(drupal_get_form)を利用してFormAPIで作成したフォームを任意の場所でPHPに呼び出されることができます )
  • 一つのURLで複数のステップフォームを作成する要望があります

FormAPIでマルチステップフォーム作成の要点:「$form_state」でステップの定義、「form_submit()」関数内でステップの判別とフォームの再構築

  • FormAPIでマルチステップフォームを作成時に二つの要点ああります
  • 「$form_state」オブジェクトに任意のステップ識別変数を追加します(例:$form_state['pager'])
    • もちろん、$form_state['storage']の利用も可能です
    • 各ステップのフォームで識別文字列を定義します(例:$form_state['pager']='page_1')
  • 各ステップフォームの送信/次へボタンが押されたら、イベントをキャッチするform_submit()関数内でステップの判別、フォームの再構築を行います
    • ステップの判別: if($form_state['pager']=='page_1')
    • 次のステップのフォーム定義: $form_state['pager']=='page_2'
    • フォームの再構築: $form_state['rebuild']==TRUE
      DrupalのFormAPIでマルチステップフォームの要点
    • マルチステップのサンプルプログラム(送信ボタンを押すとステップ1とステップ2を交替で表示する)
      /**
       *  メニューでURLの定義
       */
      function your_module_menu() {
        $items['form/multiple-step'] = array(
            'title' => t('Multiple Step Form Test'),
            'page callback' => 'drupal_get_form',
            'page arguments' => array('multiple_step_form'),
            'access arguments' => array('access content'),
        );
        return $items;
      }
      
      /**
       *  マルチステップフォームの定義
       */
      function multiple_step_form($form, &$form_state){
      	switch( $form_state['pager'] ) {
              case  'page_1'  :
              return page_one_form();
              break;
      
              case  'page_2'  :
              return page_two_form();
              break;
      	}
      }
      
      /**
       *  ステップ1 フォームの定義
       */
      function page_one_form( $form, &$form_state ){
       // ステップの定義
        $form_state['pager'] = "page_1";
       // 任一のメッセージ表示
        $form['message_field'] = array(
            '#type' => 'markup',
            '#markup' => 'Form Step 1',
        );
        // サブミットボタン
        $form['submit'] = array(
            '#type' => 'submit',
            '#value' => '送信',
        );
       // サブミットボタンのイベントハンドラー
        $form['#submit'][] = 'page_one_form_submit';
      
        return $form;}
      }
      
      /**
       *  ステップ2 フォームの定義
       */
      function page_two_form( $form, &$form_state ){
        // ステップの定義
       $form_state['pager'] = "page_two";
       // 任一のメッセージ表示
        $form['test_form']=array(
            '#type' => 'item',
            '#title' => 'Multiple Step Form',
            '#markup' => '<p>Step 2</p>',
        );
       // サブミットボタン
        $form['submit'] = array(
            '#type' => 'submit',
            '#value' => '送信',
        );
       // サブミットボタンのイベントハンドラー
        $form['#submit'][] = 'page_two_form_submit';
        return $form;
      }
      
      /**
       *  ステップ1のボタンイベントハンドラー
       */
      function page_one_form_submit($form, &$form_state){
        $form_state['pager']['card_page']= "page_two";
        $form_state['rebuild'] = true;
        return ;
      }
      
      /**
       *  ステップ2のボタンイベントハンドラー
       */
      function page_two_form_submit($form, &$form_state){
        $form_state['pager']['card_page']= "page_one";
        $form_state['rebuild'] = true;
        return ;
      }

       
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 );

     

drupal
development
form
ajax

やりたいこと:DrupalのAJAXでマルチステップフォームを作成したいです

  • 背景:Drupal7.54、FormAPIのAJAXを利用して、マルチステップフォームの作成
  • FormAPIでマルチステップフォームの作成ができます(DrupalのFormAPIでマルチステップフォーム作成の基本 )
  • マルチステップフォームの作成には、AJAXの方が有利です
    • フォームHTMLの部分を置換すればよいので、全体的なページの更新必要はありません(パフォーマンスが良い)
    • AJAXがサーバーサイトとの交信URLが隠されています
    • DrupalのAJAXフレームワークを直接の利用で、簡単に実現できます(各ステップのフォームを直接に指定することができ、考え方が明確的)

DrupalのAJAXのdrupal_command_replace関数でフォームを置換してマルチステップフォームを作成します

  • DrupalのAJAXの利用は:Drupalのフォーム(FromAPI)でのajaxの実装 を参考してください
  • 各ステップのフォームがAJAXのコールバック関数内で定義しますので、FormAPIの実装方法より明確的になります
    DrupalのAJAXでマルチステップフォームの作成
  • AJAXで実装したマルチステップフォーム(ステップ1とステップ2の交替表示)例
    /**
     *  メニューでURLの定義
     */
    function your_module_menu() {
      $items['form/multiple-step'] = array(
          'title' => t('Multiple Step Form Test'),
          'page callback' => 'drupal_get_form',
          'page arguments' => array('page_one_form'),
          'access arguments' => array('access content'),
      );
      return $items;
    }
    
    /**
     *  ステップ1 フォームの定義
     */
    function page_one_form( $form, &$form_state ){
    
      $form['message_field'] = array(
          '#type' => 'markup',
          '#markup' => 'Form Step 1',
      );
      // サブミットボタン
      $form['submit'] = array(
          '#type' => 'submit',
          '#value' => '送信',
    	  '#ajax' => array(
            'callback' => 'card_1_ajax_callback',
          ),
      );
    
      return $form;}
    }
    
    /**
     *  ステップ2 フォームの定義
     */
    function page_two_form( $form, &$form_state ){
    
      $form['test_form']=array(
          '#type' => 'item',
          '#title' => 'Multiple Step Form',
          '#markup' => '<p>Step 2</p>',
      );
      $form['submit'] = array(
          '#type' => 'submit',
          '#value' => '送信',
    	  '#ajax' => array(
            'callback' => 'card_2_ajax_callback',
          ),
      );
    
      return $form;
    }
    
    /**
     *  ステップ1のコールバック関数
     */
    function card_1_ajax_callback($form, &$form_state){
     // 次のステップのフォームの用意
      $form =  drupal_rebuild_form( 'card_two_form', $form_state );
     // フォームのHTML部分の置換コマンド用意
      $commands[]=ajax_command_replace( '#block-system-main',
    		'<section class="block block-system clearfix" 
    				 id="block-system-main">'.render($form).'</section>' );
    
      return array('#type' => 'ajax', '#commands' => $commands);
    }
    
    /**
     *  ステップ2のコールバック関数
     */
    function card_2_ajax_callback($form, &$form_state){
     // 次のステップのフォームの用意
      $form =  drupal_rebuild_form( 'card_one_form', $form_state );
     // フォームのHTML部分の置換コマンド用意
      $commands[]=ajax_command_replace( '#block-system-main','<section class="block block-system clearfix" id="block-system-main">'.render($form).'</section>' );
    
      return array('#type' => 'ajax', '#commands' => $commands);
    }
    

     

drupal
development
form

やりたいこと:一つのURLで複数のステップフォームを作成したいです

  • 背景:Drupal7.54、FormAPIでマルチステップフォームの作成
  • FormAPIで簡単にフォームを作成します(例:Drupalの関数(drupal_get_form)を利用してFormAPIで作成したフォームを任意の場所でPHPに呼び出されることができます )
  • 一つのURLで複数のステップフォームを作成する要望があります

FormAPIでマルチステップフォーム作成の要点:「$form_state」でステップの定義、「form_submit()」関数内でステップの判別とフォームの再構築

  • FormAPIでマルチステップフォームを作成時に二つの要点ああります
  • 「$form_state」オブジェクトに任意のステップ識別変数を追加します(例:$form_state['pager'])
    • もちろん、$form_state['storage']の利用も可能です
    • 各ステップのフォームで識別文字列を定義します(例:$form_state['pager']='page_1')
  • 各ステップフォームの送信/次へボタンが押されたら、イベントをキャッチするform_submit()関数内でステップの判別、フォームの再構築を行います
    • ステップの判別: if($form_state['pager']=='page_1')
    • 次のステップのフォーム定義: $form_state['pager']=='page_2'
    • フォームの再構築: $form_state['rebuild']==TRUE
      DrupalのFormAPIでマルチステップフォームの要点
    • マルチステップのサンプルプログラム(送信ボタンを押すとステップ1とステップ2を交替で表示する)
      /**
       *  メニューでURLの定義
       */
      function your_module_menu() {
        $items['form/multiple-step'] = array(
            'title' => t('Multiple Step Form Test'),
            'page callback' => 'drupal_get_form',
            'page arguments' => array('multiple_step_form'),
            'access arguments' => array('access content'),
        );
        return $items;
      }
      
      /**
       *  マルチステップフォームの定義
       */
      function multiple_step_form($form, &$form_state){
      	switch( $form_state['pager'] ) {
              case  'page_1'  :
              return page_one_form();
              break;
      
              case  'page_2'  :
              return page_two_form();
              break;
      	}
      }
      
      /**
       *  ステップ1 フォームの定義
       */
      function page_one_form( $form, &$form_state ){
       // ステップの定義
        $form_state['pager'] = "page_1";
       // 任一のメッセージ表示
        $form['message_field'] = array(
            '#type' => 'markup',
            '#markup' => 'Form Step 1',
        );
        // サブミットボタン
        $form['submit'] = array(
            '#type' => 'submit',
            '#value' => '送信',
        );
       // サブミットボタンのイベントハンドラー
        $form['#submit'][] = 'page_one_form_submit';
      
        return $form;}
      }
      
      /**
       *  ステップ2 フォームの定義
       */
      function page_two_form( $form, &$form_state ){
        // ステップの定義
       $form_state['pager'] = "page_two";
       // 任一のメッセージ表示
        $form['test_form']=array(
            '#type' => 'item',
            '#title' => 'Multiple Step Form',
            '#markup' => '<p>Step 2</p>',
        );
       // サブミットボタン
        $form['submit'] = array(
            '#type' => 'submit',
            '#value' => '送信',
        );
       // サブミットボタンのイベントハンドラー
        $form['#submit'][] = 'page_two_form_submit';
        return $form;
      }
      
      /**
       *  ステップ1のボタンイベントハンドラー
       */
      function page_one_form_submit($form, &$form_state){
        $form_state['pager']['card_page']= "page_two";
        $form_state['rebuild'] = true;
        return ;
      }
      
      /**
       *  ステップ2のボタンイベントハンドラー
       */
      function page_two_form_submit($form, &$form_state){
        $form_state['pager']['card_page']= "page_one";
        $form_state['rebuild'] = true;
        return ;
      }

       
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 );

     

drupal
development
form
ajax

やりたいこと:DrupalのAJAXでマルチステップフォームを作成したいです

  • 背景:Drupal7.54、FormAPIのAJAXを利用して、マルチステップフォームの作成
  • FormAPIでマルチステップフォームの作成ができます(DrupalのFormAPIでマルチステップフォーム作成の基本 )
  • マルチステップフォームの作成には、AJAXの方が有利です
    • フォームHTMLの部分を置換すればよいので、全体的なページの更新必要はありません(パフォーマンスが良い)
    • AJAXがサーバーサイトとの交信URLが隠されています
    • DrupalのAJAXフレームワークを直接の利用で、簡単に実現できます(各ステップのフォームを直接に指定することができ、考え方が明確的)

DrupalのAJAXのdrupal_command_replace関数でフォームを置換してマルチステップフォームを作成します

  • DrupalのAJAXの利用は:Drupalのフォーム(FromAPI)でのajaxの実装 を参考してください
  • 各ステップのフォームがAJAXのコールバック関数内で定義しますので、FormAPIの実装方法より明確的になります
    DrupalのAJAXでマルチステップフォームの作成
  • AJAXで実装したマルチステップフォーム(ステップ1とステップ2の交替表示)例
    /**
     *  メニューでURLの定義
     */
    function your_module_menu() {
      $items['form/multiple-step'] = array(
          'title' => t('Multiple Step Form Test'),
          'page callback' => 'drupal_get_form',
          'page arguments' => array('page_one_form'),
          'access arguments' => array('access content'),
      );
      return $items;
    }
    
    /**
     *  ステップ1 フォームの定義
     */
    function page_one_form( $form, &$form_state ){
    
      $form['message_field'] = array(
          '#type' => 'markup',
          '#markup' => 'Form Step 1',
      );
      // サブミットボタン
      $form['submit'] = array(
          '#type' => 'submit',
          '#value' => '送信',
    	  '#ajax' => array(
            'callback' => 'card_1_ajax_callback',
          ),
      );
    
      return $form;}
    }
    
    /**
     *  ステップ2 フォームの定義
     */
    function page_two_form( $form, &$form_state ){
    
      $form['test_form']=array(
          '#type' => 'item',
          '#title' => 'Multiple Step Form',
          '#markup' => '<p>Step 2</p>',
      );
      $form['submit'] = array(
          '#type' => 'submit',
          '#value' => '送信',
    	  '#ajax' => array(
            'callback' => 'card_2_ajax_callback',
          ),
      );
    
      return $form;
    }
    
    /**
     *  ステップ1のコールバック関数
     */
    function card_1_ajax_callback($form, &$form_state){
     // 次のステップのフォームの用意
      $form =  drupal_rebuild_form( 'card_two_form', $form_state );
     // フォームのHTML部分の置換コマンド用意
      $commands[]=ajax_command_replace( '#block-system-main',
    		'<section class="block block-system clearfix" 
    				 id="block-system-main">'.render($form).'</section>' );
    
      return array('#type' => 'ajax', '#commands' => $commands);
    }
    
    /**
     *  ステップ2のコールバック関数
     */
    function card_2_ajax_callback($form, &$form_state){
     // 次のステップのフォームの用意
      $form =  drupal_rebuild_form( 'card_one_form', $form_state );
     // フォームのHTML部分の置換コマンド用意
      $commands[]=ajax_command_replace( '#block-system-main','<section class="block block-system clearfix" id="block-system-main">'.render($form).'</section>' );
    
      return array('#type' => 'ajax', '#commands' => $commands);
    }
    

     

drupal
development
form

やりたいこと:一つのURLで複数のステップフォームを作成したいです

  • 背景:Drupal7.54、FormAPIでマルチステップフォームの作成
  • FormAPIで簡単にフォームを作成します(例:Drupalの関数(drupal_get_form)を利用してFormAPIで作成したフォームを任意の場所でPHPに呼び出されることができます )
  • 一つのURLで複数のステップフォームを作成する要望があります

FormAPIでマルチステップフォーム作成の要点:「$form_state」でステップの定義、「form_submit()」関数内でステップの判別とフォームの再構築

  • FormAPIでマルチステップフォームを作成時に二つの要点ああります
  • 「$form_state」オブジェクトに任意のステップ識別変数を追加します(例:$form_state['pager'])
    • もちろん、$form_state['storage']の利用も可能です
    • 各ステップのフォームで識別文字列を定義します(例:$form_state['pager']='page_1')
  • 各ステップフォームの送信/次へボタンが押されたら、イベントをキャッチするform_submit()関数内でステップの判別、フォームの再構築を行います
    • ステップの判別: if($form_state['pager']=='page_1')
    • 次のステップのフォーム定義: $form_state['pager']=='page_2'
    • フォームの再構築: $form_state['rebuild']==TRUE
      DrupalのFormAPIでマルチステップフォームの要点
    • マルチステップのサンプルプログラム(送信ボタンを押すとステップ1とステップ2を交替で表示する)
      /**
       *  メニューでURLの定義
       */
      function your_module_menu() {
        $items['form/multiple-step'] = array(
            'title' => t('Multiple Step Form Test'),
            'page callback' => 'drupal_get_form',
            'page arguments' => array('multiple_step_form'),
            'access arguments' => array('access content'),
        );
        return $items;
      }
      
      /**
       *  マルチステップフォームの定義
       */
      function multiple_step_form($form, &$form_state){
      	switch( $form_state['pager'] ) {
              case  'page_1'  :
              return page_one_form();
              break;
      
              case  'page_2'  :
              return page_two_form();
              break;
      	}
      }
      
      /**
       *  ステップ1 フォームの定義
       */
      function page_one_form( $form, &$form_state ){
       // ステップの定義
        $form_state['pager'] = "page_1";
       // 任一のメッセージ表示
        $form['message_field'] = array(
            '#type' => 'markup',
            '#markup' => 'Form Step 1',
        );
        // サブミットボタン
        $form['submit'] = array(
            '#type' => 'submit',
            '#value' => '送信',
        );
       // サブミットボタンのイベントハンドラー
        $form['#submit'][] = 'page_one_form_submit';
      
        return $form;}
      }
      
      /**
       *  ステップ2 フォームの定義
       */
      function page_two_form( $form, &$form_state ){
        // ステップの定義
       $form_state['pager'] = "page_two";
       // 任一のメッセージ表示
        $form['test_form']=array(
            '#type' => 'item',
            '#title' => 'Multiple Step Form',
            '#markup' => '<p>Step 2</p>',
        );
       // サブミットボタン
        $form['submit'] = array(
            '#type' => 'submit',
            '#value' => '送信',
        );
       // サブミットボタンのイベントハンドラー
        $form['#submit'][] = 'page_two_form_submit';
        return $form;
      }
      
      /**
       *  ステップ1のボタンイベントハンドラー
       */
      function page_one_form_submit($form, &$form_state){
        $form_state['pager']['card_page']= "page_two";
        $form_state['rebuild'] = true;
        return ;
      }
      
      /**
       *  ステップ2のボタンイベントハンドラー
       */
      function page_two_form_submit($form, &$form_state){
        $form_state['pager']['card_page']= "page_one";
        $form_state['rebuild'] = true;
        return ;
      }

       
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 );

     

drupal
development
form
ajax

やりたいこと:DrupalのAJAXでマルチステップフォームを作成したいです

  • 背景:Drupal7.54、FormAPIのAJAXを利用して、マルチステップフォームの作成
  • FormAPIでマルチステップフォームの作成ができます(DrupalのFormAPIでマルチステップフォーム作成の基本 )
  • マルチステップフォームの作成には、AJAXの方が有利です
    • フォームHTMLの部分を置換すればよいので、全体的なページの更新必要はありません(パフォーマンスが良い)
    • AJAXがサーバーサイトとの交信URLが隠されています
    • DrupalのAJAXフレームワークを直接の利用で、簡単に実現できます(各ステップのフォームを直接に指定することができ、考え方が明確的)

DrupalのAJAXのdrupal_command_replace関数でフォームを置換してマルチステップフォームを作成します

  • DrupalのAJAXの利用は:Drupalのフォーム(FromAPI)でのajaxの実装 を参考してください
  • 各ステップのフォームがAJAXのコールバック関数内で定義しますので、FormAPIの実装方法より明確的になります
    DrupalのAJAXでマルチステップフォームの作成
  • AJAXで実装したマルチステップフォーム(ステップ1とステップ2の交替表示)例
    /**
     *  メニューでURLの定義
     */
    function your_module_menu() {
      $items['form/multiple-step'] = array(
          'title' => t('Multiple Step Form Test'),
          'page callback' => 'drupal_get_form',
          'page arguments' => array('page_one_form'),
          'access arguments' => array('access content'),
      );
      return $items;
    }
    
    /**
     *  ステップ1 フォームの定義
     */
    function page_one_form( $form, &$form_state ){
    
      $form['message_field'] = array(
          '#type' => 'markup',
          '#markup' => 'Form Step 1',
      );
      // サブミットボタン
      $form['submit'] = array(
          '#type' => 'submit',
          '#value' => '送信',
    	  '#ajax' => array(
            'callback' => 'card_1_ajax_callback',
          ),
      );
    
      return $form;}
    }
    
    /**
     *  ステップ2 フォームの定義
     */
    function page_two_form( $form, &$form_state ){
    
      $form['test_form']=array(
          '#type' => 'item',
          '#title' => 'Multiple Step Form',
          '#markup' => '<p>Step 2</p>',
      );
      $form['submit'] = array(
          '#type' => 'submit',
          '#value' => '送信',
    	  '#ajax' => array(
            'callback' => 'card_2_ajax_callback',
          ),
      );
    
      return $form;
    }
    
    /**
     *  ステップ1のコールバック関数
     */
    function card_1_ajax_callback($form, &$form_state){
     // 次のステップのフォームの用意
      $form =  drupal_rebuild_form( 'card_two_form', $form_state );
     // フォームのHTML部分の置換コマンド用意
      $commands[]=ajax_command_replace( '#block-system-main',
    		'<section class="block block-system clearfix" 
    				 id="block-system-main">'.render($form).'</section>' );
    
      return array('#type' => 'ajax', '#commands' => $commands);
    }
    
    /**
     *  ステップ2のコールバック関数
     */
    function card_2_ajax_callback($form, &$form_state){
     // 次のステップのフォームの用意
      $form =  drupal_rebuild_form( 'card_one_form', $form_state );
     // フォームのHTML部分の置換コマンド用意
      $commands[]=ajax_command_replace( '#block-system-main','<section class="block block-system clearfix" id="block-system-main">'.render($form).'</section>' );
    
      return array('#type' => 'ajax', '#commands' => $commands);
    }
    

     

drupal
development
form

やりたいこと:一つのURLで複数のステップフォームを作成したいです

  • 背景:Drupal7.54、FormAPIでマルチステップフォームの作成
  • FormAPIで簡単にフォームを作成します(例:Drupalの関数(drupal_get_form)を利用してFormAPIで作成したフォームを任意の場所でPHPに呼び出されることができます )
  • 一つのURLで複数のステップフォームを作成する要望があります

FormAPIでマルチステップフォーム作成の要点:「$form_state」でステップの定義、「form_submit()」関数内でステップの判別とフォームの再構築

  • FormAPIでマルチステップフォームを作成時に二つの要点ああります
  • 「$form_state」オブジェクトに任意のステップ識別変数を追加します(例:$form_state['pager'])
    • もちろん、$form_state['storage']の利用も可能です
    • 各ステップのフォームで識別文字列を定義します(例:$form_state['pager']='page_1')
  • 各ステップフォームの送信/次へボタンが押されたら、イベントをキャッチするform_submit()関数内でステップの判別、フォームの再構築を行います
    • ステップの判別: if($form_state['pager']=='page_1')
    • 次のステップのフォーム定義: $form_state['pager']=='page_2'
    • フォームの再構築: $form_state['rebuild']==TRUE
      DrupalのFormAPIでマルチステップフォームの要点
    • マルチステップのサンプルプログラム(送信ボタンを押すとステップ1とステップ2を交替で表示する)
      /**
       *  メニューでURLの定義
       */
      function your_module_menu() {
        $items['form/multiple-step'] = array(
            'title' => t('Multiple Step Form Test'),
            'page callback' => 'drupal_get_form',
            'page arguments' => array('multiple_step_form'),
            'access arguments' => array('access content'),
        );
        return $items;
      }
      
      /**
       *  マルチステップフォームの定義
       */
      function multiple_step_form($form, &$form_state){
      	switch( $form_state['pager'] ) {
              case  'page_1'  :
              return page_one_form();
              break;
      
              case  'page_2'  :
              return page_two_form();
              break;
      	}
      }
      
      /**
       *  ステップ1 フォームの定義
       */
      function page_one_form( $form, &$form_state ){
       // ステップの定義
        $form_state['pager'] = "page_1";
       // 任一のメッセージ表示
        $form['message_field'] = array(
            '#type' => 'markup',
            '#markup' => 'Form Step 1',
        );
        // サブミットボタン
        $form['submit'] = array(
            '#type' => 'submit',
            '#value' => '送信',
        );
       // サブミットボタンのイベントハンドラー
        $form['#submit'][] = 'page_one_form_submit';
      
        return $form;}
      }
      
      /**
       *  ステップ2 フォームの定義
       */
      function page_two_form( $form, &$form_state ){
        // ステップの定義
       $form_state['pager'] = "page_two";
       // 任一のメッセージ表示
        $form['test_form']=array(
            '#type' => 'item',
            '#title' => 'Multiple Step Form',
            '#markup' => '<p>Step 2</p>',
        );
       // サブミットボタン
        $form['submit'] = array(
            '#type' => 'submit',
            '#value' => '送信',
        );
       // サブミットボタンのイベントハンドラー
        $form['#submit'][] = 'page_two_form_submit';
        return $form;
      }
      
      /**
       *  ステップ1のボタンイベントハンドラー
       */
      function page_one_form_submit($form, &$form_state){
        $form_state['pager']['card_page']= "page_two";
        $form_state['rebuild'] = true;
        return ;
      }
      
      /**
       *  ステップ2のボタンイベントハンドラー
       */
      function page_two_form_submit($form, &$form_state){
        $form_state['pager']['card_page']= "page_one";
        $form_state['rebuild'] = true;
        return ;
      }

       
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 );

     

drupal
development
form
ajax

やりたいこと:DrupalのAJAXでマルチステップフォームを作成したいです

  • 背景:Drupal7.54、FormAPIのAJAXを利用して、マルチステップフォームの作成
  • FormAPIでマルチステップフォームの作成ができます(DrupalのFormAPIでマルチステップフォーム作成の基本 )
  • マルチステップフォームの作成には、AJAXの方が有利です
    • フォームHTMLの部分を置換すればよいので、全体的なページの更新必要はありません(パフォーマンスが良い)
    • AJAXがサーバーサイトとの交信URLが隠されています
    • DrupalのAJAXフレームワークを直接の利用で、簡単に実現できます(各ステップのフォームを直接に指定することができ、考え方が明確的)

DrupalのAJAXのdrupal_command_replace関数でフォームを置換してマルチステップフォームを作成します

  • DrupalのAJAXの利用は:Drupalのフォーム(FromAPI)でのajaxの実装 を参考してください
  • 各ステップのフォームがAJAXのコールバック関数内で定義しますので、FormAPIの実装方法より明確的になります
    DrupalのAJAXでマルチステップフォームの作成
  • AJAXで実装したマルチステップフォーム(ステップ1とステップ2の交替表示)例
    /**
     *  メニューでURLの定義
     */
    function your_module_menu() {
      $items['form/multiple-step'] = array(
          'title' => t('Multiple Step Form Test'),
          'page callback' => 'drupal_get_form',
          'page arguments' => array('page_one_form'),
          'access arguments' => array('access content'),
      );
      return $items;
    }
    
    /**
     *  ステップ1 フォームの定義
     */
    function page_one_form( $form, &$form_state ){
    
      $form['message_field'] = array(
          '#type' => 'markup',
          '#markup' => 'Form Step 1',
      );
      // サブミットボタン
      $form['submit'] = array(
          '#type' => 'submit',
          '#value' => '送信',
    	  '#ajax' => array(
            'callback' => 'card_1_ajax_callback',
          ),
      );
    
      return $form;}
    }
    
    /**
     *  ステップ2 フォームの定義
     */
    function page_two_form( $form, &$form_state ){
    
      $form['test_form']=array(
          '#type' => 'item',
          '#title' => 'Multiple Step Form',
          '#markup' => '<p>Step 2</p>',
      );
      $form['submit'] = array(
          '#type' => 'submit',
          '#value' => '送信',
    	  '#ajax' => array(
            'callback' => 'card_2_ajax_callback',
          ),
      );
    
      return $form;
    }
    
    /**
     *  ステップ1のコールバック関数
     */
    function card_1_ajax_callback($form, &$form_state){
     // 次のステップのフォームの用意
      $form =  drupal_rebuild_form( 'card_two_form', $form_state );
     // フォームのHTML部分の置換コマンド用意
      $commands[]=ajax_command_replace( '#block-system-main',
    		'<section class="block block-system clearfix" 
    				 id="block-system-main">'.render($form).'</section>' );
    
      return array('#type' => 'ajax', '#commands' => $commands);
    }
    
    /**
     *  ステップ2のコールバック関数
     */
    function card_2_ajax_callback($form, &$form_state){
     // 次のステップのフォームの用意
      $form =  drupal_rebuild_form( 'card_one_form', $form_state );
     // フォームのHTML部分の置換コマンド用意
      $commands[]=ajax_command_replace( '#block-system-main','<section class="block block-system clearfix" id="block-system-main">'.render($form).'</section>' );
    
      return array('#type' => 'ajax', '#commands' => $commands);
    }
    

     

drupal
development
form

やりたいこと:一つのURLで複数のステップフォームを作成したいです

  • 背景:Drupal7.54、FormAPIでマルチステップフォームの作成
  • FormAPIで簡単にフォームを作成します(例:Drupalの関数(drupal_get_form)を利用してFormAPIで作成したフォームを任意の場所でPHPに呼び出されることができます )
  • 一つのURLで複数のステップフォームを作成する要望があります

FormAPIでマルチステップフォーム作成の要点:「$form_state」でステップの定義、「form_submit()」関数内でステップの判別とフォームの再構築

  • FormAPIでマルチステップフォームを作成時に二つの要点ああります
  • 「$form_state」オブジェクトに任意のステップ識別変数を追加します(例:$form_state['pager'])
    • もちろん、$form_state['storage']の利用も可能です
    • 各ステップのフォームで識別文字列を定義します(例:$form_state['pager']='page_1')
  • 各ステップフォームの送信/次へボタンが押されたら、イベントをキャッチするform_submit()関数内でステップの判別、フォームの再構築を行います
    • ステップの判別: if($form_state['pager']=='page_1')
    • 次のステップのフォーム定義: $form_state['pager']=='page_2'
    • フォームの再構築: $form_state['rebuild']==TRUE
      DrupalのFormAPIでマルチステップフォームの要点
    • マルチステップのサンプルプログラム(送信ボタンを押すとステップ1とステップ2を交替で表示する)
      /**
       *  メニューでURLの定義
       */
      function your_module_menu() {
        $items['form/multiple-step'] = array(
            'title' => t('Multiple Step Form Test'),
            'page callback' => 'drupal_get_form',
            'page arguments' => array('multiple_step_form'),
            'access arguments' => array('access content'),
        );
        return $items;
      }
      
      /**
       *  マルチステップフォームの定義
       */
      function multiple_step_form($form, &$form_state){
      	switch( $form_state['pager'] ) {
              case  'page_1'  :
              return page_one_form();
              break;
      
              case  'page_2'  :
              return page_two_form();
              break;
      	}
      }
      
      /**
       *  ステップ1 フォームの定義
       */
      function page_one_form( $form, &$form_state ){
       // ステップの定義
        $form_state['pager'] = "page_1";
       // 任一のメッセージ表示
        $form['message_field'] = array(
            '#type' => 'markup',
            '#markup' => 'Form Step 1',
        );
        // サブミットボタン
        $form['submit'] = array(
            '#type' => 'submit',
            '#value' => '送信',
        );
       // サブミットボタンのイベントハンドラー
        $form['#submit'][] = 'page_one_form_submit';
      
        return $form;}
      }
      
      /**
       *  ステップ2 フォームの定義
       */
      function page_two_form( $form, &$form_state ){
        // ステップの定義
       $form_state['pager'] = "page_two";
       // 任一のメッセージ表示
        $form['test_form']=array(
            '#type' => 'item',
            '#title' => 'Multiple Step Form',
            '#markup' => '<p>Step 2</p>',
        );
       // サブミットボタン
        $form['submit'] = array(
            '#type' => 'submit',
            '#value' => '送信',
        );
       // サブミットボタンのイベントハンドラー
        $form['#submit'][] = 'page_two_form_submit';
        return $form;
      }
      
      /**
       *  ステップ1のボタンイベントハンドラー
       */
      function page_one_form_submit($form, &$form_state){
        $form_state['pager']['card_page']= "page_two";
        $form_state['rebuild'] = true;
        return ;
      }
      
      /**
       *  ステップ2のボタンイベントハンドラー
       */
      function page_two_form_submit($form, &$form_state){
        $form_state['pager']['card_page']= "page_one";
        $form_state['rebuild'] = true;
        return ;
      }

       
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 );

     

drupal
development
form
ajax

やりたいこと:DrupalのAJAXでマルチステップフォームを作成したいです

  • 背景:Drupal7.54、FormAPIのAJAXを利用して、マルチステップフォームの作成
  • FormAPIでマルチステップフォームの作成ができます(DrupalのFormAPIでマルチステップフォーム作成の基本 )
  • マルチステップフォームの作成には、AJAXの方が有利です
    • フォームHTMLの部分を置換すればよいので、全体的なページの更新必要はありません(パフォーマンスが良い)
    • AJAXがサーバーサイトとの交信URLが隠されています
    • DrupalのAJAXフレームワークを直接の利用で、簡単に実現できます(各ステップのフォームを直接に指定することができ、考え方が明確的)

DrupalのAJAXのdrupal_command_replace関数でフォームを置換してマルチステップフォームを作成します

  • DrupalのAJAXの利用は:Drupalのフォーム(FromAPI)でのajaxの実装 を参考してください
  • 各ステップのフォームがAJAXのコールバック関数内で定義しますので、FormAPIの実装方法より明確的になります
    DrupalのAJAXでマルチステップフォームの作成
  • AJAXで実装したマルチステップフォーム(ステップ1とステップ2の交替表示)例
    /**
     *  メニューでURLの定義
     */
    function your_module_menu() {
      $items['form/multiple-step'] = array(
          'title' => t('Multiple Step Form Test'),
          'page callback' => 'drupal_get_form',
          'page arguments' => array('page_one_form'),
          'access arguments' => array('access content'),
      );
      return $items;
    }
    
    /**
     *  ステップ1 フォームの定義
     */
    function page_one_form( $form, &$form_state ){
    
      $form['message_field'] = array(
          '#type' => 'markup',
          '#markup' => 'Form Step 1',
      );
      // サブミットボタン
      $form['submit'] = array(
          '#type' => 'submit',
          '#value' => '送信',
    	  '#ajax' => array(
            'callback' => 'card_1_ajax_callback',
          ),
      );
    
      return $form;}
    }
    
    /**
     *  ステップ2 フォームの定義
     */
    function page_two_form( $form, &$form_state ){
    
      $form['test_form']=array(
          '#type' => 'item',
          '#title' => 'Multiple Step Form',
          '#markup' => '<p>Step 2</p>',
      );
      $form['submit'] = array(
          '#type' => 'submit',
          '#value' => '送信',
    	  '#ajax' => array(
            'callback' => 'card_2_ajax_callback',
          ),
      );
    
      return $form;
    }
    
    /**
     *  ステップ1のコールバック関数
     */
    function card_1_ajax_callback($form, &$form_state){
     // 次のステップのフォームの用意
      $form =  drupal_rebuild_form( 'card_two_form', $form_state );
     // フォームのHTML部分の置換コマンド用意
      $commands[]=ajax_command_replace( '#block-system-main',
    		'<section class="block block-system clearfix" 
    				 id="block-system-main">'.render($form).'</section>' );
    
      return array('#type' => 'ajax', '#commands' => $commands);
    }
    
    /**
     *  ステップ2のコールバック関数
     */
    function card_2_ajax_callback($form, &$form_state){
     // 次のステップのフォームの用意
      $form =  drupal_rebuild_form( 'card_one_form', $form_state );
     // フォームのHTML部分の置換コマンド用意
      $commands[]=ajax_command_replace( '#block-system-main','<section class="block block-system clearfix" id="block-system-main">'.render($form).'</section>' );
    
      return array('#type' => 'ajax', '#commands' => $commands);
    }
    

     

drupal
development
form

やりたいこと:一つのURLで複数のステップフォームを作成したいです

  • 背景:Drupal7.54、FormAPIでマルチステップフォームの作成
  • FormAPIで簡単にフォームを作成します(例:Drupalの関数(drupal_get_form)を利用してFormAPIで作成したフォームを任意の場所でPHPに呼び出されることができます )
  • 一つのURLで複数のステップフォームを作成する要望があります

FormAPIでマルチステップフォーム作成の要点:「$form_state」でステップの定義、「form_submit()」関数内でステップの判別とフォームの再構築

  • FormAPIでマルチステップフォームを作成時に二つの要点ああります
  • 「$form_state」オブジェクトに任意のステップ識別変数を追加します(例:$form_state['pager'])
    • もちろん、$form_state['storage']の利用も可能です
    • 各ステップのフォームで識別文字列を定義します(例:$form_state['pager']='page_1')
  • 各ステップフォームの送信/次へボタンが押されたら、イベントをキャッチするform_submit()関数内でステップの判別、フォームの再構築を行います
    • ステップの判別: if($form_state['pager']=='page_1')
    • 次のステップのフォーム定義: $form_state['pager']=='page_2'
    • フォームの再構築: $form_state['rebuild']==TRUE
      DrupalのFormAPIでマルチステップフォームの要点
    • マルチステップのサンプルプログラム(送信ボタンを押すとステップ1とステップ2を交替で表示する)
      /**
       *  メニューでURLの定義
       */
      function your_module_menu() {
        $items['form/multiple-step'] = array(
            'title' => t('Multiple Step Form Test'),
            'page callback' => 'drupal_get_form',
            'page arguments' => array('multiple_step_form'),
            'access arguments' => array('access content'),
        );
        return $items;
      }
      
      /**
       *  マルチステップフォームの定義
       */
      function multiple_step_form($form, &$form_state){
      	switch( $form_state['pager'] ) {
              case  'page_1'  :
              return page_one_form();
              break;
      
              case  'page_2'  :
              return page_two_form();
              break;
      	}
      }
      
      /**
       *  ステップ1 フォームの定義
       */
      function page_one_form( $form, &$form_state ){
       // ステップの定義
        $form_state['pager'] = "page_1";
       // 任一のメッセージ表示
        $form['message_field'] = array(
            '#type' => 'markup',
            '#markup' => 'Form Step 1',
        );
        // サブミットボタン
        $form['submit'] = array(
            '#type' => 'submit',
            '#value' => '送信',
        );
       // サブミットボタンのイベントハンドラー
        $form['#submit'][] = 'page_one_form_submit';
      
        return $form;}
      }
      
      /**
       *  ステップ2 フォームの定義
       */
      function page_two_form( $form, &$form_state ){
        // ステップの定義
       $form_state['pager'] = "page_two";
       // 任一のメッセージ表示
        $form['test_form']=array(
            '#type' => 'item',
            '#title' => 'Multiple Step Form',
            '#markup' => '<p>Step 2</p>',
        );
       // サブミットボタン
        $form['submit'] = array(
            '#type' => 'submit',
            '#value' => '送信',
        );
       // サブミットボタンのイベントハンドラー
        $form['#submit'][] = 'page_two_form_submit';
        return $form;
      }
      
      /**
       *  ステップ1のボタンイベントハンドラー
       */
      function page_one_form_submit($form, &$form_state){
        $form_state['pager']['card_page']= "page_two";
        $form_state['rebuild'] = true;
        return ;
      }
      
      /**
       *  ステップ2のボタンイベントハンドラー
       */
      function page_two_form_submit($form, &$form_state){
        $form_state['pager']['card_page']= "page_one";
        $form_state['rebuild'] = true;
        return ;
      }

       
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 );

     

drupal
development
form
ajax

やりたいこと:DrupalのAJAXでマルチステップフォームを作成したいです

  • 背景:Drupal7.54、FormAPIのAJAXを利用して、マルチステップフォームの作成
  • FormAPIでマルチステップフォームの作成ができます(DrupalのFormAPIでマルチステップフォーム作成の基本 )
  • マルチステップフォームの作成には、AJAXの方が有利です
    • フォームHTMLの部分を置換すればよいので、全体的なページの更新必要はありません(パフォーマンスが良い)
    • AJAXがサーバーサイトとの交信URLが隠されています
    • DrupalのAJAXフレームワークを直接の利用で、簡単に実現できます(各ステップのフォームを直接に指定することができ、考え方が明確的)

DrupalのAJAXのdrupal_command_replace関数でフォームを置換してマルチステップフォームを作成します

  • DrupalのAJAXの利用は:Drupalのフォーム(FromAPI)でのajaxの実装 を参考してください
  • 各ステップのフォームがAJAXのコールバック関数内で定義しますので、FormAPIの実装方法より明確的になります
    DrupalのAJAXでマルチステップフォームの作成
  • AJAXで実装したマルチステップフォーム(ステップ1とステップ2の交替表示)例
    /**
     *  メニューでURLの定義
     */
    function your_module_menu() {
      $items['form/multiple-step'] = array(
          'title' => t('Multiple Step Form Test'),
          'page callback' => 'drupal_get_form',
          'page arguments' => array('page_one_form'),
          'access arguments' => array('access content'),
      );
      return $items;
    }
    
    /**
     *  ステップ1 フォームの定義
     */
    function page_one_form( $form, &$form_state ){
    
      $form['message_field'] = array(
          '#type' => 'markup',
          '#markup' => 'Form Step 1',
      );
      // サブミットボタン
      $form['submit'] = array(
          '#type' => 'submit',
          '#value' => '送信',
    	  '#ajax' => array(
            'callback' => 'card_1_ajax_callback',
          ),
      );
    
      return $form;}
    }
    
    /**
     *  ステップ2 フォームの定義
     */
    function page_two_form( $form, &$form_state ){
    
      $form['test_form']=array(
          '#type' => 'item',
          '#title' => 'Multiple Step Form',
          '#markup' => '<p>Step 2</p>',
      );
      $form['submit'] = array(
          '#type' => 'submit',
          '#value' => '送信',
    	  '#ajax' => array(
            'callback' => 'card_2_ajax_callback',
          ),
      );
    
      return $form;
    }
    
    /**
     *  ステップ1のコールバック関数
     */
    function card_1_ajax_callback($form, &$form_state){
     // 次のステップのフォームの用意
      $form =  drupal_rebuild_form( 'card_two_form', $form_state );
     // フォームのHTML部分の置換コマンド用意
      $commands[]=ajax_command_replace( '#block-system-main',
    		'<section class="block block-system clearfix" 
    				 id="block-system-main">'.render($form).'</section>' );
    
      return array('#type' => 'ajax', '#commands' => $commands);
    }
    
    /**
     *  ステップ2のコールバック関数
     */
    function card_2_ajax_callback($form, &$form_state){
     // 次のステップのフォームの用意
      $form =  drupal_rebuild_form( 'card_one_form', $form_state );
     // フォームのHTML部分の置換コマンド用意
      $commands[]=ajax_command_replace( '#block-system-main','<section class="block block-system clearfix" id="block-system-main">'.render($form).'</section>' );
    
      return array('#type' => 'ajax', '#commands' => $commands);
    }
    

     

drupal
development
form

やりたいこと:一つのURLで複数のステップフォームを作成したいです

  • 背景:Drupal7.54、FormAPIでマルチステップフォームの作成
  • FormAPIで簡単にフォームを作成します(例:Drupalの関数(drupal_get_form)を利用してFormAPIで作成したフォームを任意の場所でPHPに呼び出されることができます )
  • 一つのURLで複数のステップフォームを作成する要望があります

FormAPIでマルチステップフォーム作成の要点:「$form_state」でステップの定義、「form_submit()」関数内でステップの判別とフォームの再構築

  • FormAPIでマルチステップフォームを作成時に二つの要点ああります
  • 「$form_state」オブジェクトに任意のステップ識別変数を追加します(例:$form_state['pager'])
    • もちろん、$form_state['storage']の利用も可能です
    • 各ステップのフォームで識別文字列を定義します(例:$form_state['pager']='page_1')
  • 各ステップフォームの送信/次へボタンが押されたら、イベントをキャッチするform_submit()関数内でステップの判別、フォームの再構築を行います
    • ステップの判別: if($form_state['pager']=='page_1')
    • 次のステップのフォーム定義: $form_state['pager']=='page_2'
    • フォームの再構築: $form_state['rebuild']==TRUE
      DrupalのFormAPIでマルチステップフォームの要点
    • マルチステップのサンプルプログラム(送信ボタンを押すとステップ1とステップ2を交替で表示する)
      /**
       *  メニューでURLの定義
       */
      function your_module_menu() {
        $items['form/multiple-step'] = array(
            'title' => t('Multiple Step Form Test'),
            'page callback' => 'drupal_get_form',
            'page arguments' => array('multiple_step_form'),
            'access arguments' => array('access content'),
        );
        return $items;
      }
      
      /**
       *  マルチステップフォームの定義
       */
      function multiple_step_form($form, &$form_state){
      	switch( $form_state['pager'] ) {
              case  'page_1'  :
              return page_one_form();
              break;
      
              case  'page_2'  :
              return page_two_form();
              break;
      	}
      }
      
      /**
       *  ステップ1 フォームの定義
       */
      function page_one_form( $form, &$form_state ){
       // ステップの定義
        $form_state['pager'] = "page_1";
       // 任一のメッセージ表示
        $form['message_field'] = array(
            '#type' => 'markup',
            '#markup' => 'Form Step 1',
        );
        // サブミットボタン
        $form['submit'] = array(
            '#type' => 'submit',
            '#value' => '送信',
        );
       // サブミットボタンのイベントハンドラー
        $form['#submit'][] = 'page_one_form_submit';
      
        return $form;}
      }
      
      /**
       *  ステップ2 フォームの定義
       */
      function page_two_form( $form, &$form_state ){
        // ステップの定義
       $form_state['pager'] = "page_two";
       // 任一のメッセージ表示
        $form['test_form']=array(
            '#type' => 'item',
            '#title' => 'Multiple Step Form',
            '#markup' => '<p>Step 2</p>',
        );
       // サブミットボタン
        $form['submit'] = array(
            '#type' => 'submit',
            '#value' => '送信',
        );
       // サブミットボタンのイベントハンドラー
        $form['#submit'][] = 'page_two_form_submit';
        return $form;
      }
      
      /**
       *  ステップ1のボタンイベントハンドラー
       */
      function page_one_form_submit($form, &$form_state){
        $form_state['pager']['card_page']= "page_two";
        $form_state['rebuild'] = true;
        return ;
      }
      
      /**
       *  ステップ2のボタンイベントハンドラー
       */
      function page_two_form_submit($form, &$form_state){
        $form_state['pager']['card_page']= "page_one";
        $form_state['rebuild'] = true;
        return ;
      }

       
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 );

     

drupal
development
form
ajax

やりたいこと:DrupalのAJAXでマルチステップフォームを作成したいです

  • 背景:Drupal7.54、FormAPIのAJAXを利用して、マルチステップフォームの作成
  • FormAPIでマルチステップフォームの作成ができます(DrupalのFormAPIでマルチステップフォーム作成の基本 )
  • マルチステップフォームの作成には、AJAXの方が有利です
    • フォームHTMLの部分を置換すればよいので、全体的なページの更新必要はありません(パフォーマンスが良い)
    • AJAXがサーバーサイトとの交信URLが隠されています
    • DrupalのAJAXフレームワークを直接の利用で、簡単に実現できます(各ステップのフォームを直接に指定することができ、考え方が明確的)

DrupalのAJAXのdrupal_command_replace関数でフォームを置換してマルチステップフォームを作成します

  • DrupalのAJAXの利用は:Drupalのフォーム(FromAPI)でのajaxの実装 を参考してください
  • 各ステップのフォームがAJAXのコールバック関数内で定義しますので、FormAPIの実装方法より明確的になります
    DrupalのAJAXでマルチステップフォームの作成
  • AJAXで実装したマルチステップフォーム(ステップ1とステップ2の交替表示)例
    /**
     *  メニューでURLの定義
     */
    function your_module_menu() {
      $items['form/multiple-step'] = array(
          'title' => t('Multiple Step Form Test'),
          'page callback' => 'drupal_get_form',
          'page arguments' => array('page_one_form'),
          'access arguments' => array('access content'),
      );
      return $items;
    }
    
    /**
     *  ステップ1 フォームの定義
     */
    function page_one_form( $form, &$form_state ){
    
      $form['message_field'] = array(
          '#type' => 'markup',
          '#markup' => 'Form Step 1',
      );
      // サブミットボタン
      $form['submit'] = array(
          '#type' => 'submit',
          '#value' => '送信',
    	  '#ajax' => array(
            'callback' => 'card_1_ajax_callback',
          ),
      );
    
      return $form;}
    }
    
    /**
     *  ステップ2 フォームの定義
     */
    function page_two_form( $form, &$form_state ){
    
      $form['test_form']=array(
          '#type' => 'item',
          '#title' => 'Multiple Step Form',
          '#markup' => '<p>Step 2</p>',
      );
      $form['submit'] = array(
          '#type' => 'submit',
          '#value' => '送信',
    	  '#ajax' => array(
            'callback' => 'card_2_ajax_callback',
          ),
      );
    
      return $form;
    }
    
    /**
     *  ステップ1のコールバック関数
     */
    function card_1_ajax_callback($form, &$form_state){
     // 次のステップのフォームの用意
      $form =  drupal_rebuild_form( 'card_two_form', $form_state );
     // フォームのHTML部分の置換コマンド用意
      $commands[]=ajax_command_replace( '#block-system-main',
    		'<section class="block block-system clearfix" 
    				 id="block-system-main">'.render($form).'</section>' );
    
      return array('#type' => 'ajax', '#commands' => $commands);
    }
    
    /**
     *  ステップ2のコールバック関数
     */
    function card_2_ajax_callback($form, &$form_state){
     // 次のステップのフォームの用意
      $form =  drupal_rebuild_form( 'card_one_form', $form_state );
     // フォームのHTML部分の置換コマンド用意
      $commands[]=ajax_command_replace( '#block-system-main','<section class="block block-system clearfix" id="block-system-main">'.render($form).'</section>' );
    
      return array('#type' => 'ajax', '#commands' => $commands);
    }
    

     

drupal
development
form

やりたいこと:一つのURLで複数のステップフォームを作成したいです

  • 背景:Drupal7.54、FormAPIでマルチステップフォームの作成
  • FormAPIで簡単にフォームを作成します(例:Drupalの関数(drupal_get_form)を利用してFormAPIで作成したフォームを任意の場所でPHPに呼び出されることができます )
  • 一つのURLで複数のステップフォームを作成する要望があります

FormAPIでマルチステップフォーム作成の要点:「$form_state」でステップの定義、「form_submit()」関数内でステップの判別とフォームの再構築

  • FormAPIでマルチステップフォームを作成時に二つの要点ああります
  • 「$form_state」オブジェクトに任意のステップ識別変数を追加します(例:$form_state['pager'])
    • もちろん、$form_state['storage']の利用も可能です
    • 各ステップのフォームで識別文字列を定義します(例:$form_state['pager']='page_1')
  • 各ステップフォームの送信/次へボタンが押されたら、イベントをキャッチするform_submit()関数内でステップの判別、フォームの再構築を行います
    • ステップの判別: if($form_state['pager']=='page_1')
    • 次のステップのフォーム定義: $form_state['pager']=='page_2'
    • フォームの再構築: $form_state['rebuild']==TRUE
      DrupalのFormAPIでマルチステップフォームの要点
    • マルチステップのサンプルプログラム(送信ボタンを押すとステップ1とステップ2を交替で表示する)
      /**
       *  メニューでURLの定義
       */
      function your_module_menu() {
        $items['form/multiple-step'] = array(
            'title' => t('Multiple Step Form Test'),
            'page callback' => 'drupal_get_form',
            'page arguments' => array('multiple_step_form'),
            'access arguments' => array('access content'),
        );
        return $items;
      }
      
      /**
       *  マルチステップフォームの定義
       */
      function multiple_step_form($form, &$form_state){
      	switch( $form_state['pager'] ) {
              case  'page_1'  :
              return page_one_form();
              break;
      
              case  'page_2'  :
              return page_two_form();
              break;
      	}
      }
      
      /**
       *  ステップ1 フォームの定義
       */
      function page_one_form( $form, &$form_state ){
       // ステップの定義
        $form_state['pager'] = "page_1";
       // 任一のメッセージ表示
        $form['message_field'] = array(
            '#type' => 'markup',
            '#markup' => 'Form Step 1',
        );
        // サブミットボタン
        $form['submit'] = array(
            '#type' => 'submit',
            '#value' => '送信',
        );
       // サブミットボタンのイベントハンドラー
        $form['#submit'][] = 'page_one_form_submit';
      
        return $form;}
      }
      
      /**
       *  ステップ2 フォームの定義
       */
      function page_two_form( $form, &$form_state ){
        // ステップの定義
       $form_state['pager'] = "page_two";
       // 任一のメッセージ表示
        $form['test_form']=array(
            '#type' => 'item',
            '#title' => 'Multiple Step Form',
            '#markup' => '<p>Step 2</p>',
        );
       // サブミットボタン
        $form['submit'] = array(
            '#type' => 'submit',
            '#value' => '送信',
        );
       // サブミットボタンのイベントハンドラー
        $form['#submit'][] = 'page_two_form_submit';
        return $form;
      }
      
      /**
       *  ステップ1のボタンイベントハンドラー
       */
      function page_one_form_submit($form, &$form_state){
        $form_state['pager']['card_page']= "page_two";
        $form_state['rebuild'] = true;
        return ;
      }
      
      /**
       *  ステップ2のボタンイベントハンドラー
       */
      function page_two_form_submit($form, &$form_state){
        $form_state['pager']['card_page']= "page_one";
        $form_state['rebuild'] = true;
        return ;
      }

       
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 );

     

drupal
development
form
ajax

やりたいこと:DrupalのAJAXでマルチステップフォームを作成したいです

  • 背景:Drupal7.54、FormAPIのAJAXを利用して、マルチステップフォームの作成
  • FormAPIでマルチステップフォームの作成ができます(DrupalのFormAPIでマルチステップフォーム作成の基本 )
  • マルチステップフォームの作成には、AJAXの方が有利です
    • フォームHTMLの部分を置換すればよいので、全体的なページの更新必要はありません(パフォーマンスが良い)
    • AJAXがサーバーサイトとの交信URLが隠されています
    • DrupalのAJAXフレームワークを直接の利用で、簡単に実現できます(各ステップのフォームを直接に指定することができ、考え方が明確的)

DrupalのAJAXのdrupal_command_replace関数でフォームを置換してマルチステップフォームを作成します

  • DrupalのAJAXの利用は:Drupalのフォーム(FromAPI)でのajaxの実装 を参考してください
  • 各ステップのフォームがAJAXのコールバック関数内で定義しますので、FormAPIの実装方法より明確的になります
    DrupalのAJAXでマルチステップフォームの作成
  • AJAXで実装したマルチステップフォーム(ステップ1とステップ2の交替表示)例
    /**
     *  メニューでURLの定義
     */
    function your_module_menu() {
      $items['form/multiple-step'] = array(
          'title' => t('Multiple Step Form Test'),
          'page callback' => 'drupal_get_form',
          'page arguments' => array('page_one_form'),
          'access arguments' => array('access content'),
      );
      return $items;
    }
    
    /**
     *  ステップ1 フォームの定義
     */
    function page_one_form( $form, &$form_state ){
    
      $form['message_field'] = array(
          '#type' => 'markup',
          '#markup' => 'Form Step 1',
      );
      // サブミットボタン
      $form['submit'] = array(
          '#type' => 'submit',
          '#value' => '送信',
    	  '#ajax' => array(
            'callback' => 'card_1_ajax_callback',
          ),
      );
    
      return $form;}
    }
    
    /**
     *  ステップ2 フォームの定義
     */
    function page_two_form( $form, &$form_state ){
    
      $form['test_form']=array(
          '#type' => 'item',
          '#title' => 'Multiple Step Form',
          '#markup' => '<p>Step 2</p>',
      );
      $form['submit'] = array(
          '#type' => 'submit',
          '#value' => '送信',
    	  '#ajax' => array(
            'callback' => 'card_2_ajax_callback',
          ),
      );
    
      return $form;
    }
    
    /**
     *  ステップ1のコールバック関数
     */
    function card_1_ajax_callback($form, &$form_state){
     // 次のステップのフォームの用意
      $form =  drupal_rebuild_form( 'card_two_form', $form_state );
     // フォームのHTML部分の置換コマンド用意
      $commands[]=ajax_command_replace( '#block-system-main',
    		'<section class="block block-system clearfix" 
    				 id="block-system-main">'.render($form).'</section>' );
    
      return array('#type' => 'ajax', '#commands' => $commands);
    }
    
    /**
     *  ステップ2のコールバック関数
     */
    function card_2_ajax_callback($form, &$form_state){
     // 次のステップのフォームの用意
      $form =  drupal_rebuild_form( 'card_one_form', $form_state );
     // フォームのHTML部分の置換コマンド用意
      $commands[]=ajax_command_replace( '#block-system-main','<section class="block block-system clearfix" id="block-system-main">'.render($form).'</section>' );
    
      return array('#type' => 'ajax', '#commands' => $commands);
    }
    

     

drupal
development
form

やりたいこと:一つのURLで複数のステップフォームを作成したいです

  • 背景:Drupal7.54、FormAPIでマルチステップフォームの作成
  • FormAPIで簡単にフォームを作成します(例:Drupalの関数(drupal_get_form)を利用してFormAPIで作成したフォームを任意の場所でPHPに呼び出されることができます )
  • 一つのURLで複数のステップフォームを作成する要望があります

FormAPIでマルチステップフォーム作成の要点:「$form_state」でステップの定義、「form_submit()」関数内でステップの判別とフォームの再構築

  • FormAPIでマルチステップフォームを作成時に二つの要点ああります
  • 「$form_state」オブジェクトに任意のステップ識別変数を追加します(例:$form_state['pager'])
    • もちろん、$form_state['storage']の利用も可能です
    • 各ステップのフォームで識別文字列を定義します(例:$form_state['pager']='page_1')
  • 各ステップフォームの送信/次へボタンが押されたら、イベントをキャッチするform_submit()関数内でステップの判別、フォームの再構築を行います
    • ステップの判別: if($form_state['pager']=='page_1')
    • 次のステップのフォーム定義: $form_state['pager']=='page_2'
    • フォームの再構築: $form_state['rebuild']==TRUE
      DrupalのFormAPIでマルチステップフォームの要点
    • マルチステップのサンプルプログラム(送信ボタンを押すとステップ1とステップ2を交替で表示する)
      /**
       *  メニューでURLの定義
       */
      function your_module_menu() {
        $items['form/multiple-step'] = array(
            'title' => t('Multiple Step Form Test'),
            'page callback' => 'drupal_get_form',
            'page arguments' => array('multiple_step_form'),
            'access arguments' => array('access content'),
        );
        return $items;
      }
      
      /**
       *  マルチステップフォームの定義
       */
      function multiple_step_form($form, &$form_state){
      	switch( $form_state['pager'] ) {
              case  'page_1'  :
              return page_one_form();
              break;
      
              case  'page_2'  :
              return page_two_form();
              break;
      	}
      }
      
      /**
       *  ステップ1 フォームの定義
       */
      function page_one_form( $form, &$form_state ){
       // ステップの定義
        $form_state['pager'] = "page_1";
       // 任一のメッセージ表示
        $form['message_field'] = array(
            '#type' => 'markup',
            '#markup' => 'Form Step 1',
        );
        // サブミットボタン
        $form['submit'] = array(
            '#type' => 'submit',
            '#value' => '送信',
        );
       // サブミットボタンのイベントハンドラー
        $form['#submit'][] = 'page_one_form_submit';
      
        return $form;}
      }
      
      /**
       *  ステップ2 フォームの定義
       */
      function page_two_form( $form, &$form_state ){
        // ステップの定義
       $form_state['pager'] = "page_two";
       // 任一のメッセージ表示
        $form['test_form']=array(
            '#type' => 'item',
            '#title' => 'Multiple Step Form',
            '#markup' => '<p>Step 2</p>',
        );
       // サブミットボタン
        $form['submit'] = array(
            '#type' => 'submit',
            '#value' => '送信',
        );
       // サブミットボタンのイベントハンドラー
        $form['#submit'][] = 'page_two_form_submit';
        return $form;
      }
      
      /**
       *  ステップ1のボタンイベントハンドラー
       */
      function page_one_form_submit($form, &$form_state){
        $form_state['pager']['card_page']= "page_two";
        $form_state['rebuild'] = true;
        return ;
      }
      
      /**
       *  ステップ2のボタンイベントハンドラー
       */
      function page_two_form_submit($form, &$form_state){
        $form_state['pager']['card_page']= "page_one";
        $form_state['rebuild'] = true;
        return ;
      }

       
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 );

     

drupal
development
form
ajax

やりたいこと:DrupalのAJAXでマルチステップフォームを作成したいです

  • 背景:Drupal7.54、FormAPIのAJAXを利用して、マルチステップフォームの作成
  • FormAPIでマルチステップフォームの作成ができます(DrupalのFormAPIでマルチステップフォーム作成の基本 )
  • マルチステップフォームの作成には、AJAXの方が有利です
    • フォームHTMLの部分を置換すればよいので、全体的なページの更新必要はありません(パフォーマンスが良い)
    • AJAXがサーバーサイトとの交信URLが隠されています
    • DrupalのAJAXフレームワークを直接の利用で、簡単に実現できます(各ステップのフォームを直接に指定することができ、考え方が明確的)

DrupalのAJAXのdrupal_command_replace関数でフォームを置換してマルチステップフォームを作成します

  • DrupalのAJAXの利用は:Drupalのフォーム(FromAPI)でのajaxの実装 を参考してください
  • 各ステップのフォームがAJAXのコールバック関数内で定義しますので、FormAPIの実装方法より明確的になります
    DrupalのAJAXでマルチステップフォームの作成
  • AJAXで実装したマルチステップフォーム(ステップ1とステップ2の交替表示)例
    /**
     *  メニューでURLの定義
     */
    function your_module_menu() {
      $items['form/multiple-step'] = array(
          'title' => t('Multiple Step Form Test'),
          'page callback' => 'drupal_get_form',
          'page arguments' => array('page_one_form'),
          'access arguments' => array('access content'),
      );
      return $items;
    }
    
    /**
     *  ステップ1 フォームの定義
     */
    function page_one_form( $form, &$form_state ){
    
      $form['message_field'] = array(
          '#type' => 'markup',
          '#markup' => 'Form Step 1',
      );
      // サブミットボタン
      $form['submit'] = array(
          '#type' => 'submit',
          '#value' => '送信',
    	  '#ajax' => array(
            'callback' => 'card_1_ajax_callback',
          ),
      );
    
      return $form;}
    }
    
    /**
     *  ステップ2 フォームの定義
     */
    function page_two_form( $form, &$form_state ){
    
      $form['test_form']=array(
          '#type' => 'item',
          '#title' => 'Multiple Step Form',
          '#markup' => '<p>Step 2</p>',
      );
      $form['submit'] = array(
          '#type' => 'submit',
          '#value' => '送信',
    	  '#ajax' => array(
            'callback' => 'card_2_ajax_callback',
          ),
      );
    
      return $form;
    }
    
    /**
     *  ステップ1のコールバック関数
     */
    function card_1_ajax_callback($form, &$form_state){
     // 次のステップのフォームの用意
      $form =  drupal_rebuild_form( 'card_two_form', $form_state );
     // フォームのHTML部分の置換コマンド用意
      $commands[]=ajax_command_replace( '#block-system-main',
    		'<section class="block block-system clearfix" 
    				 id="block-system-main">'.render($form).'</section>' );
    
      return array('#type' => 'ajax', '#commands' => $commands);
    }
    
    /**
     *  ステップ2のコールバック関数
     */
    function card_2_ajax_callback($form, &$form_state){
     // 次のステップのフォームの用意
      $form =  drupal_rebuild_form( 'card_one_form', $form_state );
     // フォームのHTML部分の置換コマンド用意
      $commands[]=ajax_command_replace( '#block-system-main','<section class="block block-system clearfix" id="block-system-main">'.render($form).'</section>' );
    
      return array('#type' => 'ajax', '#commands' => $commands);
    }
    

     

drupal
development
form

やりたいこと:一つのURLで複数のステップフォームを作成したいです

  • 背景:Drupal7.54、FormAPIでマルチステップフォームの作成
  • FormAPIで簡単にフォームを作成します(例:Drupalの関数(drupal_get_form)を利用してFormAPIで作成したフォームを任意の場所でPHPに呼び出されることができます )
  • 一つのURLで複数のステップフォームを作成する要望があります

FormAPIでマルチステップフォーム作成の要点:「$form_state」でステップの定義、「form_submit()」関数内でステップの判別とフォームの再構築

  • FormAPIでマルチステップフォームを作成時に二つの要点ああります
  • 「$form_state」オブジェクトに任意のステップ識別変数を追加します(例:$form_state['pager'])
    • もちろん、$form_state['storage']の利用も可能です
    • 各ステップのフォームで識別文字列を定義します(例:$form_state['pager']='page_1')
  • 各ステップフォームの送信/次へボタンが押されたら、イベントをキャッチするform_submit()関数内でステップの判別、フォームの再構築を行います
    • ステップの判別: if($form_state['pager']=='page_1')
    • 次のステップのフォーム定義: $form_state['pager']=='page_2'
    • フォームの再構築: $form_state['rebuild']==TRUE
      DrupalのFormAPIでマルチステップフォームの要点
    • マルチステップのサンプルプログラム(送信ボタンを押すとステップ1とステップ2を交替で表示する)
      /**
       *  メニューでURLの定義
       */
      function your_module_menu() {
        $items['form/multiple-step'] = array(
            'title' => t('Multiple Step Form Test'),
            'page callback' => 'drupal_get_form',
            'page arguments' => array('multiple_step_form'),
            'access arguments' => array('access content'),
        );
        return $items;
      }
      
      /**
       *  マルチステップフォームの定義
       */
      function multiple_step_form($form, &$form_state){
      	switch( $form_state['pager'] ) {
              case  'page_1'  :
              return page_one_form();
              break;
      
              case  'page_2'  :
              return page_two_form();
              break;
      	}
      }
      
      /**
       *  ステップ1 フォームの定義
       */
      function page_one_form( $form, &$form_state ){
       // ステップの定義
        $form_state['pager'] = "page_1";
       // 任一のメッセージ表示
        $form['message_field'] = array(
            '#type' => 'markup',
            '#markup' => 'Form Step 1',
        );
        // サブミットボタン
        $form['submit'] = array(
            '#type' => 'submit',
            '#value' => '送信',
        );
       // サブミットボタンのイベントハンドラー
        $form['#submit'][] = 'page_one_form_submit';
      
        return $form;}
      }
      
      /**
       *  ステップ2 フォームの定義
       */
      function page_two_form( $form, &$form_state ){
        // ステップの定義
       $form_state['pager'] = "page_two";
       // 任一のメッセージ表示
        $form['test_form']=array(
            '#type' => 'item',
            '#title' => 'Multiple Step Form',
            '#markup' => '<p>Step 2</p>',
        );
       // サブミットボタン
        $form['submit'] = array(
            '#type' => 'submit',
            '#value' => '送信',
        );
       // サブミットボタンのイベントハンドラー
        $form['#submit'][] = 'page_two_form_submit';
        return $form;
      }
      
      /**
       *  ステップ1のボタンイベントハンドラー
       */
      function page_one_form_submit($form, &$form_state){
        $form_state['pager']['card_page']= "page_two";
        $form_state['rebuild'] = true;
        return ;
      }
      
      /**
       *  ステップ2のボタンイベントハンドラー
       */
      function page_two_form_submit($form, &$form_state){
        $form_state['pager']['card_page']= "page_one";
        $form_state['rebuild'] = true;
        return ;
      }

       
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 );

     

drupal
development
form
ajax

やりたいこと:DrupalのAJAXでマルチステップフォームを作成したいです

  • 背景:Drupal7.54、FormAPIのAJAXを利用して、マルチステップフォームの作成
  • FormAPIでマルチステップフォームの作成ができます(DrupalのFormAPIでマルチステップフォーム作成の基本 )
  • マルチステップフォームの作成には、AJAXの方が有利です
    • フォームHTMLの部分を置換すればよいので、全体的なページの更新必要はありません(パフォーマンスが良い)
    • AJAXがサーバーサイトとの交信URLが隠されています
    • DrupalのAJAXフレームワークを直接の利用で、簡単に実現できます(各ステップのフォームを直接に指定することができ、考え方が明確的)

DrupalのAJAXのdrupal_command_replace関数でフォームを置換してマルチステップフォームを作成します

  • DrupalのAJAXの利用は:Drupalのフォーム(FromAPI)でのajaxの実装 を参考してください
  • 各ステップのフォームがAJAXのコールバック関数内で定義しますので、FormAPIの実装方法より明確的になります
    DrupalのAJAXでマルチステップフォームの作成
  • AJAXで実装したマルチステップフォーム(ステップ1とステップ2の交替表示)例
    /**
     *  メニューでURLの定義
     */
    function your_module_menu() {
      $items['form/multiple-step'] = array(
          'title' => t('Multiple Step Form Test'),
          'page callback' => 'drupal_get_form',
          'page arguments' => array('page_one_form'),
          'access arguments' => array('access content'),
      );
      return $items;
    }
    
    /**
     *  ステップ1 フォームの定義
     */
    function page_one_form( $form, &$form_state ){
    
      $form['message_field'] = array(
          '#type' => 'markup',
          '#markup' => 'Form Step 1',
      );
      // サブミットボタン
      $form['submit'] = array(
          '#type' => 'submit',
          '#value' => '送信',
    	  '#ajax' => array(
            'callback' => 'card_1_ajax_callback',
          ),
      );
    
      return $form;}
    }
    
    /**
     *  ステップ2 フォームの定義
     */
    function page_two_form( $form, &$form_state ){
    
      $form['test_form']=array(
          '#type' => 'item',
          '#title' => 'Multiple Step Form',
          '#markup' => '<p>Step 2</p>',
      );
      $form['submit'] = array(
          '#type' => 'submit',
          '#value' => '送信',
    	  '#ajax' => array(
            'callback' => 'card_2_ajax_callback',
          ),
      );
    
      return $form;
    }
    
    /**
     *  ステップ1のコールバック関数
     */
    function card_1_ajax_callback($form, &$form_state){
     // 次のステップのフォームの用意
      $form =  drupal_rebuild_form( 'card_two_form', $form_state );
     // フォームのHTML部分の置換コマンド用意
      $commands[]=ajax_command_replace( '#block-system-main',
    		'<section class="block block-system clearfix" 
    				 id="block-system-main">'.render($form).'</section>' );
    
      return array('#type' => 'ajax', '#commands' => $commands);
    }
    
    /**
     *  ステップ2のコールバック関数
     */
    function card_2_ajax_callback($form, &$form_state){
     // 次のステップのフォームの用意
      $form =  drupal_rebuild_form( 'card_one_form', $form_state );
     // フォームのHTML部分の置換コマンド用意
      $commands[]=ajax_command_replace( '#block-system-main','<section class="block block-system clearfix" id="block-system-main">'.render($form).'</section>' );
    
      return array('#type' => 'ajax', '#commands' => $commands);
    }
    

     

drupal
development
form

やりたいこと:一つのURLで複数のステップフォームを作成したいです

  • 背景:Drupal7.54、FormAPIでマルチステップフォームの作成
  • FormAPIで簡単にフォームを作成します(例:Drupalの関数(drupal_get_form)を利用してFormAPIで作成したフォームを任意の場所でPHPに呼び出されることができます )
  • 一つのURLで複数のステップフォームを作成する要望があります

FormAPIでマルチステップフォーム作成の要点:「$form_state」でステップの定義、「form_submit()」関数内でステップの判別とフォームの再構築

  • FormAPIでマルチステップフォームを作成時に二つの要点ああります
  • 「$form_state」オブジェクトに任意のステップ識別変数を追加します(例:$form_state['pager'])
    • もちろん、$form_state['storage']の利用も可能です
    • 各ステップのフォームで識別文字列を定義します(例:$form_state['pager']='page_1')
  • 各ステップフォームの送信/次へボタンが押されたら、イベントをキャッチするform_submit()関数内でステップの判別、フォームの再構築を行います
    • ステップの判別: if($form_state['pager']=='page_1')
    • 次のステップのフォーム定義: $form_state['pager']=='page_2'
    • フォームの再構築: $form_state['rebuild']==TRUE
      DrupalのFormAPIでマルチステップフォームの要点
    • マルチステップのサンプルプログラム(送信ボタンを押すとステップ1とステップ2を交替で表示する)
      /**
       *  メニューでURLの定義
       */
      function your_module_menu() {
        $items['form/multiple-step'] = array(
            'title' => t('Multiple Step Form Test'),
            'page callback' => 'drupal_get_form',
            'page arguments' => array('multiple_step_form'),
            'access arguments' => array('access content'),
        );
        return $items;
      }
      
      /**
       *  マルチステップフォームの定義
       */
      function multiple_step_form($form, &$form_state){
      	switch( $form_state['pager'] ) {
              case  'page_1'  :
              return page_one_form();
              break;
      
              case  'page_2'  :
              return page_two_form();
              break;
      	}
      }
      
      /**
       *  ステップ1 フォームの定義
       */
      function page_one_form( $form, &$form_state ){
       // ステップの定義
        $form_state['pager'] = "page_1";
       // 任一のメッセージ表示
        $form['message_field'] = array(
            '#type' => 'markup',
            '#markup' => 'Form Step 1',
        );
        // サブミットボタン
        $form['submit'] = array(
            '#type' => 'submit',
            '#value' => '送信',
        );
       // サブミットボタンのイベントハンドラー
        $form['#submit'][] = 'page_one_form_submit';
      
        return $form;}
      }
      
      /**
       *  ステップ2 フォームの定義
       */
      function page_two_form( $form, &$form_state ){
        // ステップの定義
       $form_state['pager'] = "page_two";
       // 任一のメッセージ表示
        $form['test_form']=array(
            '#type' => 'item',
            '#title' => 'Multiple Step Form',
            '#markup' => '<p>Step 2</p>',
        );
       // サブミットボタン
        $form['submit'] = array(
            '#type' => 'submit',
            '#value' => '送信',
        );
       // サブミットボタンのイベントハンドラー
        $form['#submit'][] = 'page_two_form_submit';
        return $form;
      }
      
      /**
       *  ステップ1のボタンイベントハンドラー
       */
      function page_one_form_submit($form, &$form_state){
        $form_state['pager']['card_page']= "page_two";
        $form_state['rebuild'] = true;
        return ;
      }
      
      /**
       *  ステップ2のボタンイベントハンドラー
       */
      function page_two_form_submit($form, &$form_state){
        $form_state['pager']['card_page']= "page_one";
        $form_state['rebuild'] = true;
        return ;
      }

       
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 );

     

drupal
development
form
ajax

やりたいこと:DrupalのAJAXでマルチステップフォームを作成したいです

  • 背景:Drupal7.54、FormAPIのAJAXを利用して、マルチステップフォームの作成
  • FormAPIでマルチステップフォームの作成ができます(DrupalのFormAPIでマルチステップフォーム作成の基本 )
  • マルチステップフォームの作成には、AJAXの方が有利です
    • フォームHTMLの部分を置換すればよいので、全体的なページの更新必要はありません(パフォーマンスが良い)
    • AJAXがサーバーサイトとの交信URLが隠されています
    • DrupalのAJAXフレームワークを直接の利用で、簡単に実現できます(各ステップのフォームを直接に指定することができ、考え方が明確的)

DrupalのAJAXのdrupal_command_replace関数でフォームを置換してマルチステップフォームを作成します

  • DrupalのAJAXの利用は:Drupalのフォーム(FromAPI)でのajaxの実装 を参考してください
  • 各ステップのフォームがAJAXのコールバック関数内で定義しますので、FormAPIの実装方法より明確的になります
    DrupalのAJAXでマルチステップフォームの作成
  • AJAXで実装したマルチステップフォーム(ステップ1とステップ2の交替表示)例
    /**
     *  メニューでURLの定義
     */
    function your_module_menu() {
      $items['form/multiple-step'] = array(
          'title' => t('Multiple Step Form Test'),
          'page callback' => 'drupal_get_form',
          'page arguments' => array('page_one_form'),
          'access arguments' => array('access content'),
      );
      return $items;
    }
    
    /**
     *  ステップ1 フォームの定義
     */
    function page_one_form( $form, &$form_state ){
    
      $form['message_field'] = array(
          '#type' => 'markup',
          '#markup' => 'Form Step 1',
      );
      // サブミットボタン
      $form['submit'] = array(
          '#type' => 'submit',
          '#value' => '送信',
    	  '#ajax' => array(
            'callback' => 'card_1_ajax_callback',
          ),
      );
    
      return $form;}
    }
    
    /**
     *  ステップ2 フォームの定義
     */
    function page_two_form( $form, &$form_state ){
    
      $form['test_form']=array(
          '#type' => 'item',
          '#title' => 'Multiple Step Form',
          '#markup' => '<p>Step 2</p>',
      );
      $form['submit'] = array(
          '#type' => 'submit',
          '#value' => '送信',
    	  '#ajax' => array(
            'callback' => 'card_2_ajax_callback',
          ),
      );
    
      return $form;
    }
    
    /**
     *  ステップ1のコールバック関数
     */
    function card_1_ajax_callback($form, &$form_state){
     // 次のステップのフォームの用意
      $form =  drupal_rebuild_form( 'card_two_form', $form_state );
     // フォームのHTML部分の置換コマンド用意
      $commands[]=ajax_command_replace( '#block-system-main',
    		'<section class="block block-system clearfix" 
    				 id="block-system-main">'.render($form).'</section>' );
    
      return array('#type' => 'ajax', '#commands' => $commands);
    }
    
    /**
     *  ステップ2のコールバック関数
     */
    function card_2_ajax_callback($form, &$form_state){
     // 次のステップのフォームの用意
      $form =  drupal_rebuild_form( 'card_one_form', $form_state );
     // フォームのHTML部分の置換コマンド用意
      $commands[]=ajax_command_replace( '#block-system-main','<section class="block block-system clearfix" id="block-system-main">'.render($form).'</section>' );
    
      return array('#type' => 'ajax', '#commands' => $commands);
    }
    

     

drupal
development
form

やりたいこと:一つのURLで複数のステップフォームを作成したいです

  • 背景:Drupal7.54、FormAPIでマルチステップフォームの作成
  • FormAPIで簡単にフォームを作成します(例:Drupalの関数(drupal_get_form)を利用してFormAPIで作成したフォームを任意の場所でPHPに呼び出されることができます )
  • 一つのURLで複数のステップフォームを作成する要望があります

FormAPIでマルチステップフォーム作成の要点:「$form_state」でステップの定義、「form_submit()」関数内でステップの判別とフォームの再構築

  • FormAPIでマルチステップフォームを作成時に二つの要点ああります
  • 「$form_state」オブジェクトに任意のステップ識別変数を追加します(例:$form_state['pager'])
    • もちろん、$form_state['storage']の利用も可能です
    • 各ステップのフォームで識別文字列を定義します(例:$form_state['pager']='page_1')
  • 各ステップフォームの送信/次へボタンが押されたら、イベントをキャッチするform_submit()関数内でステップの判別、フォームの再構築を行います
    • ステップの判別: if($form_state['pager']=='page_1')
    • 次のステップのフォーム定義: $form_state['pager']=='page_2'
    • フォームの再構築: $form_state['rebuild']==TRUE
      DrupalのFormAPIでマルチステップフォームの要点
    • マルチステップのサンプルプログラム(送信ボタンを押すとステップ1とステップ2を交替で表示する)
      /**
       *  メニューでURLの定義
       */
      function your_module_menu() {
        $items['form/multiple-step'] = array(
            'title' => t('Multiple Step Form Test'),
            'page callback' => 'drupal_get_form',
            'page arguments' => array('multiple_step_form'),
            'access arguments' => array('access content'),
        );
        return $items;
      }
      
      /**
       *  マルチステップフォームの定義
       */
      function multiple_step_form($form, &$form_state){
      	switch( $form_state['pager'] ) {
              case  'page_1'  :
              return page_one_form();
              break;
      
              case  'page_2'  :
              return page_two_form();
              break;
      	}
      }
      
      /**
       *  ステップ1 フォームの定義
       */
      function page_one_form( $form, &$form_state ){
       // ステップの定義
        $form_state['pager'] = "page_1";
       // 任一のメッセージ表示
        $form['message_field'] = array(
            '#type' => 'markup',
            '#markup' => 'Form Step 1',
        );
        // サブミットボタン
        $form['submit'] = array(
            '#type' => 'submit',
            '#value' => '送信',
        );
       // サブミットボタンのイベントハンドラー
        $form['#submit'][] = 'page_one_form_submit';
      
        return $form;}
      }
      
      /**
       *  ステップ2 フォームの定義
       */
      function page_two_form( $form, &$form_state ){
        // ステップの定義
       $form_state['pager'] = "page_two";
       // 任一のメッセージ表示
        $form['test_form']=array(
            '#type' => 'item',
            '#title' => 'Multiple Step Form',
            '#markup' => '<p>Step 2</p>',
        );
       // サブミットボタン
        $form['submit'] = array(
            '#type' => 'submit',
            '#value' => '送信',
        );
       // サブミットボタンのイベントハンドラー
        $form['#submit'][] = 'page_two_form_submit';
        return $form;
      }
      
      /**
       *  ステップ1のボタンイベントハンドラー
       */
      function page_one_form_submit($form, &$form_state){
        $form_state['pager']['card_page']= "page_two";
        $form_state['rebuild'] = true;
        return ;
      }
      
      /**
       *  ステップ2のボタンイベントハンドラー
       */
      function page_two_form_submit($form, &$form_state){
        $form_state['pager']['card_page']= "page_one";
        $form_state['rebuild'] = true;
        return ;
      }

       
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 );

     

drupal
development
form
ajax

やりたいこと:DrupalのAJAXでマルチステップフォームを作成したいです

  • 背景:Drupal7.54、FormAPIのAJAXを利用して、マルチステップフォームの作成
  • FormAPIでマルチステップフォームの作成ができます(DrupalのFormAPIでマルチステップフォーム作成の基本 )
  • マルチステップフォームの作成には、AJAXの方が有利です
    • フォームHTMLの部分を置換すればよいので、全体的なページの更新必要はありません(パフォーマンスが良い)
    • AJAXがサーバーサイトとの交信URLが隠されています
    • DrupalのAJAXフレームワークを直接の利用で、簡単に実現できます(各ステップのフォームを直接に指定することができ、考え方が明確的)

DrupalのAJAXのdrupal_command_replace関数でフォームを置換してマルチステップフォームを作成します

  • DrupalのAJAXの利用は:Drupalのフォーム(FromAPI)でのajaxの実装 を参考してください
  • 各ステップのフォームがAJAXのコールバック関数内で定義しますので、FormAPIの実装方法より明確的になります
    DrupalのAJAXでマルチステップフォームの作成
  • AJAXで実装したマルチステップフォーム(ステップ1とステップ2の交替表示)例
    /**
     *  メニューでURLの定義
     */
    function your_module_menu() {
      $items['form/multiple-step'] = array(
          'title' => t('Multiple Step Form Test'),
          'page callback' => 'drupal_get_form',
          'page arguments' => array('page_one_form'),
          'access arguments' => array('access content'),
      );
      return $items;
    }
    
    /**
     *  ステップ1 フォームの定義
     */
    function page_one_form( $form, &$form_state ){
    
      $form['message_field'] = array(
          '#type' => 'markup',
          '#markup' => 'Form Step 1',
      );
      // サブミットボタン
      $form['submit'] = array(
          '#type' => 'submit',
          '#value' => '送信',
    	  '#ajax' => array(
            'callback' => 'card_1_ajax_callback',
          ),
      );
    
      return $form;}
    }
    
    /**
     *  ステップ2 フォームの定義
     */
    function page_two_form( $form, &$form_state ){
    
      $form['test_form']=array(
          '#type' => 'item',
          '#title' => 'Multiple Step Form',
          '#markup' => '<p>Step 2</p>',
      );
      $form['submit'] = array(
          '#type' => 'submit',
          '#value' => '送信',
    	  '#ajax' => array(
            'callback' => 'card_2_ajax_callback',
          ),
      );
    
      return $form;
    }
    
    /**
     *  ステップ1のコールバック関数
     */
    function card_1_ajax_callback($form, &$form_state){
     // 次のステップのフォームの用意
      $form =  drupal_rebuild_form( 'card_two_form', $form_state );
     // フォームのHTML部分の置換コマンド用意
      $commands[]=ajax_command_replace( '#block-system-main',
    		'<section class="block block-system clearfix" 
    				 id="block-system-main">'.render($form).'</section>' );
    
      return array('#type' => 'ajax', '#commands' => $commands);
    }
    
    /**
     *  ステップ2のコールバック関数
     */
    function card_2_ajax_callback($form, &$form_state){
     // 次のステップのフォームの用意
      $form =  drupal_rebuild_form( 'card_one_form', $form_state );
     // フォームのHTML部分の置換コマンド用意
      $commands[]=ajax_command_replace( '#block-system-main','<section class="block block-system clearfix" id="block-system-main">'.render($form).'</section>' );
    
      return array('#type' => 'ajax', '#commands' => $commands);
    }
    

     

drupal
development
form

やりたいこと:一つのURLで複数のステップフォームを作成したいです

  • 背景:Drupal7.54、FormAPIでマルチステップフォームの作成
  • FormAPIで簡単にフォームを作成します(例:Drupalの関数(drupal_get_form)を利用してFormAPIで作成したフォームを任意の場所でPHPに呼び出されることができます )
  • 一つのURLで複数のステップフォームを作成する要望があります

FormAPIでマルチステップフォーム作成の要点:「$form_state」でステップの定義、「form_submit()」関数内でステップの判別とフォームの再構築

  • FormAPIでマルチステップフォームを作成時に二つの要点ああります
  • 「$form_state」オブジェクトに任意のステップ識別変数を追加します(例:$form_state['pager'])
    • もちろん、$form_state['storage']の利用も可能です
    • 各ステップのフォームで識別文字列を定義します(例:$form_state['pager']='page_1')
  • 各ステップフォームの送信/次へボタンが押されたら、イベントをキャッチするform_submit()関数内でステップの判別、フォームの再構築を行います
    • ステップの判別: if($form_state['pager']=='page_1')
    • 次のステップのフォーム定義: $form_state['pager']=='page_2'
    • フォームの再構築: $form_state['rebuild']==TRUE
      DrupalのFormAPIでマルチステップフォームの要点
    • マルチステップのサンプルプログラム(送信ボタンを押すとステップ1とステップ2を交替で表示する)
      /**
       *  メニューでURLの定義
       */
      function your_module_menu() {
        $items['form/multiple-step'] = array(
            'title' => t('Multiple Step Form Test'),
            'page callback' => 'drupal_get_form',
            'page arguments' => array('multiple_step_form'),
            'access arguments' => array('access content'),
        );
        return $items;
      }
      
      /**
       *  マルチステップフォームの定義
       */
      function multiple_step_form($form, &$form_state){
      	switch( $form_state['pager'] ) {
              case  'page_1'  :
              return page_one_form();
              break;
      
              case  'page_2'  :
              return page_two_form();
              break;
      	}
      }
      
      /**
       *  ステップ1 フォームの定義
       */
      function page_one_form( $form, &$form_state ){
       // ステップの定義
        $form_state['pager'] = "page_1";
       // 任一のメッセージ表示
        $form['message_field'] = array(
            '#type' => 'markup',
            '#markup' => 'Form Step 1',
        );
        // サブミットボタン
        $form['submit'] = array(
            '#type' => 'submit',
            '#value' => '送信',
        );
       // サブミットボタンのイベントハンドラー
        $form['#submit'][] = 'page_one_form_submit';
      
        return $form;}
      }
      
      /**
       *  ステップ2 フォームの定義
       */
      function page_two_form( $form, &$form_state ){
        // ステップの定義
       $form_state['pager'] = "page_two";
       // 任一のメッセージ表示
        $form['test_form']=array(
            '#type' => 'item',
            '#title' => 'Multiple Step Form',
            '#markup' => '<p>Step 2</p>',
        );
       // サブミットボタン
        $form['submit'] = array(
            '#type' => 'submit',
            '#value' => '送信',
        );
       // サブミットボタンのイベントハンドラー
        $form['#submit'][] = 'page_two_form_submit';
        return $form;
      }
      
      /**
       *  ステップ1のボタンイベントハンドラー
       */
      function page_one_form_submit($form, &$form_state){
        $form_state['pager']['card_page']= "page_two";
        $form_state['rebuild'] = true;
        return ;
      }
      
      /**
       *  ステップ2のボタンイベントハンドラー
       */
      function page_two_form_submit($form, &$form_state){
        $form_state['pager']['card_page']= "page_one";
        $form_state['rebuild'] = true;
        return ;
      }

       
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 );

     

drupal
development
form
ajax

やりたいこと:DrupalのAJAXでマルチステップフォームを作成したいです

  • 背景:Drupal7.54、FormAPIのAJAXを利用して、マルチステップフォームの作成
  • FormAPIでマルチステップフォームの作成ができます(DrupalのFormAPIでマルチステップフォーム作成の基本 )
  • マルチステップフォームの作成には、AJAXの方が有利です
    • フォームHTMLの部分を置換すればよいので、全体的なページの更新必要はありません(パフォーマンスが良い)
    • AJAXがサーバーサイトとの交信URLが隠されています
    • DrupalのAJAXフレームワークを直接の利用で、簡単に実現できます(各ステップのフォームを直接に指定することができ、考え方が明確的)

DrupalのAJAXのdrupal_command_replace関数でフォームを置換してマルチステップフォームを作成します

  • DrupalのAJAXの利用は:Drupalのフォーム(FromAPI)でのajaxの実装 を参考してください
  • 各ステップのフォームがAJAXのコールバック関数内で定義しますので、FormAPIの実装方法より明確的になります
    DrupalのAJAXでマルチステップフォームの作成
  • AJAXで実装したマルチステップフォーム(ステップ1とステップ2の交替表示)例
    /**
     *  メニューでURLの定義
     */
    function your_module_menu() {
      $items['form/multiple-step'] = array(
          'title' => t('Multiple Step Form Test'),
          'page callback' => 'drupal_get_form',
          'page arguments' => array('page_one_form'),
          'access arguments' => array('access content'),
      );
      return $items;
    }
    
    /**
     *  ステップ1 フォームの定義
     */
    function page_one_form( $form, &$form_state ){
    
      $form['message_field'] = array(
          '#type' => 'markup',
          '#markup' => 'Form Step 1',
      );
      // サブミットボタン
      $form['submit'] = array(
          '#type' => 'submit',
          '#value' => '送信',
    	  '#ajax' => array(
            'callback' => 'card_1_ajax_callback',
          ),
      );
    
      return $form;}
    }
    
    /**
     *  ステップ2 フォームの定義
     */
    function page_two_form( $form, &$form_state ){
    
      $form['test_form']=array(
          '#type' => 'item',
          '#title' => 'Multiple Step Form',
          '#markup' => '<p>Step 2</p>',
      );
      $form['submit'] = array(
          '#type' => 'submit',
          '#value' => '送信',
    	  '#ajax' => array(
            'callback' => 'card_2_ajax_callback',
          ),
      );
    
      return $form;
    }
    
    /**
     *  ステップ1のコールバック関数
     */
    function card_1_ajax_callback($form, &$form_state){
     // 次のステップのフォームの用意
      $form =  drupal_rebuild_form( 'card_two_form', $form_state );
     // フォームのHTML部分の置換コマンド用意
      $commands[]=ajax_command_replace( '#block-system-main',
    		'<section class="block block-system clearfix" 
    				 id="block-system-main">'.render($form).'</section>' );
    
      return array('#type' => 'ajax', '#commands' => $commands);
    }
    
    /**
     *  ステップ2のコールバック関数
     */
    function card_2_ajax_callback($form, &$form_state){
     // 次のステップのフォームの用意
      $form =  drupal_rebuild_form( 'card_one_form', $form_state );
     // フォームのHTML部分の置換コマンド用意
      $commands[]=ajax_command_replace( '#block-system-main','<section class="block block-system clearfix" id="block-system-main">'.render($form).'</section>' );
    
      return array('#type' => 'ajax', '#commands' => $commands);
    }
    

     

drupal
development
form

やりたいこと:一つのURLで複数のステップフォームを作成したいです

  • 背景:Drupal7.54、FormAPIでマルチステップフォームの作成
  • FormAPIで簡単にフォームを作成します(例:Drupalの関数(drupal_get_form)を利用してFormAPIで作成したフォームを任意の場所でPHPに呼び出されることができます )
  • 一つのURLで複数のステップフォームを作成する要望があります

FormAPIでマルチステップフォーム作成の要点:「$form_state」でステップの定義、「form_submit()」関数内でステップの判別とフォームの再構築

  • FormAPIでマルチステップフォームを作成時に二つの要点ああります
  • 「$form_state」オブジェクトに任意のステップ識別変数を追加します(例:$form_state['pager'])
    • もちろん、$form_state['storage']の利用も可能です
    • 各ステップのフォームで識別文字列を定義します(例:$form_state['pager']='page_1')
  • 各ステップフォームの送信/次へボタンが押されたら、イベントをキャッチするform_submit()関数内でステップの判別、フォームの再構築を行います
    • ステップの判別: if($form_state['pager']=='page_1')
    • 次のステップのフォーム定義: $form_state['pager']=='page_2'
    • フォームの再構築: $form_state['rebuild']==TRUE
      DrupalのFormAPIでマルチステップフォームの要点
    • マルチステップのサンプルプログラム(送信ボタンを押すとステップ1とステップ2を交替で表示する)
      /**
       *  メニューでURLの定義
       */
      function your_module_menu() {
        $items['form/multiple-step'] = array(
            'title' => t('Multiple Step Form Test'),
            'page callback' => 'drupal_get_form',
            'page arguments' => array('multiple_step_form'),
            'access arguments' => array('access content'),
        );
        return $items;
      }
      
      /**
       *  マルチステップフォームの定義
       */
      function multiple_step_form($form, &$form_state){
      	switch( $form_state['pager'] ) {
              case  'page_1'  :
              return page_one_form();
              break;
      
              case  'page_2'  :
              return page_two_form();
              break;
      	}
      }
      
      /**
       *  ステップ1 フォームの定義
       */
      function page_one_form( $form, &$form_state ){
       // ステップの定義
        $form_state['pager'] = "page_1";
       // 任一のメッセージ表示
        $form['message_field'] = array(
            '#type' => 'markup',
            '#markup' => 'Form Step 1',
        );
        // サブミットボタン
        $form['submit'] = array(
            '#type' => 'submit',
            '#value' => '送信',
        );
       // サブミットボタンのイベントハンドラー
        $form['#submit'][] = 'page_one_form_submit';
      
        return $form;}
      }
      
      /**
       *  ステップ2 フォームの定義
       */
      function page_two_form( $form, &$form_state ){
        // ステップの定義
       $form_state['pager'] = "page_two";
       // 任一のメッセージ表示
        $form['test_form']=array(
            '#type' => 'item',
            '#title' => 'Multiple Step Form',
            '#markup' => '<p>Step 2</p>',
        );
       // サブミットボタン
        $form['submit'] = array(
            '#type' => 'submit',
            '#value' => '送信',
        );
       // サブミットボタンのイベントハンドラー
        $form['#submit'][] = 'page_two_form_submit';
        return $form;
      }
      
      /**
       *  ステップ1のボタンイベントハンドラー
       */
      function page_one_form_submit($form, &$form_state){
        $form_state['pager']['card_page']= "page_two";
        $form_state['rebuild'] = true;
        return ;
      }
      
      /**
       *  ステップ2のボタンイベントハンドラー
       */
      function page_two_form_submit($form, &$form_state){
        $form_state['pager']['card_page']= "page_one";
        $form_state['rebuild'] = true;
        return ;
      }

       
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

やりたいこと: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

やりたいこと: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

やりたいこと: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

やりたいこと: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

やりたいこと: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

やりたいこと: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

やりたいこと: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

やりたいこと: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

やりたいこと: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

やりたいこと: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

やりたいこと: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

やりたいこと: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

やりたいこと: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

やりたいこと: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

やりたいこと: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

やりたいこと: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

やりたいこと: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

やりたいこと: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'] ;
    }

     
ホーム

古松

検索

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)