JavaScript

JavaScript Form Events
أحداث form في لغة جافا سكريبت

سوف تتعلم في هذا الدرس أهم الأحداث التفاعلية في لغة سكريبت مع عناصر form مثل أحداث تغيير قيمة input أو عند إرسال البيانات submit.

التاريخ

24 نوفمبر 2022

الدروس

146

المستوى

العامة

اللغة

انجليزي

المشاهدات

876

المواضيع

24
الشروحات chevron_left JavaScript Form Events chevron_left JavaScript

JavaScript Form Events
أحداث form في لغة جافا سكريبت

</> JavaScript on change event
حدث عند تغيير قيمة input في لغة جافا سكريبت

في لغة جافا سكريبت يمكن عند تغيير قيمة input يتم تنفيذ أمر برمجي داخل صفحة الويب مثل إضافة border للحقل.

JavaScript on change event attribute

كتابة event جافا سكريبت داخل العنصر في صفحة HTML.

<input type="text" class="input" placeholder="Enter Username" onchange="this.style.border='1px solid #55efc4'">
JavaScript on change event function

كتابة event جافا سكريبت داخل دالة في جافا سكريبت.

let input = document.getElementById("input");
input.onchange = function(){
  input.style.border='1px solid #55efc4'
};
JavaScript on change addEventListener

كتابة event جافا سكريبت داخل دالة addEventListener في جافا سكريبت.

let input = document.getElementById("input");
input.addEventListener('change',()=>{
   input.style.border='1px solid #55efc4'
});

</> JavaScript on blur event
حدث بعدما تتغير قيمة input في لغة جافا سكريبت

في لغة جافا سكريبت يمكن بعد تغيير قيمة input يتم تنفيذ أمر برمجي داخل صفحة الويب مثل إضافة border للحقل.

JavaScript on blur event attribute

كتابة event جافا سكريبت داخل العنصر في صفحة HTML.

<input type="text" class="input" placeholder="Enter Username" onchange="alert('onchange')" onblur="alert('onblur')">
JavaScript on blur event function

كتابة event جافا سكريبت داخل دالة في جافا سكريبت.

input.onblur = function(){
  input.style.border='2px solid red';
}
JavaScript on blur event addEventListener

كتابة event جافا سكريبت داخل دالة addEventListener في جافا سكريبت.

input.addEventListener('blur',()=>{
   input.style.border='2px solid red'
});

</> JavaScript on focus event
حدث الارتكاز داخل input في لغة جافا سكريبت

في لغة جافا سكريبت يمكن عند الارتكاز داخل input يتم تنفيذ أمر برمجي داخل صفحة الويب مثل إضافة border للحقل.

JavaScript on focus event attribute

كتابة event جافا سكريبت داخل العنصر في صفحة HTML.

<input type="text" class="input" placeholder="Enter Username" onfocus="this.style.border='2px solid red';">
JavaScript on focus event function

كتابة event جافا سكريبت داخل دالة في جافا سكريبت.

let input = document.getElementById("input");
input.onfocus = function(){
  input.style.border='1px solid #55efc4';
}
JavaScript on focus event addEventListener

كتابة event جافا سكريبت داخل دالة addEventListener في جافا سكريبت.

let input = document.getElementById("input");
input.addEventListener('focus',()=>{
   input.style.border='1px solid #55efc4'
});

</> JavaScript on submit event
حدث عند إرسال البيانات إلي السيرفر في لغة جافا سكريبت

في لغة جافا سكريبت يمكن عند إرسال البيانات من form إلي السيرفر يتم تنفيذ أمر أو مجموعة أوامر برمجية مثل إظهار رسالة.

JavaScript on submit event attribute

كتابة event جافا سكريبت داخل العنصر في صفحة HTML.

<form action="" method="post" onsubmit="alert('Data Sent successfully')">
  <input type="text" class="input" placeholder="Enter Username">
  <input class="btn" type="submit">
</form>
JavaScript on submit event function

كتابة event جافا سكريبت داخل دالة في جافا سكريبت.

form.onsubmit = function(){
  alert('Data Sent successfully')
}
JavaScript on submit event addEventListener

كتابة event جافا سكريبت داخل دالة addEventListener في جافا سكريبت.

form.addEventListener('submit',()=>{
   alert('Data Sent successfully')
});
معلومات تهمك
  • لا تنسى تقييم الدروس لكي نُحدّث المُحتوى باستمرار حتى ينال إعجابك.
  • لا تنسى مشاركة الموقع مع أصدقاءك حتى تعمّ الفائدة وتكون سبب في نفعهم.
مشاركة
0
0
0
0
عدد المشاركات
هل هذه المعلومات نالت إعجابك ؟
0
0
عدد التقييمات

لديك استفسار ؟

يسعدنا كثيرا مساعدتك في استيعاب افضل للأمور, فلا تترد مطلقا في الاتصال بنا في حال كانت لديك اية اسئله او استفسارات.