> ## Documentation Index
> Fetch the complete documentation index at: https://dokumentation.websale.de/llms.txt
> Use this file to discover all available pages before exploring further.
# Formulare per AJAX nachladen und absenden
> Ein INQUIRY-Formular per Klick in eine bestehende Shopseite nachladen und ohne Seitenwechsel absenden, mit Ladeanzeige und Fehlerbehandlung.
Ein Anfrageformular muss nicht auf einer eigenen Seite liegen. Mit AJAX laden Sie es per Klick in die Seite nach, auf der der Kunde gerade steht, und senden es von dort ab, ohne die Seite zu verlassen.
Das Beispiel zeigt ein Formular "Frage zum Produkt", das von der Produktdetailansicht aus nachgeladen wird. Das Verfahren ist aber nicht auf INQUIRY beschränkt, es gilt für jedes Template, das Sie per `WS-ExternInclude()` einbinden.
Das Formular-Template wird so gebaut, dass es beide Wege verträgt. Es lässt sich weiterhin über einen normalen Link aufrufen, auch wenn im Browser kein JavaScript läuft.
Wegweiser: [AJAX-Funktionen](https://dokumentation.websale.de/v8s/templates/ajax-funktionen.md)
## Ausgangslage
Es gibt ein Template `page_inquiry.htm`, das per Link von der Produktdetailansicht `ws_product.htm` erreichbar ist.
```html theme={"theme":{"light":"github-light","dark":"github-dark"},"languages":{"custom":["/languages/websale.json"]}}
Frage zum Produkt stellen
```
Auf `page_inquiry.htm` steckt das Formular:
```html theme={"theme":{"light":"github-light","dark":"github-dark"},"languages":{"custom":["/languages/websale.json"]}}
~WS-ExternInclude(https://ihre-domain.de/cgi/inquiry4.cgi?inq4=ihre-shopid&ini=anfrage.config)~
```
Der Parameter `PR-DepVarLink` sorgt dafür, dass die Daten des angefragten Produkts an das Formular übergeben werden. Ohne ihn weiß das Formular nicht, worauf sich die Frage bezieht.
Referenz: [WS-ExternInclude()](https://dokumentation.websale.de/v8s/referenz/tags/ws/merkzettel-vergleich-upload-und-externe-dienste.md)
## Schritt 1: Die JavaScript-Bibliothek einbinden
Binden Sie im Kopfbereich der Produktdetailansicht die WEBSALE Systembibliothek und die zugehörige Designkomponente ein. Ist sie bereits eingebunden, muss sie mindestens in Version 1.8.1 vorliegen.
```html theme={"theme":{"light":"github-light","dark":"github-dark"},"languages":{"custom":["/languages/websale.json"]}}
```
Materialien: [WEBSALE JavaScript-Bibliothek](https://dokumentation.websale.de/v8s/materialien/websale-javascript-bibliothek.md)
Wegweiser: Einbinden neuer JavaScript-Dateien
## Schritt 2: Die drei Container anlegen
Legen Sie auf der Produktdetailansicht drei Bereiche an. Das Skript blendet immer genau einen davon ein.
```html theme={"theme":{"light":"github-light","dark":"github-dark"},"languages":{"custom":["/languages/websale.json"]}}
Die Verbindung ist fehlgeschlagen. Bitte versuchen Sie es erneut.
```
Der Inhaltscontainer trägt denselben Namen wie die AJAX-Klammerung in Schritt 5. Über diesen Namen findet das Skript die Stelle, an die der nachgeladene Inhalt gehört.
## Schritt 3: Den auslösenden Link setzen
```html theme={"theme":{"light":"github-light","dark":"github-dark"},"languages":{"custom":["/languages/websale.json"]}}
Frage zum Produkt stellen
```
Die ersten beiden Rückruffunktionen werden ohne Anführungszeichen übergeben, die letzten beiden als Zeichenkette mit Klammern. Das ist kein Versehen, sondern von der Bibliothek so vorgesehen.
## Schritt 4: Die vier Rückruffunktionen schreiben
Diese Funktionen gehören in die Designkomponente der Systembibliothek, nicht in die Bibliothek selbst.
```javascript theme={"theme":{"light":"github-light","dark":"github-dark"},"languages":{"custom":["/languages/websale.json"]}}
// vor dem Absetzen der Anfrage: Ladeanzeige einblenden
function ws_AJAXloadInqStart() {
$('#ws_inq_error').hide();
$('#ws_inq_content').hide();
$('#ws_inq_loading').show();
}
// Nachladen erfolgreich
function ws_AJAXloadInqResponseSuccess() {
$('#ws_inq_error').hide();
$('#ws_inq_loading').hide();
$('#ws_inq_content').show();
}
// Formular kam mit Eingabefehlern zurück
function ws_AJAXloadInqResponseError() {
$('#ws_inq_error').hide();
$('#ws_inq_loading').hide();
$('#ws_inq_content').show();
}
// die Verbindung selbst ist fehlgeschlagen
function ws_AJAXloadInqError() {
$('#ws_inq_loading').hide();
$('#ws_inq_content').hide();
$('#ws_inq_error').show();
}
```
Die dritte Funktion blendet denselben Container ein wie die zweite. Das ist Absicht: Ein Formular mit Eingabefehlern ist kein Verbindungsfehler, der Kunde soll seine Eingaben mit den Fehlermeldungen sehen. Nur die vierte Funktion zeigt den Fehlercontainer.
> [!WARNING]
>
> Nachladen und Absenden verwenden in diesem Beispiel dieselben vier Funktionen. Wenn Sie für die beiden Vorgänge unterschiedliche Effekte wollen, brauchen Sie zwei getrennte Sätze von Funktionen.
## Schritt 5: Den nachzuladenden Bereich klammern
Legen Sie auf `page_inquiry.htm` um den Bereich, der in den Container soll, eine AJAX-Klammerung. Die Marken selbst werden zusätzlich mit `ST-Ajax` geklammert, damit sie beim normalen Aufruf über einen Link nicht im Quelltext landen.
```html theme={"theme":{"light":"github-light","dark":"github-dark"},"languages":{"custom":["/languages/websale.json"]}}
{ST-Ajax}
{/ST-Ajax}
~WS-ExternInclude(https://ihre-domain.de/cgi/inquiry4.cgi?inq4=ihre-shopid&ini=anfrage.config)~
{ST-Ajax}
{/ST-Ajax}
```
> [!WARNING]
>
> Der Name in der Marke muss genau der Container-ID aus Schritt 2 entsprechen. Stimmt er nicht überein, bleibt der Container leer, ohne dass eine Fehlermeldung erscheint.
## Schritt 6: Dem Formular eine eindeutige ID geben
```html theme={"theme":{"light":"github-light","dark":"github-dark"},"languages":{"custom":["/languages/websale.json"]}}
