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;
8ajaxwebforms
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