Advance JavaScript (DOM, BOM, Web API) / Document Object Model

Scripting Web Forms

Web forms allow users to enter data and send it to the server.

JavaScript helps us validate, control, and respond to user input before submission.

1️⃣ Handling Form Submit Event & Validation

📌 What is Form Submission?

When a user clicks Submit, the browser:

  • Reloads the page

  • Sends data to the server

👉 JavaScript allows us to stop submission and validate data first.

✅ Basic Submit Handling

<form id="loginForm">
  <input type="text" id="username" placeholder="Username">
  <button type="submit">Login</button>
</form>

🧠 Key Points

  • submit event fires when form is submitted

  • event.preventDefault() stops reload

  • Validation happens before sending data

2️⃣ Radio Buttons

Radio buttons allow users to select only one option from a group.

✅ Example

🧠 Notes

  • Same name → one selection

  • Use .checked to find selected radio

3️⃣ Checkboxes

Checkboxes allow multiple selections.

✅ Example

🧠 Notes

  • .checked → true / false

  • Multiple values possible

4️⃣ Select Box (<select> Element)

Used for dropdown menus.

✅ Example

🧠 Notes

  • select.value → selected option value

  • change event fires when selection changes

👉 Add Options Dynamically Example

🧠 Use Case

✔ Dynamic country/state lists

✔ API-driven dropdowns

👉 Remove Options Dynamically

🧠 Why Loop Backwards?

✔ Prevents index shifting issues

5️⃣ Handling change Event

Fires when input value changes and loses focus.

Applies To:

  • Text inputs

  • Radio buttons

  • Checkboxes

  • Select dropdowns

✅ Example

🧠 Use Case

✔ Form validation

✔ Filters

✔ Settings updates

6️⃣ Handling input Event

Fires immediately when value changes.

✅ Example

🧠 Difference: input vs change

Event

When it fires

input

On every keystroke

change

After focus lost

📌 Real-World Use

✔ Live search

✔ Password strength meter

✔ Character counter