Code Lab BetaBUILD. RUN. DISCOVER.

Code Lab е в разработка. Постепенно добавяме нови уроци и подобрения. Прогресът може да бъде изтрит.

JAVASCRIPT FORMS / CHAPTER 05 / Учене / LESSON 04

FormData.

Около 5–10 минути

Теория. new FormData(form) събира всички полета на формата, които имат name. Не е нужно да търсиш всяко поле поотделно: data.get("name") връща стойност (низ) или null.

Важно правило: неотбелязан checkbox НЕ влиза във FormData изобщо — ключът липсва. Затова data.get("paid") е null, а не "false". Бутонът за изпращане без name също не влиза.

Малки примери:

const data = new FormData(form); const name = data.get("name"); const rows = []; for (const [key, value] of data.entries()) rows.push(key + "=" + value); const text = rows.join(";");

Подредбата следва реда на полетата в DOM. Полета без name (само id) не се виждат във FormData.

Честа грешка: да търсиш id вместо name; да очакваш false за неотбелязан checkbox; да четеш FormData извън submit/клик слушател.

Твоят урок

При submit на #f: preventDefault, после new FormData(form). Обходи data.entries() и изгради текст "ключ=стойност", слепен с ";" в реда на полетата — напиши го в #out. Очакваш "name=Ana;amount=12" — неотбелязаният checkbox "paid" не трябва да се появява.

HTML (точно този фиксчър):
<form id="f"><input id="name" name="name" type="text"><input id="amount" name="amount" type="text"><label><input id="paid" name="paid" type="checkbox" value="yes"> Paid</label><button type="submit">Save</button></form><p id="out"></p>

Хостът прави това след Run (по ред):
1. setValue #name = "Ana"
2. setValue #amount = "12"
3. submit #f

<form id="f"><input id="name" name="name" type="text"><input id="amount" name="amount" type="text"><label><input id="paid" name="paid" type="checkbox" value="yes"> Paid</label><button type="submit">Save</button></form><p id="out"></p>

FormData събира полетата с name; неотбелязан checkbox липсва изцяло.

lesson_04.jsJAVASCRIPT · PAGE

Зареждаме средата… При първо стартиране може да отнеме малко повече.

… 0/20000

STANDBY

DOM PREVIEWSTANDBY

Натисни Run — HTML се зарежда в sandbox iframe; Stop маха iframe-а (спира и безкраен цикъл).

01#out е "name=Ana;amount=12"

02#paid не е отбелязан

03#name остава Ana

КонзолаНапиши кода. Включи системата.

›

Прогрес в Профила →

JAVASCRIPT LABKALKULATORI.BG

Code Lab BetaBUILD. RUN. DISCOVER.

Code Lab е в разработка. Постепенно добавяме нови уроци и подобрения. Прогресът може да бъде изтрит.

Зареждане…

JAVASCRIPT LABKALKULATORI.BG

<form id="f"><input id="name" name="name" type="text"><input id="amount" name="amount" type="text"><label><input id="paid" name="paid" type="checkbox" value="yes"> Paid</label><button type="submit">Save</button></form><p id="out"></p>