> ## 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.
# Reload and submit forms via AJAX
> Load an INQUIRY form into an existing shop page with a click and submit it without a page change, with a loading indicator and error handling.
An inquiry form doesn't have to sit on a page of its own. With AJAX, you load it with a click into the page the customer is currently on and submit it from there without leaving the page.
The example shows a "Question about the product" form that is loaded from the product detail view. The procedure is not limited to INQUIRY, however; it applies to every template you include via `WS-ExternInclude()`.
> [!NOTE]
>
> The form template is built so that it supports both ways. It can still be called via a normal link, even if no JavaScript is running in the browser.
Guide: AJAX functions
## Starting point
There is a template `page_inquiry.htm` that can be reached via a link from the product detail view `ws_product.htm`.
```html theme={"theme":{"light":"github-light","dark":"github-dark"},"languages":{"custom":["/languages/websale.json"]}}
Frage zum Produkt stellen
```
The form sits on `page_inquiry.htm`:
```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)~
```
> [!NOTE]
>
> The `PR-DepVarLink` parameter ensures that the data of the product in question is passed to the form. Without it, the form doesn't know what the question refers to.
Reference: WS-ExternInclude()
## Step 1: Include the JavaScript library
In the head section of the product detail view, include the WEBSALE system library and the associated design component. If it is already included, it must be at least version 1.8.1.
```html theme={"theme":{"light":"github-light","dark":"github-dark"},"languages":{"custom":["/languages/websale.json"]}}
```
Materials: WEBSALE JavaScript library
Guide: Including new JavaScript files
## Step 2: Create the three containers
Create three areas on the product detail view. The script always shows exactly one of them.
```html theme={"theme":{"light":"github-light","dark":"github-dark"},"languages":{"custom":["/languages/websale.json"]}}
Die Verbindung ist fehlgeschlagen. Bitte versuchen Sie es erneut.
```
> [!NOTE]
>
> The content container has the same name as the AJAX bracketing in step 5. The script uses this name to find the place where the loaded content belongs.
## Step 3: Set the triggering link
```html theme={"theme":{"light":"github-light","dark":"github-dark"},"languages":{"custom":["/languages/websale.json"]}}
Frage zum Produkt stellen
```
> [!NOTE]
>
> The first two callback functions are passed without quotation marks, the last two as a string with parentheses. This is not a mistake; it is how the library is designed.
## Step 4: Write the four callback functions
These functions belong in the design component of the system library, not in the library itself.
```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();
}
```
> [!NOTE]
>
> The third function shows the same container as the second. This is intentional: a form with input errors is not a connection error, and the customer should see their input along with the error messages. Only the fourth function shows the error container.
> [!WARNING]
>
> In this example, loading and submitting use the same four functions. If you want different effects for the two operations, you need two separate sets of functions.
## Step 5: Bracket the area to be loaded
On `page_inquiry.htm`, place an AJAX bracketing around the area that should go into the container. The markers themselves are additionally bracketed with `ST-Ajax` so that they don't end up in the source code when the page is called normally via a link.
```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]
>
> The name in the marker must match the container ID from step 2 exactly. If it doesn't match, the container stays empty without any error message appearing.
## Step 6: Give the form a unique ID
```html theme={"theme":{"light":"github-light","dark":"github-dark"},"languages":{"custom":["/languages/websale.json"]}}
