الدرس الرابع عشر: التحكم في النماذج (Forms) في JavaScript

 تستخدم النماذج (Forms) للحصول على بيانات من المستخدم مثل الاسم، البريد الإلكتروني، الرسائل، وغير ذلك. JavaScript تتيح لك التفاعل مع هذه النماذج والتحكم في سلوكها.

---

1. إنشاء نموذج HTML بسيط

<form id="myForm">
  <input type="text" id="username" placeholder="اسم المستخدم">
  <button type="submit">إرسال</button>
</form>

---

2. منع إعادة تحميل الصفحة عند الإرسال

بشكل افتراضي، النموذج يعيد تحميل الصفحة عند الضغط على زر "إرسال"، لكن يمكن منع هذا السلوك باستخدام:

let form = document.getElementById("myForm");

form.addEventListener("submit", function(e) {
  e.preventDefault(); // تمنع إعادة تحميل الصفحة
  console.log("تم إرسال النموذج");
});

---

3. قراءة قيمة حقل الإدخال

form.addEventListener("submit", function(e) {
  e.preventDefault();
  let username = document.getElementById("username").value;
  console.log("اسم المستخدم:", username);
});

---

4. التحقق من صحة البيانات (Validation)

form.addEventListener("submit", function(e) {
  e.preventDefault();
  let username = document.getElementById("username").value;

  if (username === "") {
    alert("الرجاء إدخال اسم المستخدم");
  } else {
    alert("تم إرسال البيانات بنجاح!");
  }
});

---

5. استخدام trim() لإزالة الفراغات

if (username.trim() === "") {
  alert("لا يمكن ترك الحقل فارغًا");
}

---

✅ ملخص الدرس:

• يمكنك التحكم في سلوك النماذج باستخدام JavaScript.
• استخدم preventDefault() لمنع إعادة تحميل الصفحة.
• استخدم .value لقراءة القيم من الحقول.
• يمكنك التحقق من صحة الإدخالات قبل الإرسال.