Wie kann ich das Einreichen von AJAX-Formularen implementieren?

Meine Aufgabe ist es, das Kontaktformular über AJAX einzureichen und dann "Vielen Dank für die Einreichung!" Nachricht, die an der Stelle geladen wurde, an der sich das Formular befand. Also muss ich ein bestehendes Kontaktformular aktivieren.

Ich habe einige Beispiele für die Validierung von Formularfeldern mit AJAX in D8 gefunden, aber ich kann kein Beispiel für die Implementierung der Übermittlung von Ajax-Formularen und das Laden von Inhalten über AJAX finden.

Wie kann ich meine Aufgabe umsetzen? Wie kann ich das Kontaktformular ändern, um die erforderliche Funktionalität hinzuzufügen?

Wenn Sie mit Ajax in Formularen arbeiten, müssen Sie Folgendes beachten:

• Sie müssen wissen, ob Sie das gesamte Formular oder nur einen Teil davon neu erstellen und das Formular entsprechend mit dem div- Element umbrechen , das das ID-Attribut hat , das Sie in der #ajax-Definition für das auslösende Element als 'Wrapper' verwenden. Verwenden Sie hierfür die Attribute #prefix und #suffix ( $form['#prefix'] = '<div id="myform-ajax-wrapper">'; $form['#suffix'] = '</div>';). Denken Sie auch daran, dass wenn Sie eine benutzerdefinierte Vorlage für Ihr Formular haben , das Präfix und das Suffix in diesem Fall NICHT{{ form|without('#prefix', '#suffix') }} gerendert werden ( ), da sie andernfalls zweimal gerendert werden - sowohl von Ihrer Vorlage als auch vom Formularthema-Wrapper. Sie können dies nicht verhindern, indem Sie #theme_wrappers auf ein leeres Array setzen, da die Formularvorlage das eigentliche HTML-Formularelement enthält.

• Geben Sie in Ihrem Ajax-Submit-Handler das gesamte Formular oder einen Teil davon zurück, das Sie umschlossen haben und neu erstellen möchten ( return $formoder return $form['myelement']). Sie können auch Ajax-Befehle verwenden, anstatt nur die Formularstruktur zurückzugeben, aber das ist etwas fortgeschrittener.

• Speichern Sie jeden Wert im Speicher des Formularstatus, bis Sie das Formular absenden. Führen Sie dies im Submit-Handler ( $form_state->set('somevalue', $form_state->getValue('somevalue'))) durch und rufen $form_state->setRebuild()Sie immer an, wenn Sie die endgültige Formularübermittlung nicht durchführen. Ich bevorzuge benutzerdefinierte Submit-Handler, aber es ist auch völlig in Ordnung, mehr Logik im primären Submit-Handler zu haben.

• Verwenden Sie immer das #nameAttribut für die Schaltfläche, die die Übermittlung ausführt. Wenn Sie nur einen Submit-Handler $for_state->getTriggeringElement()['#name']für einzelne Formulare verwenden , können Sie ermitteln, von welchem ​​Element das Formular gesendet wurde.

• Wenn Sie 'trigger_as' in der #ajax-Definition verwenden, verwenden Sie für den Fall, dass Sie das Formular beispielsweise mit einem select-Element senden möchten, immer dieselbe #ajax-Definition wie für die Schaltfläche. Nach meiner Erfahrung ist es erforderlich - obwohl nicht in der Dokumentation angegeben.

• Das Verwenden von #limit_validation_errorskann manchmal sehr knifflig werden und es kann einige Zeit in Anspruch nehmen, herauszufinden, warum das Formular nicht funktioniert. Verwenden Sie es daher vorsichtig (dies ist gut, um Formularfehler nur für die Elemente zu isolieren, die Sie tatsächlich neu erstellen, damit Ihr Code funktioniert hat keinen Einfluss auf andere Teile des Formulars).

• Verwenden Sie zum Senden des Formulars immer Schaltflächen. Wenn Sie etwas Besonderes wünschen, z. B. das auslösende Element "select", verwenden Sie die Option "trigger_as" in der Konfiguration "#ajax", und verbergen Sie die echte Schaltfläche mit der Klasse "js-hide", um eine gute Benutzeroberfläche zu erzielen.

• Rufen Sie in der Formulardefinition die Standardwerte aus dem Speicher des Formularstatus ab, falls vorhanden, oder weisen Sie sie dem Speicher zu, falls nicht. Andernfalls funktioniert das Formular nicht richtig.

• Verwenden Sie weder $ this noch irgendetwas anderes, auf das Sie keinen Zugriff haben, da sonst die Ajax zerstört wird. Verwenden Sie immer statische Ajax-Handler.

• Deaktivieren Sie beim endgültigen Senden des Formulars die Neuerstellung des Formulars, indem Sie aufrufen, je nachdem, ob Sie über einen benutzerdefinierten Formularübermittlungs-Handler für den Ajax verfügen (oder nicht) $form_state->setRebuild(FALSE).

• Sie können die :: shorthand-Aufrufe im ajax submit-Element ( $element['#ajax']['callback'] = '::ajaxFormRebuild';und $element['#submit'] = [['::ajaxFormSubmitHandler'];) verwenden.

• Der Ajax-Rückruf dient lediglich der Rückgabe des neu erstellten Formulars oder der Ajax-Befehle. Niemals geändertes Formular zurückgeben (dh das Formular-Array in diesem Rückruf nicht ändern).

Wenn Sie ein Formular in einem modalen Fenster anzeigen, besteht die Möglichkeit, dass die Fehlermeldungen nicht angezeigt werden. Wie Ivan Jaros sagte, müssen Sie sicherstellen, dass das Formular einen Wrapper hat:

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

Sie müssen dem Element, das das Formular sendet, auch Folgendes hinzufügen. In den meisten Fällen wäre es Ihre Schaltfläche "Senden":

$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',
    ]
];

Ich benutze das Contact Ajax Modul. Einige weitere Details dazu (von der Projektseite):

Contact Ajax implementiert Ajax Submission für das Kontaktformular in Drupal 8.

Wie es funktioniert

Nach dem Aktivieren des Moduls wird auf jedem Kontaktformular ein Kontrollkästchen "Use ajax" angezeigt. Wenn dieses Kontrollkästchen aktiviert ist, zeigt das Kontaktformular eine weitere Option "Bestätigungstyp" mit diesen Optionen an:

• Formular laden: Sendet das Formular, ohne die Seite neu zu laden.
• Aus benutzerdefinierter Nachricht laden: Lädt einen benutzerdefinierten Text.
• Laden vom Knoten: Laden Sie einen Knoten nach dem Absenden des Formulars.

Dieses Modul kann Ihnen helfen, wenn:

• Sie müssen die Bestätigungsnachricht anpassen
• Sie müssen ein Kontaktformular senden, ohne die Seite neu zu laden.
• Sie möchten nach dem Absenden des Formulars einen benutzerdefinierten Text oder einen anderen Knoten laden.