حدث submit
تعاملوا مع إرسال النموذج ومنع إعادة التحميل.
حدث submit درس مجاني في JavaScript Academy على CoddyKit. هذا هو الدرس 2 من أصل 4. يمكنك قراءة الدرس كاملاً أدناه مجاناً — ثم تمرن عليه مباشرة في المتصفح باستخدام محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7. هذا الدرس جزء من مسار التعلم في JavaScript Academy، وتقدمك يتزامن عبر الويب وتطبيق CoddyKit. تتضمن دورة JavaScript Academy 4 دروس في المجموع.
إرسال النماذج
يُطلَق حدث submit عند إرسال النموذج، سواء بالنقر على زر إرسال أو بالضغط على Enter داخل حقل. وهذا هو المكان المناسب لمعالجة بيانات النموذج.
الاستماع إلى النموذج
أضف مستمع الحدث إلى عنصر form نفسه، لا إلى زر الإرسال، حتى تغطي جميع طرق الإرسال.
const form = document.querySelector("#signup");
form.addEventListener("submit", (e) => {
console.log("submitting");
});إعادة التحميل الافتراضية
يؤدي إرسال النموذج افتراضيًا إلى الانتقال إلى صفحة أخرى أو إعادة تحميل الصفحة. أما في التطبيقات التي تعتمد على JavaScript فعادةً ما تلغي هذا السلوك.
form.addEventListener("submit", (e) => {
e.preventDefault();
});لماذا نستخدم preventDefault هنا
يُبقي استدعاء preventDefault الصفحة في مكانها، بحيث يمكنك التحقق من البيانات وإرسالها بنفسك، وغالبًا باستخدام fetch.
form.addEventListener("submit", (e) => {
e.preventDefault();
const data = new FormData(form);
// send data without reloading
});أزرار الإرسال
يؤدي عنصر button الذي يحمل type="submit"، وهو النوع الافتراضي داخل النموذج، إلى تشغيل الإرسال. استخدم type="button" للأزرار التي لا ينبغي أن ترسل النموذج.
يؤدي مفتاح Enter إلى الإرسال
يؤدي الضغط على Enter داخل حقل نص أحادي السطر إلى إرسال النموذج، ولذلك من الضروري الاستماع إلى النموذج نفسه.
requestSubmit
ترسل form.requestSubmit النموذج برمجيًا مع الاستمرار في إطلاق حدث الإرسال وتشغيل التحقق، بخلاف form.submit التي تتجاوز كليهما.
form.requestSubmit(); // fires submit event + validates
// form.submit(); // bypasses validation and the eventقراءة البيانات عند الإرسال
أنشئ داخل معالج الحدث كائن FormData من النموذج لجمع جميع الحقول المسماة بطريقة منظمة.
form.addEventListener("submit", (e) => {
e.preventDefault();
const fd = new FormData(form);
const obj = Object.fromEntries(fd.entries());
console.log(obj);
});تعطيل الزر
لمنع الإرسال المزدوج، عطّل زر الإرسال أثناء المعالجة، ثم أعد تفعيله عند الانتهاء.
form.addEventListener("submit", (e) => {
e.preventDefault();
const btn = form.querySelector("[type=submit]");
btn.disabled = true;
});إعادة تعيين النموذج
تمسح form.reset الحقول وتعيدها إلى قيمها الافتراضية، كما يتيح لك حدث reset الاستجابة لهذه العملية.
form.addEventListener("reset", () => {
console.log("cleared");
});عنصر Submitter
تحدد الخاصية submitter في حدث الإرسال الزر الذي سبّب الإرسال، وهو أمر مفيد عندما يحتوي النموذج على عدة أزرار إرسال.
form.addEventListener("submit", (e) => {
console.log(e.submitter && e.submitter.value);
});تحقق سريع
اختر أفضل ممارسة.
مراجعة
عالج عمليات الإرسال باستخدام حدث submit الخاص بالنموذج، واستدعِ preventDefault في التطبيقات التي تعتمد على JavaScript. استمع إلى النموذج، لا إلى الزر، لالتقاط عمليات الإرسال الناتجة عن مفتاح Enter. استخدم FormData لقراءة الحقول، وrequestSubmit للإرسال البرمجي مع التحقق، وعطّل الزر لتجنب الإرسال المزدوج.
الأسئلة الشائعة
هل درس «حدث submit» مجاني؟
نعم — نص درس «حدث submit» كامل متاح مجاناً هنا على الويب. لتمرينه بشكل تفاعلي (محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7) وفتح باقي دورة JavaScript Academy، انتقل إلى CoddyKit PRO. تتضمن دورة JavaScript Academy 4 دروس في المجموع.
ماذا ستتعلم في «حدث submit»؟
تعاملوا مع إرسال النموذج ومنع إعادة التحميل. تتمرن على JavaScript Academy مع أكواد عملية تشغلها مباشرة في المتصفح، ومدرس ذكاء اصطناعي متاح 24/7 يجيب على أسئلتك أثناء عملك.
هل أحتاج إلى خبرة سابقة لأبدأ JavaScript Academy؟
لا تُشترط خبرة سابقة. JavaScript Academy على CoddyKit منظم للمبتدئين حتى المتقدمين، لذا يمكنك البدء من هنا أو من البداية والتقدم بسرعتك الخاصة. هذا هو الدرس 2 من أصل 4.
كم من الوقت يستغرق درس «حدث submit»؟
معظم دروس CoddyKit تستغرق حوالي 5–10 دقائق. كل منها موجز وتفاعلي، لذا تحرز تقدماً مستمراً وتستأنف من حيث توقفت عبر الويب والتطبيق.
هل يمكنني كتابة وتشغيل أكواد في درس JavaScript Academy هذا؟
نعم. كل درس في JavaScript Academy يتضمن محرر أكواد مدمج، لذا تكتب وتشغل أكواداً حقيقية مباشرة في متصفحك وتحصل على تعليقات فورية من الذكاء الاصطناعي — بدون إعداد محلي.