يقع الحدث submit
عندما تُسلَّم الاستمارة، ويُستخدم عادة للتحقّق من الاستمارة قبل إرسالها إلى الخادم، أو لإلغاء التسليم والقيام بمعالجته في جافاسكربت.
يمكّن التابع form.submit()
من إرسال الاستمارة بواسطة جافاسكربت. ويمكننا استخدامه لإنشاء وإرسال استماراتنا إلى الخادم ديناميكيًّا.
لنرى المزيد من التفاصيل حولهما.
الحدث: submit
هناك طريقتان رئيسيّتان لتسليم الاستمارة:
-
الأولى بالنقر على
<input type="submit"
>
أو<input type="image"
>
. -
الثانية بالضغط على المفتاح
Enter
داخل حقل المُدخل.
يؤدّي كلا هذين الفعلين إلى وقوع الحدث submit
على الاستمارة. يمكن للمعالج التحقّق من المعطيات، وإذا وجد أنّ هناك أخطاء، فإنّه يبيّنها ويستدعى event.preventDefault()
، لكيلا تُرسل الاستمارة إلى الخادم.
في الاستمارة أدناه، يمكن النقر على <input type="submit">
أو الذهاب إلى داخل الحقل النصّيّ والضغط على Enter
. سيؤدّي كلا الفعلين إلى إظهار alert
ولا تُرسَل الاستمارة إلى أيّ مكان بسبب وجود return false
.
<form onsubmit="alert('submit!');return false"> First: Enter in the input field <input type="text" value="text"><br> Second: Click "submit": <input type="submit" value="Submit"> </form>
ملاحظة: العلاقة بين submit
وclick
عندما تُرسَل الاستمارة باستخدام المفتاح Enter
في حقل المُدخل، فإنّ الحدث click
يقع على العنصر <input type="submit">
. هذا طريف، إذ لم يكن هناك نقرٌ على الإطلاق. يمكن تجربة ذلك بواسطة هذه الشيفرة:
<form onsubmit="return false"> <input type="text" size="30" value="Focus here and press enter"> <input type="submit" value="Submit" onclick="alert('click')"> </form>
التابع: submit
لتسليم استمارة ما إلى الخادم يدويّا، يمكننا استدعاء form.submit()
. لا يتولّد الحدث submit
بذلك، لأنّ المبرمج إذا استدعىform.submit()
، يُفترض أنّ السكربت قد أدّى كلّ المعالجة المطلوبة. يُستخدم ذلك أحيانا لإنشاء وإرسال الاستمارة يدويّا، هكذا:
let form = document.createElement('form'); form.action = 'https://google.com/search'; form.method = 'GET'; form.innerHTML = '<input name="q" value="test">'; // يجب أن تكون الاستمارة في المستند لتسليمها document.body.append(form); form.submit();
التمارين
استمارة في نافذة منبثقة شرطية (modal)
اﻷهميّة: 5
أنشئ الدالّة showPrompt(html, callback)
التي تُظهر استمارة فيها الرسالة html
وحقل مُدخلٍ والأزار OK/CANCEL
.
-
يجب أن يكتب المستخدم شيئا ما في الحقل النصّيّ ثمّ يضغط على المفتاح
Enter
أو الزرّ OK، ليُستدعىcallback(value)
بالقيمة التي أُدخلت. -
وإلاّ فإذا ضغط المستخدم على المفتاح
Esc
أو الزرّ CANCEL، يُستدعىcallback(null)
في كلتا الحالتين تنتهي عمليّة الإدخال وتُزال الاستمارة.
المتطلّبات:
- يجب أن تكون الاستمارة في وسط النافذة.
- الاستمارة هي نافذة منبثقة شرطيّة. بعبارة أخرى، ليس من الممكن التفاعل مع بقيّة الصفحة إلى أن يغلقها المستخدم.
-
عندما تظهر الاستمارة، يجب أن يكون التركيز داخل العنصر
<input>
للمستخدم. -
يجب أن تعمل المفاتيح
Tab
/Shift+Tab
على نقل التركيز بين حقول الاستمارة، لكن لا تسمح بمغادرته إلى عناصر الصفحة الأخرى.
مثال عن كيفيّة الاستخدام:
showPrompt("Enter something<br>...smart :)", function(value) { alert(value); });
يمكن مشاهدة النتيجة من هنا.
ملاحظة: في المستند المصدريّ، يوجد HTML/CSS لاستمارة بتموضع ثابت، وترجع لك مهمّة جعلها نافذة منبثقة شرطيّة.
أنجز التمرين في البيئة التجريبيّة.
الحل
يُمكن إنجاز نافذة منبثقة شرطيّة بواسط عنصر <div id="cover-div">
نصف شفّاف، يغطّي كامل النافذة، هكذا:
#cover-div { position: fixed; top: 0; left: 0; z-index: 9000; width: 100%; height: 100%; background-color: gray; opacity: 0.3; }
ولأنّ هذا الـ<div>
يغطّي كلّ شيء، فإنّه هو الذي يتلقّى جميع النقرات، وليست الصفحة التي تحته. يمكننا أيضا منع تمرير الصفحة بوضع body.style.overflowY='hidden'
.
يجب أن لا تكون الاستمارة داخل <div>
، ولكن بجانبه، لأنّنا لا نريد أن تكون له الشفافيّة opacity
.
ترجمة -وبتصرف- للمقال Forms: event and method submit من سلسلة Browser: Document, Events, Interfaces لصاحبها Ilya Kantor
أفضل التعليقات
لا توجد أية تعليقات بعد
انضم إلى النقاش
يمكنك أن تنشر الآن وتسجل لاحقًا. إذا كان لديك حساب، فسجل الدخول الآن لتنشر باسم حسابك.