class DynamicFormSections

Same name in other branches
  1. 3.x modules/ajax_example/src/Form/DynamicFormSections.php \Drupal\ajax_example\Form\DynamicFormSections

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.

Hierarchy

Expanded class hierarchy of DynamicFormSections

1 string reference to 'DynamicFormSections'
ajax_example.routing.yml in modules/ajax_example/ajax_example.routing.yml
modules/ajax_example/ajax_example.routing.yml

File

modules/ajax_example/src/Form/DynamicFormSections.php, line 22

Namespace

Drupal\ajax_example\Form
View source
class DynamicFormSections extends FormBase {
    
    /**
     * {@inheritdoc}
     */
    public function getFormId() {
        return 'ajax_example_dynamicsectiondegrades';
    }
    
    /**
     * {@inheritdoc}
     */
    public function buildForm(array $form, FormStateInterface $form_state, $nojs = NULL) {
        // Add our CSS and tiny JS to hide things when they should be hidden.
        $form['#attached']['library'][] = 'ajax_example/ajax_example.library';
        // Explanatory text with helpful links.
        $form['info'] = [
            '#markup' => $this->t('<p>Like other examples in this module, this form has a path that
        can be modified with /nojs to simulate its behavior without JavaScript.
        </p><ul>
        <li>@try_it_without_ajax</li>
        <li>@try_it_with_ajax</li>
      </ul>', [
                '@try_it_without_ajax' => Link::createFromRoute($this->t('Try it without AJAX'), 'ajax_example.dynamic_form_sections', [
                    'nojs' => 'nojs',
                ])
                    ->toString(),
                '@try_it_with_ajax' => Link::createFromRoute($this->t('Try it with AJAX'), 'ajax_example.dynamic_form_sections')
                    ->toString(),
            ]),
        ];
        $form['question_type_select'] = [
            // This is our select dropdown.
'#type' => 'select',
            '#title' => $this->t('Question style'),
            // We have a variety of form items you can use to get input from the user.
'#options' => [
                'Choose question style' => 'Choose question style',
                'Multiple Choice' => 'Multiple Choice',
                'True/False' => 'True/False',
                'Fill-in-the-blanks' => 'Fill-in-the-blanks',
            ],
            // The #ajax section tells the AJAX system that whenever this dropdown
            // emits an event, it should call the callback and put the resulting
            // content into the wrapper we specify. The questions-fieldset-wrapper is
            // defined below.
'#ajax' => [
                'wrapper' => 'questions-fieldset-wrapper',
                'callback' => '::promptCallback',
            ],
        ];
        // The CSS for this module hides this next button if JS is enabled.
        $form['question_type_submit'] = [
            '#type' => 'submit',
            '#value' => $this->t('Choose'),
            '#attributes' => [
                'class' => [
                    'ajax-example-inline',
                ],
            ],
            // No need to validate when submitting this.
'#limit_validation_errors' => [],
            '#validate' => [],
        ];
        // This section allows us to demonstrate no-AJAX use without turning off
        // javascript in the browser.
        if ($nojs != 'nojs') {
            // Allow JavaScript to hide the choose button if we're using AJAX.
            $form['question_type_submit']['#attributes']['class'][] = 'ajax-example-hide';
        }
        else {
            // Remove #ajax from the above, so it won't perform AJAX behaviors.
            unset($form['question_type_select']['#ajax']);
        }
        // This fieldset just serves as a container for the part of the form
        // that gets rebuilt. It has a nice line around it so you can see it.
        $form['questions_fieldset'] = [
            '#type' => 'details',
            '#title' => $this->t('Stuff will appear here'),
            '#open' => TRUE,
            // We set the ID of this fieldset to questions-fieldset-wrapper so the
            // AJAX command can replace it.
'#attributes' => [
                'id' => 'questions-fieldset-wrapper',
                'class' => [
                    'questions-wrapper',
                ],
            ],
        ];
        // When the AJAX request comes in, or when the user hit 'Submit' if there is
        // no JavaScript, the form state will tell us what the user has selected
        // from the dropdown. We can look at the value of the dropdown to determine
        // which secondary form to display.
        $question_type = $form_state->getValue('question_type_select');
        if (!empty($question_type) && $question_type !== 'Choose question style') {
            $form['questions_fieldset']['question'] = [
                '#markup' => $this->t('Who was the first president of the U.S.?'),
            ];
            // Build up a secondary form, based on the type of question the user
            // chose.
            switch ($question_type) {
                case 'Multiple Choice':
                    $form['questions_fieldset']['question'] = [
                        '#type' => 'radios',
                        '#title' => $this->t('Who was the first president of the United States'),
                        '#options' => [
                            'George Bush' => 'George Bush',
                            'Adam McGuire' => 'Adam McGuire',
                            'Abraham Lincoln' => 'Abraham Lincoln',
                            'George Washington' => 'George Washington',
                        ],
                    ];
                    break;
                case 'True/False':
                    $form['questions_fieldset']['question'] = [
                        '#type' => 'radios',
                        '#title' => $this->t('Was George Washington the first president of the United States?'),
                        '#options' => [
                            'George Washington' => 'True',
                            0 => 'False',
                        ],
                        '#description' => $this->t('Click "True" if you think George Washington was the first president of the United States.'),
                    ];
                    break;
                case 'Fill-in-the-blanks':
                    $form['questions_fieldset']['question'] = [
                        '#type' => 'textfield',
                        '#title' => $this->t('Who was the first president of the United States'),
                        '#description' => $this->t('Please type the correct answer to the question.'),
                    ];
                    break;
            }
            $form['questions_fieldset']['submit'] = [
                '#type' => 'submit',
                '#value' => $this->t('Submit your answer'),
            ];
        }
        return $form;
    }
    
    /**
     * Final submit handler.
     *
     * Reports what values were finally set.
     */
    public function submitForm(array &$form, FormStateInterface $form_state) {
        $messenger = $this->messenger();
        // This is only executed when a button is pressed, not when the AJAXfield
        // select is changed.
        // Now handle the case of the next, previous, and submit buttons.
        // Only submit will result in actual submission, all others rebuild.
        if ($form_state->getValue('question_type_submit') == 'Choose') {
            $form_state->setValue('question_type_select', $form_state->getUserInput()['question_type_select']);
            $form_state->setRebuild();
        }
        if ($form_state->getValue('submit') == 'Submit your answer') {
            $form_state->setRebuild(FALSE);
            $answer = $form_state->getValue('question');
            // Special handling for the checkbox.
            if ($answer == 1 && $form['questions_fieldset']['question']['#type'] == 'checkbox') {
                $answer = $form['questions_fieldset']['question']['#title'];
            }
            if ($answer == $this->t('George Washington')) {
                $messenger->addMessage($this->t('You got the right answer: @answer', [
                    '@answer' => $answer,
                ]));
            }
            else {
                $messenger->addMessage($this->t('Sorry, your answer (@answer) is wrong', [
                    '@answer' => $answer,
                ]));
            }
            return;
        }
        // Sets the form to be rebuilt after processing.
        $form_state->setRebuild();
    }
    
    /**
     * Callback for the select element.
     *
     * Since the questions_fieldset part of the form has already been built during
     * the AJAX request, we can return only that part of the form to the AJAX
     * request, and it will insert that part into questions-fieldset-wrapper.
     *
     * @param array $form
     *   An associative array containing the structure of the form.
     * @param \Drupal\Core\Form\FormStateInterface $form_state
     *   The current state of the form.
     *
     * @return array
     *   The form structure.
     */
    public function promptCallback(array $form, FormStateInterface $form_state) {
        return $form['questions_fieldset'];
    }

}

Members

Title Sort descending Modifiers Object type Summary Overriden Title Overrides
DependencySerializationTrait::$_entityStorages protected property
DependencySerializationTrait::$_serviceIds protected property
DependencySerializationTrait::__sleep public function 1
DependencySerializationTrait::__wakeup public function 2
DynamicFormSections::buildForm public function Form constructor. Overrides FormInterface::buildForm
DynamicFormSections::getFormId public function Returns a unique string identifying the form. Overrides FormInterface::getFormId
DynamicFormSections::promptCallback public function Callback for the select element.
DynamicFormSections::submitForm public function Final submit handler. Overrides FormInterface::submitForm
FormBase::$configFactory protected property The config factory. 3
FormBase::$requestStack protected property The request stack. 1
FormBase::$routeMatch protected property The route match.
FormBase::config protected function Retrieves a configuration object.
FormBase::configFactory protected function Gets the config factory for this form. 3
FormBase::container private function Returns the service container.
FormBase::create public static function Instantiates a new instance of this class. Overrides ContainerInjectionInterface::create 111
FormBase::currentUser protected function Gets the current user. 2
FormBase::getRequest protected function Gets the request object.
FormBase::getRouteMatch protected function Gets the route match.
FormBase::logger protected function Gets the logger for a specific channel.
FormBase::redirect protected function Returns a redirect response object for the specified route.
FormBase::resetConfigFactory public function Resets the configuration factory.
FormBase::setConfigFactory public function Sets the config factory for this form.
FormBase::setRequestStack public function Sets the request stack object to use.
FormBase::validateForm public function Form validation handler. Overrides FormInterface::validateForm 57
LoggerChannelTrait::$loggerFactory protected property The logger channel factory service.
LoggerChannelTrait::getLogger protected function Gets the logger for a specific channel.
LoggerChannelTrait::setLoggerFactory public function Injects the logger channel factory.
MessengerTrait::$messenger protected property The messenger. 16
MessengerTrait::messenger public function Gets the messenger. 16
MessengerTrait::setMessenger public function Sets the messenger.
RedirectDestinationTrait::$redirectDestination protected property The redirect destination service. 2
RedirectDestinationTrait::getDestinationArray protected function Prepares a &#039;destination&#039; URL query parameter for use with \Drupal\Core\Url.
RedirectDestinationTrait::getRedirectDestination protected function Returns the redirect destination service.
RedirectDestinationTrait::setRedirectDestination public function Sets the redirect destination service.
StringTranslationTrait::$stringTranslation protected property The string translation service. 3
StringTranslationTrait::formatPlural protected function Formats a string containing a count of items.
StringTranslationTrait::getNumberOfPlurals protected function Returns the number of plurals supported by a given language.
StringTranslationTrait::getStringTranslation protected function Gets the string translation service.
StringTranslationTrait::setStringTranslation public function Sets the string translation service to use. 2
StringTranslationTrait::t protected function Translates a string to the current language or to a given language.