web-dev-qa-db-fra.com

Forme modale au lieu de rediriger

J'ai une configuration de formulaire de contact à l'échelle du site qui redirige l'utilisateur vers la page d'accueil et publie le résultat de la soumission dans la section d'aide. Cela fonctionne comme prévu, mais je me demandais ce que je devrais faire pour changer ce comportement.

Au lieu de rediriger, je voudrais afficher le résultat de la soumission du formulaire dans une fenêtre contextuelle modale (peut-être jQuery).

Comment pourrais-je y parvenir?

Je ne voudrais pas perdre la fonctionnalité de base, juste peut-être la remplacer par un module personnalisé ou quelque chose. Des pensées?

MODIFIER:

À partir de la suggestion de @ rémy, j'ai créé un .module fichier où j'essaie de remplacer le comportement standard pour la soumission du formulaire.

À l'heure actuelle, la seule chose que j'ai est la suivante (bien que cela ne fonctionne pas):

<?php

/*
*  Override the the form submit behaviour.
*/

function modal_contact_form_result_form_node_form_alter(&$form,       FormStateInterface $form_state, $form_id){
    $form['actions']['submit']['ajax'] = array(
        'callback' => 'ajax_test_dialog_form_callback_modal'
    );
}

function ajax_test_dialog_form_callback_modal($form, FormStateInterface $form_state){
    $response = new AjaxResponse();
    $content = 'Form submitted successfully, thank you!';
    $title = 'YForm submited';
    $response->addCommand(new OpenModalDialogCommand($title, $content, array('width' => '700' )));

return $response;

}

Mais en ce moment, cela n'empêche pas la redirection ni ne fait apparaître le modal.

8ajaxemails
4
Joum

Dans un module personnalisé, vous devez modifier le formulaire de contact et ajouter un attribut #ajax au bouton d'envoi:

function YOUR_MODULE_form_contact_site_form_alter(&$form, &$form_state) {
    $form['#prefix'] = '<div id="my_form_wrapper">';
    $form['#suffix'] = '</div>';

    $form['actions']['submit']['#ajax'] => array(
          'callback' => 'ajax_test_dialog_form_callback_modal',
    );
}

Et puis fournissez cette méthode, en utilisant OpenModalDialogCommand , dans votre module aussi:

    function ajax_test_dialog_form_callback_modal($form, &$form_state) {
      $response = new AjaxResponse();

      if ($form_state->getErrors()) {
        unset($form['#prefix']);
        unset($form['#suffix']);
        $form['status_messages'] = [
          '#type' => 'status_messages',
          '#weight' => -10,
        ];
        $response->addCommand(new HtmlCommand('#my_form_wrapper', $form));
      }
      else {
        $content = 'Something to show in the modal';
        $title = 'Hi, I'm a Modal';
        $response = new AjaxResponse();
        $response->addCommand(new OpenModalDialogCommand($title, $content, array('width' => '700')));
      }
      return $response;
    }

Ici, j'utilise l'élément de formulaire status_messages pour afficher les erreurs de validation, sinon nous affichons un modal avec du texte personnalisé.

Avec drupal_get_messages (), vous pouvez obtenir les messages système et effacer la file d'attente.

N'oubliez pas de rendre les cours disponibles

use Drupal\Core\Ajax\OpenModalDialogCommand;
use Drupal\Core\Ajax\AjaxResponse;
use Drupal\Core\Ajax\HtmlCommand;
3
rémy

Découvrez https://www.mediacurrent.com/blog/loading-and-rendering-modal-forms-drupal-8 - il explique le chargement et le rendu des formulaires dans les boîtes de dialogue modales dans Drupal 8.

1
edwardchiapet

Jetez un œil à votre chien de garde drupal.

Vous pouvez ajouter au début de votre module:

use Drupal\Core\Ajax\OpenModalDialogCommand;
use Drupal\Core\Ajax\AjaxResponse;
use Drupal\Core\Ajax\HtmlCommand;
1
Gilles Clemenceau