الــفـــكـــرة سنقوم بإنشاء نموذج كمثال لتسجيل عضو ما على الموقع. ثم سنضيف عنصر "HTML" و ذلك لإظهار رسالة ما في حالة ما. كود HTML: <form id="register-form"> <div class="form-group mb-4"> <label for="email">الإسم</label> <input type="text" placeholder="الإسم" class="form-control" disabled> </div> <div class="form-group mb-4"> <label for="email">اللقب</label> <input type="text" placeholder="اللقب" class="form-control" disabled> </div> <div class="form-group mb-4"> <label for="email">البريد الإلكتروني</label> <input type="text"placeholder="أدخل عنوان إلكتروني" class="form-control" disabled> </div> <div class="form-group mb-4"> <label for="email">كلمة المرور</label> <input type="password" class="form-control" disabled> </div> <button type="submit" class="btn btn-primary btn-sm submit-btn"> تسجيل </button> <span id="info"></span><!-- عنصر إظهار الرسالة --> </form> كما لاحظنا، تم تعطيل جميع المدخلات "inputs" و هذا لمثالنا هذا فقط. ثم سنضيف كود جافا سكريبت يمنع إرسال البيانات عندما يتم إرسال النموذج. ميزة هذا الكود، ستكون أنه قادر على كشف أي زر بالفئة المحددة ، ويسترجع النموذج الخاص به. ( تم التعليق على جميع التعليمات البرمجية داخل الكود). كود PHP: // "anonymous function" الإعلان عن وظيفة مجهولة باستخدام تقنية وظيفة السهم[/B][/I][/B][/I][I][B][I][B] // (ES6) ECMAScript 2015 (() => { 'use strict'; // عنصر عرض الرسالة const info = document.querySelector('#info'); // الحصول على جميع الأزرار التي لها الفئة المحددة const btn_submit = document.querySelectorAll('.submit-btn'); // إذا كان هناك زر واحد على الأقل if (btn_submit.length >= 1) { // حلقة فوق الكل ، أو العنصر الذي تم العثور عليه Array.from(btn_submit).forEach(btn => { // "click event" إضافة حدث النقر إلى الزر btn.addEventListener("click", () => { // جلب كل أنموذج لكل زر إذا كان موجود const frm = btn.parentNode; // تأكد مما إذا كان نوع الكائن عبارة عن نموذج if (frm && frm.tagName.toLowerCase() === 'form') { // "submit event" أضف إلى كل نموذج حدث الإرسال frm.addEventListener('submit', (e) => { // منع إرسال البيانات e.preventDefault(); e.stopPropagation(); // جعل العنصر المعني بإضهار الرسالة مرئي و إدراج النص به if (info){ info.classList.add('visible'); info.textContent = 'تم إرسال نموذج'; } }, false); } // "console" إضهار النمودج على وحدة التحكم console.log(frm); if (info){ // anonymous function as a callback setTimeout(() => { // "console" رسالة تنبيه في صورة وحدة التحكم غير مفعلة info.textContent = 'أنظر وحدة التحكم (Console)'; }, '2000'); // بعد مدة زمنية محددة "HTML" دالة أو وظيفة مجهولة لمحو فئة من عنصر setTimeout(() => { info.classList.remove('visible'); }, '5000'); } }, false); }); } })(); صفحة المثال كاملة كود HTML: <!doctype html> <html lang="ar" dir="rtl"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>التسجيل على الموقع</title> <!-- RTL Bootstrap CSS --> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.rtl.min.css" integrity="sha384-7mQhpDl5nRA5nY9lr8F1st2NbIly/8WqhjTp+0oFxEA/QUuvlbF6M1KXezGBh3Nb" crossorigin="anonymous"> <style> #info{ background-color: green; color: white; fontWeight: bold; padding: 10px 10px 20px 25px; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; opacity: 0; visibility: hidden; -webkit-transition: opacity 600ms, visibility 600ms; transition: opacity 600ms, visibility 600ms; } #info.visible{ visibility: visible; opacity: 1; } </style> </head> <body class="bg-primary opacity-75"> <div class="container h-100"> <div class="row h-100 mt-5 justify-content-center align-items-center"> <div class="col-md-5 mt-3 pt-2 pb-5 align-self-center border bg-light"> <h1 class="mx-auto w-75">إضغط على الزر</h1> <form id="register-form"> <div class="form-group mb-4"> <label for="email">الإسم</label> <input type="text" placeholder="الإسم" class="form-control" disabled> </div> <div class="form-group mb-4"> <label for="email">اللقب</label> <input type="text" placeholder="اللقب" class="form-control" disabled> </div> <div class="form-group mb-4"> <label for="email">البريد الإلكتروني</label> <input type="text"placeholder="أدخل عنوان إلكتروني" class="form-control" disabled> </div> <div class="form-group mb-4"> <label for="email">كلمة المرور</label> <input type="password" class="form-control" disabled> </div> <button type="submit" class="btn btn-primary btn-sm submit-btn"> تسجيل </button> <span id="info"></span><!-- عنصر إظهار الرسالة --> </form> </div> </div> </div> <script> // "anonymous function" الإعلان عن وظيفة مجهولة باستخدام تقنية وظيفة السهم // (ES6) ECMAScript 2015 (() => { 'use strict'; // عنصر عرض الرسالة const info = document.querySelector('#info'); // الحصول على جميع الأزرار التي لها الفئة المحددة const btn_submit = document.querySelectorAll('.submit-btn'); // إذا كان هناك زر واحد على الأقل if (btn_submit.length >= 1) { // حلقة فوق الكل ، أو العنصر الذي تم العثور عليه Array.from(btn_submit).forEach(btn => { // "click event" إضافة حدث النقر إلى الزر btn.addEventListener("click", () => { // جلب كل أنموذج لكل زر إذا كان موجود const frm = btn.parentNode; // تأكد مما إذا كان نوع الكائن عبارة عن نموذج if (frm && frm.tagName.toLowerCase() === 'form') { // "submit event" أضف إلى كل نموذج حدث الإرسال frm.addEventListener('submit', (e) => { // منع إرسال البيانات e.preventDefault(); e.stopPropagation(); // جعل العنصر المعني بإضهار الرسالة مرئي و إدراج النص به if (info){ info.classList.add('visible'); info.textContent = 'تم إرسال نموذج'; } }, false); } // "console" إضهار النمودج على وحدة التحكم console.log(frm); if (info){ // anonymous function as a callback setTimeout(() => { // "console" رسالة تنبيه في صورة وحدة التحكم غير مفعلة info.textContent = 'أنظر وحدة التحكم (Console)'; }, '2000'); // بعد مدة زمنية محددة "HTML" دالة أو وظيفة مجهولة لمحو فئة من عنصر setTimeout(() => { info.classList.remove('visible'); }, '5000'); } }, false); }); } })(); </script> </body> </html> مــتــابــعــة طــيــبــة
