The DOM ForestISSUE #10 of 21

forms · accessing values

NodetteVSThe Event Bubbler

Nodette saysRead and control form fields through value, checked, and the form’s elements.

Get text inputs with input.value, checkboxes/radios with input.checked, and selects with select.value. form.elements (or new FormData(form)) gathers everything at once. Listen for input (every keystroke) or change (on commit), and call e.preventDefault() on submit to handle it in JS.

Power-ups you unlock

input.value · checkbox.checked · select.value
FormData(form) collects all fields
input event = live; change = on commit
preventDefault() to handle submit in JS

The Event Bubbler attacks — common mistakes

Reading .value on a checkbox instead of .checked
Forgetting preventDefault (page reloads)
Querying fields one-by-one instead of FormData

Boss battleCapture a form submit, read the input value, and show it without reloading.

Example code

<!doctype html><html><head><meta charset="utf-8"></head>
<body style="background:#06040d;color:#e6e0ff;font-family:monospace;padding:20px">
<form id="f"><input name="q" placeholder="type"><button>go</button></form><pre id="o"></pre>
<script>document.getElementById('f').onsubmit=e=>{e.preventDefault();document.getElementById('o').textContent='you typed: '+e.target.q.value;};</script></body></html>

▶ Open the interactive comic issue

‹ Styles · Element.Style · GetComputedStyle Events · AddEventListener · RemoveEventListener ›