[Sugester V2](https://pomoc.sugester2.pl.md) / [Formularze](https://pomoc.sugester2.pl/formularze-1.md)

# [Custom JavaScript w formularzach](https://pomoc.sugester2.pl/custom-javascript-w-formularzach-XPzKJcmx.md)

## Custom JavaScript w formularzach

Każdy formularz ma pole **JavaScript formularza** (`custom_js`), w którym można wpisać dowolny kod JS wykonywany po załadowaniu formularza. Działa zarówno w podglądzie (show_preview) jak i na zewnętrznych stronach (widget).

## Gdzie znajdziesz to pole?

Edycja formularza → sekcja **Wygląd i CSS** → pole "JavaScript formularza" na dole.

## Jak to działa?

1. Kod JS jest zapisywany w `fields["custom_js"]` formularza (JSONB)
2. Przy renderowaniu formularza, kod jest wstawiany jako `<script>` w HTML
3. Widget Svelte na zewnętrznych stronach wykonuje skrypty po załadowaniu formularza

## Przykład: warunkowa widoczność pól

Najczęstsze zastosowanie - ukrywanie/pokazywanie pól w zależności od wybranej opcji w select:

```javascript
(function() {
  var form = document.getElementById("intum_form_6");
  if (!form) return;

  var select = form.querySelector("#result_results_26");
  if (!select) return;

  // reguły: wartość selecta → lista ID pól do pokazania
  var rules = {
    "0": [27, 29],       // Opcja 1 → pokaż pola 27 i 29
    "1": [29, 30],       // Opcja 2 → pokaż pola 29 i 30
    "2": [29]            // Opcja 3 → pokaż tylko pole 29
  };

  // lista wszystkich warunkowych pól
  var allConditional = [27, 28, 29, 30];

  function update() {
    var val = select.value;
    var show = rules[val] || [];
    allConditional.forEach(function(id) {
      var el = document.getElementById("intum_field_" + id);
      if (el) el.style.display = show.indexOf(id) !== -1 ? "" : "none";
    });
  }

  // ukryj wszystkie warunkowe pola na start
  allConditional.forEach(function(id) {
    var el = document.getElementById("intum_field_" + id);
    if (el) el.style.display = "none";
  });

  select.addEventListener("change", update);
})();
```

## Jak znaleźć ID pól?

- ID pola formularza to `intum_field_{ID}` (np. `intum_field_27`)
- ID inputa to `result_results_{ID}` (np. `result_results_26`)
- ID formularza to `intum_form_{ID}` (np. `intum_form_6`)
- Najłatwiej: otwórz podgląd formularza i użyj DevTools (F12) → Inspect

## Inne zastosowania

- Walidacja pól (np. sprawdzenie formatu NIP)
- Dynamiczne obliczenia (np. suma pól)
- Integracja z zewnętrznymi skryptami
- Ukrywanie elementów formularza
- Dodanie custom event listeners

## Ograniczenia

- Kod działa **tylko w przeglądarce** (client-side) - nie ma dostępu do serwera
- Nie może wysyłać maili ani tworzyć zadań

---

**Powiązane artykuły:**
- [Warunkowe odpowiedzi w formularzach](https://sugester.intum.com/kb/sugester-v2/warunkowe-odpowiedzi-w-formularzach-v2-ahoUdTZr)
- [Moduł Formularze](https://sugester.intum.com/kb/sugester-v2/modul-formularze-zbieranie-zgloszen-i-danych-8Uq2CEaj)