function ajax_example_dynamic_sections

Dynamically-enabled form with graceful no-JavaScript 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 turning off JavaScript on the browser side.

Related topics

File

modules/examples/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 JavaScript we need to show this with and without
  // JavaScript. Without JavaScript, we need an extra "Choose" button, which is
  // hidden when JavaScript is enabled.
  $form['#attached']['css'] = array(
    backdrop_get_path('module', 'ajax_example') . '/ajax_example.css',
  );
  $form['#attached']['js'] = array(
    backdrop_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' => backdrop_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 the next button if JavaScript 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 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' => backdrop_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;
}