# Dinamikus mezők: Dynamic Select, Hidden Label, JS Field, Live HTML

> Egy másik mezőtől függő lista, a választott érték felirata, JavaScripttel számolt mező és élő HTML-összefoglaló.

Az **Űrlapmezők** **Típus** listájában a bővítmény több új mezőtípust is ad. Ez a fejezet a négy dinamikus mezőt írja le.

## Dynamic Select

A **Dynamic Select** egy legördülő lista, amelynek elemei egy másik mező értékétől függően változnak. Ha például az első mezőben országot választasz, a másodikban csak az adott ország városai jelennek meg.

![A Dynamic Select mező beállításai](./kepek/elementor-pro-form-dinamikus-select.webp)

*A Dynamic Select mező beállításai* (https://minta-bolt.hu/wp-admin/post.php?post=63&action=elementor)

Beállítás:

1. Add hozzá a vezérlő mezőt (például egy **Választó** típusú **Ország** mezőt).
2. Add hozzá a **Dynamic Select** típusú mezőt.
3. A **Hivatkozási mező ID-ja** mezőbe írd be a vezérlő mező azonosítóját (a képen `orszag`).
4. A **Beállítások** mezőbe írd az elemeket: a hivatkozási mező értékét szögletes zárójelbe teszed, utána sorokban jönnek a hozzá tartozó elemek.

```text
[Kanada]
Winnipeg
Toronto
Vancouver
[Mexikó]
Mexikóváros
Tijuana
Puebla
[Brazília]
São Paulo
Rio de Janeiro
Brasília
```

A szögletes zárójelben az érték áll, amelyet a hivatkozási mező ad vissza (a **Beállítások** mezőben az opciók `felirat|érték` alakban is megadhatók, ilyenkor az értéknek kell a zárójelbe kerülnie). A mezőn van **Többszörös kijelölés** kapcsoló is.

## Hidden Label

Ha egy legördülő lista elemeinek van felirata és értéke is (például `Margherita|1000`), az űrlap adataiban csak az érték szerepel, a felirat elvész. A **Hidden Label** (rejtett felirat) mező ezt oldja meg: a másik mező kiválasztott elemének feliratát adja vissza.

![A Hidden Label mező beállításai](./kepek/elementor-pro-form-rejtett-felirat.webp)

*A Hidden Label mező beállításai* (https://minta-bolt.hu/wp-admin/post.php?post=63&action=elementor)

1. A **Pizza** mező **Beállítások** szövege legyen például: `Margherita|1000`, `Salami|1200`, `Burgonyás|1200` (egy sorban egy elem).
2. Add hozzá a **Hidden Label** típusú mezőt, egyedi azonosítója legyen például `pizza_felirat`.
3. A **Mező ID** mezőbe írd a legördülő lista azonosítóját (itt `pizza`).

A felirat ezután felhasználható az e-mailben, az üzenetben vagy a többi műveletben a `{form:...}` shortcode-dal:

```text
Ezt a pizzát választottad: {form:pizza_felirat}, ára {form:pizza} Ft.
```

## JS Field

A **JS Field** olyan mező, amelynek értékét egy JavaScript-függvény számolja ki a többi mezőből.

![A JS Field mező beállításai](./kepek/elementor-pro-form-js-mezo.webp)

*A JS Field mező beállításai* (https://minta-bolt.hu/wp-admin/post.php?post=63&action=elementor)

A **JS kód** mezőben egy függvényt kell visszaadnod, ami az eredményt adja vissza. A függvényt a mező értékének minden változásakor újra lefuttatja a bővítmény.

```javascript
return () => { return "Szia " + getField("nev") + "!"; }
```

A `getField(mezoId)` függvény egy másik mező aktuális értékét adja vissza. Fontos tudnivalók:

- Az érték mindig **szövegként** érkezik. A `getField("kor") + 2` ezért `212`, ha a kor 21.
- Ha számként kell, a második paraméter legyen `true`: `getField("kor", true) + 2` eredménye 23.
- Ha a mező üres, az eredmény `NaN`. Ilyenkor alapértéket a harmadik paraméterrel adhatsz: `getField("kor", true, 25)`.
- Jelölőnégyzetnél és többszörös kijelölésű választónál a `getField` a kiválasztott opciók tömbjét adja vissza; ha nincs kijelölve semmi, üres szöveget.
- Ha az értéket aszinkron kódból kell frissíteni, használd az `updateSelf("új érték")` függvényt.

A panel egyszerű, rövid formája is elfogadott, például a képen: `return getField("kor", true, 0) + 2;`.

Az **Elrejtés** kapcsoló nem jeleníti meg a mezőt az űrlapon, az értéke viszont megmarad a műveletekhez (például e-mail küldéséhez). A **Frissítés minden billentyűleütéskor** kapcsoló nélkül az érték akkor frissül, amikor a másik mező elveszíti a fókuszt.

### ACF-mező értékének használata

ACF-mező értékét a JS Field nem éri el közvetlenül. Hozz létre egy Elementor **Rejtett** mezőt, állítsd be az értékét dinamikus címkével az ACF-mezőre, majd a JS Field-ben a rejtett mező azonosítóját add át a `getField`-nek.

## Live HTML

A **Live HTML** olyan, mint az Elementor HTML mezője, de be tudsz szúrni bele más mezők értékét, és az az űrlap kitöltése közben élőben frissül.

![A Live HTML mező beállításai](./kepek/elementor-pro-form-live-html.webp)

*A Live HTML mező beállításai* (https://minta-bolt.hu/wp-admin/post.php?post=63&action=elementor)

A mező értékét `{{form.mezo-id}}` alakban írd, dupla kapcsos zárójelben:

```html
Szia <b>{{form.nev}}</b>!
```

A **Frissítés minden billentyűleütéskor** kapcsoló nélkül a tartalom akkor frissül, amikor a mező elveszíti a fókuszt.

### Ismétlődő rész több választásnál

Ha egy mezőben több elem is kiválasztható (például jelölőnégyzetek), sablont adhatsz, amely minden választott elemre megismétlődik:

```html
Ezeket választottad:
<ul>
  {{#form.mezo-id}}
    <li>{{.}}</li>
  {{/form.mezo-id}}
</ul>
```

A `{{#form.mezo-id}}` nyitja az ismétlődést, a `{{.}}` az aktuális elemet írja ki, a `{{/form.mezo-id}}` zárja.

### Megjelenítés feltételhez kötve

Hasonló szintaxissal egy részt csak akkor jelenítesz meg, ha a mező ki van töltve (vagy be van jelölve), és mást, ha nincs:

```html
{{# form.elfogadas }}
  Köszönjük, hogy elfogadtad a feltételeket.
{{/ form.elfogadas }}
{{^ form.elfogadas }}
  A továbblépéshez el kell fogadnod a feltételeket.
{{/ form.elfogadas }}
```

### Feltöltött fájlok képként

Fájlfeltöltő mezőnél a feltöltött képet és a fájlnevét meg tudod jeleníteni: a kép elérési útja `{{form.feltolto_id.url}}`, a fájlnév `{{form.feltolto_id.name}}`.

```html
Szia {{form.nev}}, ezeket a képeket töltötted fel:
{{#form.feltolto_id}}
  <figure>
    <img src="{{ url }}">
    <figcaption>{{ name }}</figcaption>
  </figure>
{{/form.feltolto_id}}
```

Ha csak akkor akarsz képet mutatni, amikor a feltöltött fájl valóban kép, tedd a kódot ebbe a blokkba:

```html
{{# form.feltolto_id.is_image }}
  <!-- ide jön a kép megjelenítése -->
{{/ form.feltolto_id.is_image }}
```