AJAXフォーム送信を実装するにはどうすればよいですか？

私の仕事は、AJAX経由で問い合わせフォームを送信し、「送信ありがとうございます！」と表示することです。フォームがあった場所にロードされたメッセージ。したがって、既存の連絡先フォームをajaxifyする必要があります。

D8のAJAXを使用してフォームフィールドを検証する方法の例をいくつか見つけましたが、AJAX フォーム送信を実装し、AJAXを介してコンテンツをロードする方法の例を見つけることはできません。

タスクを実装するにはどうすればよいですか？連絡先フォームを変更して必要な機能を追加するにはどうすればよいですか？

ajax 8 forms

— セルゲイ・クラフチェンコ
ソース

一般的なフォームの質問でここに来た人のために：Webformモジュールを使用すると、希望どおりにフォームを作成し、結果をajax経由で送信できます。

— フロリアンミュラー

回答:

フォームでajaxを使用する場合、次の点に注意する必要があります。

フォーム全体またはその一部のみを再構築するかどうかを確認し、それに応じて、トリガー要素の#ajax定義で「ラッパー」として使用するID属性を持つdiv要素でフォームをラップします。this（）には#prefixおよび#suffix属性を使用します。また、この場合（）でプレフィックスとサフィックスをレンダリングしないフォームのカスタムテンプレートがある場合、テンプレートとフォームテーマラッパーによって2回レンダリングされることに注意してください。フォームテンプレートには実際のフォームhtml要素が含まれているため、＃theme_wrappersを空の配列に設定してこれを防ぐことはできません。$form['#prefix'] = '<div id="myform-ajax-wrapper">'; $form['#suffix'] = '</div>';{{ form|without('#prefix', '#suffix') }}
ajax送信ハンドラーで、ラップして再構築したいフォーム全体またはその一部を返します（return $formまたはreturn $form['myelement']）。フォーム構造を返すだけでなく、ajaxコマンドを使用することもできますが、これはより高度なものです。
フォームを送信するまで、すべての値をフォーム状態のストレージに保存します。送信ハンドラー（$form_state->set('somevalue', $form_state->getValue('somevalue'))）で$form_state->setRebuild()これを行い、最終的なフォーム送信を行わない場合は常に呼び出します。カスタム送信ハンドラーを使用することを好みますが、プライマリ送信ハンドラーにロジックを追加することもまったく問題ありません。
#name送信を行っているボタンの属性を常に使用し、フォームを送信し$for_state->getTriggeringElement()['#name']た要素を検出するために単一のフォーム送信ハンドラーのみを使用している場合。
#ajax定義で 'trigger_as'を使用している場合、たとえばselect要素を使用してフォームを送信する場合は、ボタンで行うのと同じ#ajax定義を常に使用します。私の経験では、それは必須です-ドキュメントには記載されていませんが。
を使用#limit_validation_errorsすると、非常に注意が必要になる場合があり、フォームが機能しない理由を理解するのにかなり時間がかかる可能性があるため、慎重に使用してください（これは、コードが実際にリビルドしている要素でのみフォームエラーを分離するのに適していますフォームの他の部分には影響しません）。
常にボタンを使用してフォームを送信し、selectがトリガー要素であるなどの空想が必要な場合は、＃ajax構成の「trigger_as」オプションを使用し、UIの「js-hide」クラスで実際のボタンを非表示にします。
フォーム定義で、デフォルト値が存在する場合はフォーム状態のストレージから取得し、存在しない場合はストレージに割り当てます。そうしないと、フォームが正しく機能しません。
$ thisなど、外部からアクセスできないものは使用しないでください。使用しないと、ajaxが破損します。常に静的なAjaxハンドラーを使用します。
最終的にフォームを送信するとき、ajaxのカスタムフォーム送信ハンドラを持っている（持っていない）という事実に応じて、を呼び出してフォームの再構築を無効にし$form_state->setRebuild(FALSE)ます。
ajax submit element（$element['#ajax']['callback'] = '::ajaxFormRebuild';および$element['#submit'] = [['::ajaxFormSubmitHandler'];）で::速記呼び出しを使用できます。
ajaxコールバックは、再構築されたフォームまたはajaxコマンドを返すためのものです。変更されたフォームを返さないでください（つまり、このコールバックでフォーム配列を変更しないでください）。

drupal 8でajaxに問題がある場合の素晴らしいチェックリスト！（最初の点がわかりません。なぜ、ajaxラップdivをレンダリングしないのですか？）

— 4k4

正確には覚えていませんが、＃theme、＃theme_wrappers、およびレンダラーの#prefix属性と#suffix属性の処理に関係していると思います。最終的には<form>要素内にラッパーがあると思います。もちろん、これは一部の要素だけでなく、フォーム全体を再構築する場合にのみ適用されます。

ありがとうございますが、AJAXを送信するための簡単な例はどこにありますか？

— セルゲイクラフチェンコ

drupal.stackexchange.com/a/188227/21641

@IvanJaros、答えのためのTHX。Ajaxの送信後にフォームの値をクリアする方法を知っていますか？

— ミルコフスキー

このチェックリストに追加するために、モーダルウィンドウでフォームを表示している場合、エラーメッセージが表示されない可能性があります。Ivan Jarosが言ったように、フォームにラッパーがあることを確認する必要があります。

$form['#prefix'] = '<div id="my-form-wrapper-id">';
$form['#suffix'] = '</div>';

また、フォームを送信する要素に次を追加する必要があります。ほとんどの場合、送信ボタンになります。

$form['submit'] = [
    '#type' => 'submit',
    '#value' => $this->t('Save Changes'),
    '#attributes' => [
        'class' => [
            'btn',
            'btn-md',
            'btn-primary',
            'use-ajax-submit'
        ]
    ],
    '#ajax' => [
        'wrapper' => 'my-form-wrapper-id',
    ]
];

— IslandDev
ソース

Contact ajaxモジュールを使用します。それに関するいくつかの詳細（プロジェクトページから）：

連絡先Ajaxは、Drupal 8の連絡先フォームにajaxの送信を実装します。

使い方

モジュールを有効にすると、各連絡先フォームに「Use ajax」チェックボックスが表示されます。このチェックボックスが有効になっている場合、連絡先フォームには、次のオプションを含む別のオプション「確認タイプ」が表示されます。

フォームをロード：ページをリロードせずにフォームを送信します。

カスタムメッセージから読み込む：カスタムテキストを読み込みます。

ノードからロード：フォーム送信後にノードをロードします。

このモジュールは次の場合に役立ちます。

確認メッセージをカスタマイズする必要があります

ページをリロードせずに問い合わせフォームを送信する必要があります。

フォームの送信後にカスタムテキストまたは別のノードをロードする必要があります。

— マスデン
ソース