نموذج الاتصال دون إعادة تحميل الصفحة. كيفية إرسال نموذج HTML دون إعادة تحميل الصفحة تقديم Jquery نموذج دون إعادة التحميل

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

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

أوه نعم، سأقوم بترتيب كتب الهوية والفصول الدراسية بحيث يكون من الأسهل فهم ماذا ولماذا. سأغير تصميم النموذج، فهو أكثر إثارة للاهتمام. في إحدى المقالات التالية، ربما سنقوم بربط reCapthсa من Google بهذا النموذج، ونضع هدف "الحدث" عند الإرسال الناجح، بحيث يتم إعداد سلسلة كاملة من المقالات.

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

انتبه إلى المسار إلى الملفات. قررت وضع جميع الملفات تقريبًا في المجلد modalform لتسهيل الاتصال بالمشروع.

قبل الانتقال إلى ترميز النموذج، دعنا نقوم بتضمين ملفات CSS الخاصة بالنافذة المشروطة. أفعل هذا بين علامات الرأس:

لذا، ننتقل الآن إلى ترميز النموذج نفسه والزر الذي يستدعيه. لنبدأ بالزر.

تقديم طلبك

كل شيء بسيط هنا. رابط عادي مع فئة مخصصة. يتم استخدام Data-remodal-target لإظهار النافذة المشروطة، على غرار استخدام href مع رابط للمعرف. ولكن لماذا نحتاج إلى هذه القمامة في شريط العناوين؟ في المقابل، تبدو النافذة المشروطة ذات النموذج كما يلي:

اطلب معاودة الاتصال وسيقوم مستشارنا بالاتصال بك

موقع إلكتروني

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

تعد خيارات إعادة تشكيل البيانات إحدى الطرق لتعيين أو تعطيل بعض خيارات البرنامج النصي لنافذة مشروطة. يمكنك قراءة المزيد على الموقع الرسمي. لقد قدمت بالفعل الرابط أعلاه. في حالتي. لقد قمت بتعطيل مظهر المرساة في شريط العناوين ومنعت النافذة من الإغلاق بعد النقر فوق الزر "إرسال".

يوجد بالداخل النموذج نفسه مع مجموعة (مجموعات) الحقول. من المهم الانتباه هنا إلى الفقرة التي تحتوي على فئة "msgs". هذا هو المكان الذي سيتم فيه عرض رسالة حول الإرسال الناجح أو الخطأ. في السابق، تم عرض الرسالة مباشرة داخل النموذج، لتحل محل كل المحتوى الموجود بداخله.

شيء اخر. حقل مخفي مع معلومات الفصل إنه ضروري لتمييز الطلبات وفهم النموذج الذي ملأه المستخدم، إذا كان هناك عدة نماذج مختلفة. ما عليك سوى ملء القيمة بالنص المطلوب.

في نهاية المقال، سأوضح لك كيفية القيام بذلك حتى تتمكن من استدعاء نافذة من أماكن مختلفة على الموقع وفهم الزر الذي نقر عليه المستخدم.

الآن دعونا نلقي نظرة على البرنامج النصي الذي سيساعدنا في إرسال النموذج دون إعادة تحميل الصفحة. أسميته form.js:

$(document).ready(function () ( $("form").submit(function () ( // احصل على معرف النموذج var formID = $(this).attr("id"); // أضف تجزئة إلى معرف الاسم var formNm = $("#" + formID); var message = $(formNm).find(".msgs"); // يبحث عن class.msgs في النموذج الحالي ويكتبه في المتغير var formTitle = $(formNm).find(".formTitle"); // يبحث عن class.formtitle في النموذج الحالي ويكتبه في المتغير $.ajax(( type: "POST"، url: "modalform/mail" .php"، البيانات: formNm.serialize()، النجاح: الوظيفة (البيانات) ( // عرض رسالة حول الإرسال الناجح message.html(data);formTitle.css("display"،"none"); setTimeout(function ())( //$(formNm).css("display"،"block"); $(".formTitle").css("display"،"block"); $(".msgs").html (""); $("input").not( ":input, :input").val(""), 3000); خطأ: الوظيفة (jqXHR، نص، خطأ) ( // عرض رسالة خطأ في الإرسال message.html(error);formTitle.css ("display"، "none")؛ // $(formNm).css("display"، "none")؛ setTimeout(function())( //$(formNm ).css("عرض"،"كتلة" ); $(".formTitle").css("display"،"block"); $(".msgs").html(""); $("الإدخال").not(":input, :input").val(""); )، 3000)؛ ) )); عودة كاذبة؛

)); // لأنماط النموذج var $input = $(".form-fieldset > input"); $input.blur(function (e) ( $(this).toggleClass("filled"، !!$(this).val()); )); ));

اسمحوا لي أن أشرح قليلا ما يحدث هنا. نقوم باستدعاء الوظيفة عند حدوث حدث إرسال النموذج (يتم النقر فوق إرسال). ثم نحصل على معرف النموذج ونحفظه في متغير formNm. الآن، معرف النموذج الخاص بنا موجود فيه. في المقالة السابقة، هذا هو المكان الذي ظهرت فيه الرسالة. وكانت هذه هي اللحظة بالتحديد التي كتبتها كثيرًا في التعليقات. تحتاج فقط إلى تحديد موقع مختلف للإخراج. في حالتنا، سنقوم بإخراج جميع الرسائل إلى موقع مُعد مسبقًا. هذه علامة "p" مع فئة "msgs".

في البرنامج النصي، نقول أنه أثناء عرض الرسالة حول الإرسال الناجح أو غير الناجح، سنقوم بإخفاء الرأس. وبعد 3 ثوان، سنعيد كل شيء إلى مكانه ونمسح حقول النموذج مع الرسالة.