JavaScript - DOM Forms

9.6 JavaScript - DOM Forms (التعامل مع النماذج)

🔸 يمكنك استخدام JavaScript للوصول إلى النماذج (forms) وعناصرها، وتعديل القيم، والتحقق منها، أو إرسال البيانات، وكل ذلك من خلال DOM.

---

🔹 الوصول إلى نموذج باستخدام document.forms

// الوصول إلى أول نموذج في الصفحة
const form = document.forms[0];

// أو بالاسم
const myForm = document.forms["myForm"];

---

🔹 الوصول إلى حقل داخل النموذج

const username = document.forms["myForm"]["username"].value;

📌 يمكن استخدام اسم النموذج واسم الحقل للوصول إلى القيم المدخلة.

---

🔹 مثال: التحقق من حقل قبل الإرسال

function validateForm() {
  const name = document.forms["myForm"]["username"].value;
  if (name == "") {
    alert("الرجاء إدخال الاسم");
    return false;
  }
}

📌 تُستخدم هذه الدالة مع onsubmit في HTML للتحقق من صحة البيانات.

---

🔹 تغيير قيمة حقل أو خصائصه

document.forms["myForm"]["email"].value = "example@email.com";
document.forms["myForm"]["email"].disabled = true;

---

🔹 الوصول إلى جميع عناصر النموذج

const inputs = document.forms["myForm"].elements;

for (let i = 0; i < inputs.length; i++) {
  console.log(inputs[i].value);
}

---

⚠️ ملاحظات مهمة

• تُسهل DOM العمل مع النماذج بشكل كبير.
• يمكنك التحقق من القيم قبل الإرسال لتفادي أخطاء المستخدم.
• تُعتبر document.forms وسيلة سريعة للوصول إلى النموذج وحقوله.