web-dev-qa-db-ja.com

リダイレクトの代わりにモーダルフォーム

ユーザーをホームページにリダイレクトし、送信結果をヘルプセクションに投稿するサイト全体のお問い合わせフォームを設定しています。意図したとおりに機能しますが、この動作を変更するために何をする必要があるのか​​と思っていました。

リダイレクトする代わりに、フォーム送信結果をモーダル（おそらくjQuery）ポップアップに表示したいと思います。

これをどのように達成できますか？

コア機能を失いたくないので、カスタムモジュールなどでオーバーライドしてください。何かご意見は？

編集：

@rémyの提案から始めて、.moduleフォーム送信の標準動作を上書きしようとしているファイル。

今私が持っている唯一のものは次のとおりです（それはうまくいきませんが）：

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

}

しかし、現時点では、リダイレクトを妨げたり、モーダルをポップアップしたりしません。

8ajaxemails
4
Joum

カスタムモジュールでは、連絡先フォームを変更し、送信ボタンに#ajax属性を追加する必要があります。

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',
    );
}

そして、モジュールでも OpenModalDialogCommand を使用してこのメ​​ソッドを提供します。

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

ここでは、検証エラーを表示するためにフォーム要素status_messagesを使用しています。それ以外の場合は、カスタムテキストを含むモーダルをポップアップします。

drupal_get_messages （）を使用すると、システムメッセージを取得してキューをクリアできます。

クラスを利用できるようにすることを忘れないでください

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

チェックアウト https://www.mediacurrent.com/blog/loading-and-rendering-modal-forms-drupal-8 -モーダルダイアログでのフォームのロードとレンダリングについてDrupal 8。

1
edwardchiapet

drupalウォッチドッグをご覧ください。

モジュールの最初に追加できます：

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