# Mező írásvédetté (csak olvashatóvá) tétele

> JavaScript-példák szövegmező, bekezdésszöveg, jelölőnégyzet és rádiógomb csak olvashatóvá tételére.

Egy mező írásvédetté tétele hasznos, ha a mezőt üzenetek vagy számított értékek dinamikus megjelenítésére használod, és a látogató ne írhassa át. A Gravity Forms ehhez nem ad beépített beállítást, ezért JavaScriptet kell használnod.

## Előkészület: egyedi CSS-osztály

Add meg az írásvédetté tenni kívánt mezőnek az **Egyedi CSS-osztály** beállításban a `gf_readonly` osztályt (más nevet is használhatsz, akkor a kódban is azt írd). A szkriptek ezzel az osztállyal találják meg a mezőt, és beállítják rajta a `readonly` attribútumot.

A kódok az űrlap kirajzolása után lefutó `gform/postRender` eseményre kapcsolódnak.

## Bekezdésszöveg mező

```javascript
document.addEventListener('gform/postRender', (event) => {
	const form = gform.utils.getNode(`#gform_${event.detail.formId}`, document, true);
	const textareas = Array.from(gform.utils.getNodes('.gf_readonly textarea', false, form, true));

	textareas.forEach(textarea => {
		textarea.readOnly = true;
	});
});
```

## Szöveges beviteli mezők

Ez minden olyan mezőtípusnál működik, amelynek HTML-beviteli eleme szöveges, például a dátumválasztónál is.

```javascript
document.addEventListener('gform/postRender', (event) => {
    const form = gform.utils.getNode(`#gform_${event.detail.formId}`, document, true);
    const inputs = Array.from(gform.utils.getNodes('.gf_readonly input', false, form, true));

    inputs.forEach(input => {
        input.readOnly = true;
    });
});
```

## Jelölőnégyzetek

A jelölőnégyzeteknél a `readonly` attribútum nem hat, ezért a kattintást kell letiltani.

```javascript
document.addEventListener('gform/postRender', (event) => {
    const form = gform.utils.getNode(`#gform_${event.detail.formId}`, document, true);
    const checkboxes = Array.from(gform.utils.getNodes('.gf_readonly input[type=checkbox]', false, form, true));

    checkboxes.forEach(checkbox => {
        checkbox.addEventListener('click', (event) => event.preventDefault());
    });
});
```

## Rádiógombok

```javascript
document.addEventListener('gform/postRender', (event) => {
    const form = gform.utils.getNode(`#gform_${event.detail.formId}`, document, true);
    const radioButtons = Array.from(gform.utils.getNodes('.gf_readonly input[type=radio]', false, form, true));

    radioButtons.forEach(radio => {
        radio.addEventListener('click', (event) => event.preventDefault());
    });
});
```

## Hová tedd a kódot

A JavaScriptet az oldal frontendjén kell betöltened. A lehetőségeket a [JavaScript hozzáadása az oldal frontendjéhez](https://hub.hellowp.io/hu/plugins/gravityforms/hogyan-javascript-a-frontenden/) fejezet írja le.

## Kód nélküli megoldás

Ha nem szeretnél kódot írni, harmadik féltől származó bővítmény is megoldja, például a Gravity Wiz csapat GP Read Only nevű bővítménye. A harmadik féltől származó megoldásokat a Gravity Forms csapata nem vizsgálja és nem támogatja: te felelsz azért, hogy megfelelnek-e a projekted funkcionális, biztonsági, jogi és költségigényeinek.