الاستماع إلى أحداث إرسال النموذج في JavaScript دون تعديل HTML

في هذه المقالة، نتناول التحدي الشائع المتمثل في الاستماع إلى أحداث إرسال النموذج دون تعديل الاضطرار إلى تعديل كود HTML. بدلاً من الاعتماد على سمات onClick أو onSubmit في HTML، فإننا نقدم حل JavaScript خالصًا.

لتحقيق ذلك، نستخدم طريقة EventTarget.addEventListener. تسمح لنا هذه الطريقة بتسجيل وظيفة رد الاتصال التي سيتم تنفيذها عند وقوع حدث معين على عنصر نموذج.

var ele = /*Your Form Element*/;
if (ele.addEventListener) {
  ele.addEventListener("submit", callback, false); // Modern browsers
} else if (ele.attachEvent) {
  ele.attachEvent('onsubmit', callback); // Old IE
}

استبدل "ele" بالإشارة إلى عنصر النموذج الخاص بك و"رد الاتصال" بالوظيفة التي تريد تنفيذها عند إرسال النموذج.

لمنع سلوك إرسال النموذج الأصلي (على سبيل المثال، ، تحديث الصفحة)، استخدم طريقة .preventDefault() ضمن وظيفة رد الاتصال الخاصة بك:

document.querySelector("#myForm").addEventListener("submit", function (e) {
  if (!isValid) {
    e.preventDefault(); // Stop form from submitting
  }
});

الاستماع إلى إرسال الأحداث باستخدام المكتبات

jQuery

$(ele).submit(callback);

[jsfiddle.net/DerekL/wnbo1hq0/show](http://jsfiddle.net/DerekL/wnbo1hq0/show)

باستخدام هذه التقنيات، يمكنك استمع بسهولة إلى أحداث إرسال النموذج في JavaScript دون الحاجة إلى لمس كود HTML.