function ajax_example_dynamic_sections in Examples for Developers 7

Dynamically-enabled form with graceful no-JS degradation.

Example of a form with portions dynamically enabled or disabled, but with graceful degradation in the case of no javascript.

The idea here is that certain parts of the form don't need to be displayed unless a given option is selected, but then they should be displayed and configured.

The third $no_js_use argument is strictly for demonstrating operation without javascript, without making the user/developer turn off javascript.

Related topics

1 string reference to 'ajax_example_dynamic_sections'

ajax_example_menu in ajax_example/ajax_example.module

Implements hook_menu().

File

ajax_example/ajax_example_graceful_degradation.inc, line 168

Demonstrations of AJAX with graceful degradation.

Code

function ajax_example_dynamic_sections($form, &$form_state, $no_js_use = FALSE) {

  // Attach the CSS and JS we need to show this with and without javascript.
  // Without javascript we need an extra "Choose" button, and this is
  // hidden when we have javascript enabled.
  $form['#attached']['css'] = array(
    drupal_get_path('module', 'ajax_example') . '/ajax_example.css',
  );
  $form['#attached']['js'] = array(
    drupal_get_path('module', 'ajax_example') . '/ajax_example.js',
  );
  $form['description'] = array(
    '#type' => 'markup',
    '#markup' => '<div>' . t('This example demonstrates a form which dynamically creates various sections based on the configuration in the form.
      It deliberately allows graceful degradation to a non-javascript environment.
      In a non-javascript environment, the "Choose" button next to the select control
      is displayed; in a javascript environment it is hidden by the module CSS.
      <br/><br/>The basic idea here is that the form is built up based on
      the selection in the question_type_select field, and it is built the same
      whether we are in a javascript/AJAX environment or not.
      <br/><br/>
      Try the <a href="!ajax_link">AJAX version</a> and the <a href="!non_ajax_link">simulated-non-AJAX version</a>.
    ', array(
      '!ajax_link' => url('examples/ajax_example/dynamic_sections'),
      '!non_ajax_link' => url('examples/ajax_example/dynamic_sections_no_js'),
    )) . '</div>',
  );
  $form['question_type_select'] = array(
    '#type' => 'select',
    '#title' => t('Question style'),
    '#options' => drupal_map_assoc(array(
      t('Choose question style'),
      t('Multiple Choice'),
      t('True/False'),
      t('Fill-in-the-blanks'),
    )),
    '#ajax' => array(
      'wrapper' => 'questions-fieldset-wrapper',
      'callback' => 'ajax_example_dynamic_sections_select_callback',
    ),
  );

  // The CSS for this module hides this next button if JS is enabled.
  $form['question_type_submit'] = array(
    '#type' => 'submit',
    '#value' => t('Choose'),
    '#attributes' => array(
      'class' => array(
        'next-button',
      ),
    ),
    // No need to validate when submitting this.
    '#limit_validation_errors' => array(),
    '#validate' => array(),
  );

  // This simply allows us to demonstrate no-javascript use without
  // actually turning off javascript in the browser. Removing the #ajax
  // element turns off AJAX behaviors on that element and as a result
  // ajax.js doesn't get loaded.
  if ($no_js_use) {

    // Remove the #ajax from the above, so ajax.js won't be loaded.
    unset($form['question_type_select']['#ajax']);
  }

  // This fieldset just serves as a container for the part of the form
  // that gets rebuilt.
  $form['questions_fieldset'] = array(
    '#type' => 'fieldset',
    // These provide the wrapper referred to in #ajax['wrapper'] above.
    '#prefix' => '<div id="questions-fieldset-wrapper">',
    '#suffix' => '</div>',
  );
  if (!empty($form_state['values']['question_type_select'])) {
    $form['questions_fieldset']['question'] = array(
      '#markup' => t('Who was the first president of the U.S.?'),
    );
    $question_type = $form_state['values']['question_type_select'];
    switch ($question_type) {
      case t('Multiple Choice'):
        $form['questions_fieldset']['question'] = array(
          '#type' => 'radios',
          '#title' => t('Who was the first president of the United States'),
          '#options' => drupal_map_assoc(array(
            t('George Bush'),
            t('Adam McGuire'),
            t('Abraham Lincoln'),
            t('George Washington'),
          )),
        );
        break;
      case t('True/False'):
        $form['questions_fieldset']['question'] = array(
          '#type' => 'radios',
          '#title' => t('Was George Washington the first president of the United States?'),
          '#options' => array(
            t('George Washington') => t("True"),
            0 => t("False"),
          ),
          '#description' => t('Click "True" if you think George Washington was the first president of the United States.'),
        );
        break;
      case t('Fill-in-the-blanks'):
        $form['questions_fieldset']['question'] = array(
          '#type' => 'textfield',
          '#title' => t('Who was the first president of the United States'),
          '#description' => t('Please type the correct answer to the question.'),
        );
        break;
    }
    $form['questions_fieldset']['submit'] = array(
      '#type' => 'submit',
      '#value' => t('Submit your answer'),
    );
  }
  return $form;
}