web-dev-qa-db-ja.com

AJAX経由でフォームを送信するにはどうすればよいですか?

Drupal 8.のWebformモジュールを使用しています。フォームのモジュール確認設定は次のとおりです。

  • ページ(新しいページにリダイレクトし、確認メッセージを表示します)

  • インライン(現在のページを再読み込みし、Webフォームを確認メッセージで置き換えます。)

  • メッセージ(現在のページ/フォームを再ロードし、ページの上部に確認メッセージを表示します。)

  • URL(カスタムパスまたはURLにリダイレクト)

  • メッセージ付きURL(カスタムパスまたはURLにリダイレクトし、ページの上部に確認メッセージを表示します。)

しかし、AJAX=経由でフォームを送信して、送信時にページがリロードされないようにするにはどうすればよいのですか?それでも確認メッセージがフォームを置き換えるのですか?)


編集:

これが機能する解決策です:

最初にフォーム変更関数をフックし、AJAXコールバックを設定する必要があります(- echo's answer のように):

use \Drupal\Core\Form\FormStateInterface;

function MYTHEME_form_alter(&$form, FormStateInterface $form_state, $form_id)
{
  if ( isset($form['#webform_id']) && $form['#webform_id'] == 'MYWEBFORM' )
  {
    // add an AJAX callback to the form submission
    $form['actions']['submit']['#ajax'] = array(
      'callback' => '\Drupal\MYMODULE\Controller\DefaultController::processFormSubmission',
      'event' => 'click',
    );
  }
}

次に、processFormSubmission関数でフォームを処理できます(put use \Drupal\Core\Form\FormStateInterface;(ファイルの先頭)など)

// Instantiate an AjaxResponse Object to return.
$ajax_response = new \Drupal\Core\Ajax\AjaxResponse();

/* do sth */

// in the DOM: replace the form with the text 'form submitted'
$ajax_response->addCommand(new \Drupal\Core\Ajax\HtmlCommand('#MYFORM', 'form submitted'));

return $ajax_response;
2
elterr1ble

必要なすべてのコードを投稿することはできませんが、基本的にはフォームの変更を行い、#ajax送信ボタンのアイテムを選択し、コールバックに向けます。このコールバックは検証と送信を実行します-その最後に ReplaceCommand を発行できます。次に例を示します。

function mymodule_form_submit($form, FormStateInterface $form_state) {
  // code here to handle the submission aspect
  // you'll need to manually submit form value data to Webform using webform api

  // if successful, this is the response
  $response = new AjaxResponse();
  $response->addCommand(new ReplaceCommand('selector', 'data'));
  return $response;
}

ここで、selectorはHTML要素であり、dataは置き換えたいものです。

セレクターをフォームをラップするコンテナーのIDにしたいように聞こえますが、置換はWebformからの確認メッセージである必要があります(そのフォームの構成をフェッチすることで取得する必要があります)。これにより、ページが更新されず、代わりにフォームが確認メッセージに置き換えられます。

3
Kevin