تعد النماذج اليوم إحدى أهم أدوات تفاعل المستخدم مع تطبيقات الويب. تتيح لك النماذج تنظيم الإدارة الفعالة للمعلومات على الموقع، وحالة الموقع نفسه، وتقديم الخدمات للعملاء، ونقل المعلومات إلى مستخدمين آخرين، وتوفير الوصول إلى قسم مغلق، وغير ذلك الكثير... لذلك، هناك رغبة طبيعية تمامًا في جعل النماذج أكثر ملاءمة وتكيفًا مع الفروق الدقيقة في العمل .

يمكن أن يكون أحد مجالات هذا التحسين هو تنفيذ القدرة على التحكم بشكل تفاعلي، دون إعادة تحميل الصفحة، في عدد الحقول لإدخال البيانات، سواء المتزايدة أو المتناقصة. يمكن أن يكون هذا مناسبًا جدًا إذا كنت بحاجة إلى إضافة ليس سجلًا واحدًا، بل عدة سجلات إلى قاعدة بيانات التطبيق مرة واحدة؛ أو إذا كان عدد البيانات المماثلة غير معروف مسبقًا، حيث يتطلب كل منها حقل إدخال منفصل (على سبيل المثال، عدة هواتف مستخدمين أو بطاقات ائتمان). سنقوم في هذه المقالة بتحليل أحد التطبيقات البسيطة لهذه الميزة من خلال استخدام مكتبة jQuery javascript.

في الجزء السفلي، يمكنك تنزيل أرشيف مع الأمثلة التي تمت مناقشتها في هذه المقالة.

إضافة حقل جديد إلى النموذج.

سنقوم بإنشاء حقل نموذج جديد باستخدام طريقة .append():

$("المحدد").append("string");

الذي يضيف "سلسلة" إلى داخل العنصر باستخدام "المحدد" المحدد، مع السلسلة المضافة التي تتبع المحتوى الموجود.

إذا نظرنا إلى مثال محدد، فإنه يمكن أن يكون مثل هذا:

الحقل رقم 1 "/>أضف حقلاً جديدًا

يمكن تنفيذ وظيفة addField() نفسها على النحو التالي:

< script type= "text/javascript" >وظيفة addField () ( var telnum = parseInt($("#add_field_area" ) .find ("div.add:last" ) .attr ("id" ) .slice (3 ) ) 1 ; $("div#add_field_area" ) .append( "حقل رقم "telnum"");

أولاً، كالعادة، نقوم بتضمين مكتبة jQuery ثم نعلن عن وظيفة addField(). تقوم الدالة أولا بحساب الرقم الذي يجب إدراجه في العنصر الذي تتم إضافته - باستخدام هذا الرقم، سنقوم لاحقا بإزالة الحقول غير الضرورية. ثم يضيف addField() إلى div#add_field_area رمز كتلة div#add№ مع حقل نموذج بداخله، والذي يشبه رمزه تمامًا الكود "الحقل رقم 1" المشار إليه أعلاه مباشرةً. الآن عندما نضغط على زر "إضافة"، يمكننا أن نرى كيف يظهر حقل جديد على الفور.

حذف حقل نموذج معين.

لإزالة عناصر شجرة DOM، يمكنك استخدام التابع Remove() :

$("المحدد").remove();

والذي يتم تطبيقه على العنصر الذي يحتوي على "المحدد" المحدد. سنفترض أنه بشكل افتراضي يجب أن يبقى حقل واحد دائمًا، ويمكن حذف جميع الحقول الإضافية. للقيام بذلك، في وظيفة addField()، في سطر المعلمة لطريقة .append()، سنضيف رمز زر حذف الحقل، عند النقر فوقه، سيتم استدعاء وظيفة الحذف (id) والرقم سيتم تمرير الحقل الذي يجب حذفه إلى الوظيفة.

وظيفة addField () ( var telnum = parseInt($("#add_field_area" ) .find ("div.add:last" ) .attr ("id" ) .slice (3 ) ) 1 ; $("div#add_field_area" ) .append( "حقل رقم "telnum"");

يمكن أن تكون وظيفة حذف الحقل () نفسها بسيطة للغاية:

وظيفة حذف الحقل (المعرف) ( $("div#add" id).remove () ; )

هذا كل شئ. الآن، عند الضغط على زر (الصليب الأحمر) المقابل للحقل المحدد، سوف يختفي ومعه المعلومات التي تم تسجيلها فيه.

معالجة البيانات على الخادم (php).

عندما يحتوي النموذج على حقول متعددة بنفس نوع البيانات، فمن الطبيعي أن تطرح مسألة معالجة البيانات، على سبيل المثال، قبل إرسالها إلى قاعدة البيانات. في المثال أعلاه، تم حل هذه المشكلة عن طريق تحديد سمة الاسم لحقل النموذج باستخدام المعلمة val. وهذا يعني أنه بعد إرسال هذا النموذج باستخدام طريقة POST، سيتم وضع قيم هذه الحقول في المصفوفة $_POST['val')، والتي يمكن تكرار عناصرها في foreach (...) (. ..) حلقة، على سبيل المثال:

foreach ($_POST [ "val"] كقيمة $) (// الكود الخاص بك....)

أو، إذا لزم الأمر، "ألصق" جميع البيانات من هذه الحقول من نفس النوع في سطر واحد باستخدام الدالة implode():

$str = ينفجر ("|" , $_POST [ "val" ] ) ;

ثم سيتم دمج جميع قيم الحقول ذات الاسم = “val” في سلسلة ذات محدد “شريط عمودي”.

ولكن هذه معالجة من جانب الخادم، والتي، بالمناسبة، هي الأفضل لأسباب أمنية. ولكن، قد تنشأ ظروف تجبرك على معالجة هذه الحقول من جانب العميل: على سبيل المثال، ليس لديك حق الوصول إلى البرامج النصية للخادم (أنت تستخدم نوعًا ما من معالج النماذج عن بعد)، أو لسبب ما لا يمكنك تغيير تشغيل معالج النموذج على الخادم الخاص بك. في هذه الحالة، يمكنك أيضًا استخدام لغة جافا سكريبت، وبما أننا نعمل بالفعل مع مكتبة jQuery، فسوف نستمر في العمل فيها.

معالجة البيانات من جانب العميل.

لنفترض أن مهمتنا هي دمج جميع بيانات هذا الحقل المتعدد في سطر مفصول بشريط عمودي "|". في الواقع، يتم تنفيذ هذا بكل بساطة.

أولاً، نحتاج إلى تعديل النموذج نفسه قليلاً، أي إضافة حقل مخفي واحد: