لماذا يتم وضع حدث onSubmit في وسم الform؟

ال event المسمى onSubmit مخصص للعنصر form وغير متاح للعنصر button. بدلاً من ذلك يوجد onClick لنضعه على button. وهذا كله أبعد من react حيث أن منصة react مبينة على JavaScript التي تتضمن كل من الevents سالفي الذكر.

يمكننا الإستفادة من onSubmit مثلاً إذا كنت تريد إرسال البيانات asynchronously في تعطيل الإجراء الإفتراضي لform (وهو إرسال مدخلاته مباشرة الى الخادم) ومن ثم معالجة البيانات قبل إرسالها على سبيل المثال أو في حالة عمل validation للمدخلات قبل إرسالها.

...
const submitHandler= (event) => {
  event.preventDefault() // تعطيل الإرسال المباشر
  //validation  التحقق من صحة المدخلات
  ...
  //JSON معالجة البيانات هنا مثلاً تحول مصفوفة بيانات الى نص عن طريق 
  //axios أو fetch  إرسال الطلب الى الخادم عن طريق 
  ...
}
    

إن حدث إطلاق (إرسال بيانات الاستمارة) متعلق بالعنصر form نفسه وليس بالزر الموجود في الاستمارة نفسها

أي من الخطأ وضع مستمع حدث onSubmit على عنصر آخر غير form. الزر button قد يكون له نمط submit ووجوده في نفس الاستمارة يعمل على إرسالها

في حال أردت معالجة إرسال الاستمارة بطريقة أخرى يمكن ربط دالة المعالجة بالحدث onClick لعنصر إدخال آخر مثل زر

أي كل من الطريقتين ممكنتين:

<form ... onsubmit="func();">

<input type="submit" ... onclick="func();">

في حال وجود أكثر من زر يرسل طلبات مختلفة لنفس الاستمارة يمكن وضع دالة لكل زر يتوقع أن يكون له سلوك مختلف، لكن الشكل العام والصحيح هو onSubmit  ل form

يتم استخدام onsubmit في form لانها ترجع قيمة منطقية true او false وعندما يتم ارجاع قيمة true يتم اجراء الحدث المطلوب عند النقر على button

وفي ال button تستخدم onclick= "function();"

لاجراء الحدث المطلوب

احب ان أضيف الي ما ذكرة الاصدقاء من معلومات قيمة فيما يتعلق بالحدث onSubmit في الوسم Form ان طبيعة الحدث هي إرسال البيانات من الفورم الي وسيلة التخزين، وبالتالي يأخذ حدث onSubmit بإرسال هذه البيانات عبر الزر Button ومن خلال حدث Onclick.