JavaScript Form Events
أحداث form في لغة جافا سكريبت
سوف تتعلم في هذا الدرس أهم الأحداث التفاعلية في لغة سكريبت مع عناصر form مثل أحداث تغيير قيمة input أو عند إرسال البيانات submit.
التاريخ
الدروس
المستوى
اللغة
المشاهدات
المواضيع
الشروحات 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')
});
CLOSETAG
منصة كلوز تاج التعليمية المتخصصة في تعليم البرمجة. نسعى لتقديم تجربة تعلم فريدة من خلال معسكراتنا العملية والمنظمة والمتسلسلة كما نهدف إلى تقليص الفجوة بين النظرية والتطبيق العملي؛ لذا فإننا نركز على التعليم القائم على المشاريع والتطبيقات الحقيقية. ننقل لك سنوات من الخبرة في أقل وقت ممكن تحت إشراف مهندسين عباقرة عملوا في أكبر الشركات العربية والعالمية في مجال البرمجة. مهمتنا ليست فقط تعليم البرمجة، بل نسعى أيضًا لتزويدك بمجموعة من المهارات التي تتوافق مع احتياجات سوق العمل.
