DOM Manipulation

อ่านค่า input ด้วย `.value`

ทุกครั้งที่ต้องการนำข้อมูลที่ผู้ใช้พิมพ์ไปใช้งาน ให้อ่านจาก property `.value` ของ input element `.value` คืนค่าเป็น **string** เสมอ ไม่ว่า input จะเป็น type อะไร

const nameInput = document.querySelector("#name");

// อ่านค่าปัจจุบันใน input
console.log(nameInput.value); // "สมชาย" (ถ้าพิมพ์ไว้)

// เซ็ตค่าให้ input ก็ได้
nameInput.value = "ค่าเริ่มต้น";

ดักจับ submit ด้วย `addEventListener('submit')`

`submit` event เกิดที่ **form element** ไม่ใช่ที่ปุ่ม submit ดังนั้นให้ผูก listener ที่ `<form>` โดยตรง

const form = document.querySelector("#form");

form.addEventListener("submit", function(e) {
  console.log("form ถูก submit แล้ว");
});

`event.preventDefault()` — ป้องกัน reload หน้า

พฤติกรรมปกติของ form submit คือ browser จะ **reload หน้า** หรือนำทางไปยัง action URL ซึ่งทำให้ข้อมูลใน JavaScript หายไป `e.preventDefault()` หยุดพฤติกรรมนั้น ทำให้เราจัดการข้อมูลใน JavaScript ได้เต็มที่

const form = document.querySelector("#form");
const nameInput = document.querySelector("#name");

form.addEventListener("submit", function(e) {
  e.preventDefault(); // หยุด reload

  const value = nameInput.value;
  console.log("ชื่อที่กรอก:", value);
});

Validate ข้อมูลก่อนใช้งาน

ก่อนนำค่าจาก input ไปใช้ ควรตรวจสอบว่าไม่ว่างเปล่า `.trim()` ตัด whitespace (เช่น space, tab, newline) ที่ขึ้นต้นและลงท้ายออก — ทำให้ตรวจ empty string ได้แม่นยำขึ้น

form.addEventListener("submit", function(e) {
  e.preventDefault();

  const value = nameInput.value.trim();

  if (!value) {
    console.log("กรุณากรอกชื่อ");
    return; // หยุดทำงานต่อ
  }

  console.log("ชื่อ:", value);
});

ถ้าต้องการตรวจขั้นต่ำ เช่น ความยาว ก็ทำได้เช่นกัน: ``` if (value.length < 3) { ... } ```

ข้อควรระวัง

• **`.value` เป็น string เสมอ** — ถ้า input เป็น `type="number"` ค่าที่ได้ยังเป็น string เช่น `"42"` ต้องแปลงด้วย `Number()` หรือ `parseInt()` ก่อนคำนวณ
• **ผูก listener ที่ form ไม่ใช่ button** — ถ้าผูก click ที่ button แทน submit ที่ form จะพลาดกรณีที่ผู้ใช้กด Enter
• **checkbox ใช้ `.checked` ไม่ใช่ `.value`** — `input[type='checkbox'].checked` คืน `true`/`false` ส่วน `.value` คืน string ที่กำหนดใน attribute เสมอ
• **เรียก `preventDefault()` ก่อนอ่านค่า** — ในกรณีที่มี validation error ควร preventDefault ก่อนเสมอ มิฉะนั้น form อาจ submit ไปก่อนที่โค้ดจะตรวจ

Lab 1: อ่านค่า input เมื่อ submit

Lab 2: Validate ข้อมูลก่อน submit