بنابراین امروز باید یک ویژگی را در پروژه جدید خود ایجاد کنم. این پروژه به اندازه کافی گسترده است که چه چیزی و چگونه را پوشش دهد، و بنابراین من در مورد ماهیت این "ویژگی" به شما خواهم گفت.

وظیفه مدیر این بود که بتواند کاربران را از پایگاه داده حذف کند. بنابراین ما پارامترهای جستجو را تنظیم می کنیم و اسکریپت php لیستی از کاربران را به ما می دهد. در مقابل هر کاربر یک چک باکس وجود دارد که می توانید انتخاب و حذف کنید.

اما به این سادگی نیست. وظیفه این بود که دکمه "حذف" غیرفعال شود و فقط در لحظه ای فعال شود که حداقل یک چک باکس انتخاب شده باشد. به طور طبیعی، هیولاهای جاوا اسکریپت خواهند گفت: "بله، دو انگشت روی آسفالت وجود دارد." اما من هیولای JS نیستم و برای راحتی کار فقط زمانی به برنامه نویسی به این زبان متوسل می شوم.

بنابراین، چقدر شایسته بودم، وارد شبکه شدم، و Yandex و Google و انواع پورتال‌ها کدهای مختلفی را در مرورگر من جمع کردند که مغز من هنوز دقیقاً آنچه را که نیاز داشتم کور می‌کرد. همانطور که معلوم شد، واقعاً هیچ نمونه معمولی (در حال کار) در شبکه وجود ندارد، و بنابراین، برای اینکه دیگری مانند من مغزم را منفجر نکند، تصمیم گرفتم یک نمونه کار از کد جاوا اسکریپت را پست کنم.

من فکر می کنم درک پیاده سازی HTML دشوار نیست، اما به هر حال آن را اضافه می کنم:

1 - یکی
2 - دو
3 - سه
… 10 - ده

بنابراین مشکل اصلی که من با آن مواجه شدم چیست. معلوم می شود که می توانید دکمه را همانطور که دوست دارید "خاموش" کنید، یعنی. با دسترسی به عنصر ارسال در هر فرم موجود:

Submit.disabled = درست است.

با این حال، فعال کردن (جایگزین کردن با false) به این روش غیرممکن است، و به همین دلیل است که من چنین ساختاری را حفر کردم:

Document.form_del.elements ["ارسال"] Disabled = true;

و در اینجا، اگر true را با false جایگزین کنیم، دکمه هم فعال و هم غیرفعال می شود. و در نهایت، این خط کد را رمزگشایی می کنم:

در سند فعلی به شکل "form_del" در عنصری که نام آن "submit" است (و در مثال ما این نام دکمه است) یک ویژگی "disabled" وجود دارد، بنابراین آن را "true" یا "false" را غیرفعال می کنیم. ". که با فعال کردن این ویژگی دکمه خود را غیر فعال می کنیم و با خاموش کردن ویژگی دکمه ما دوباره فعال می شود.

بازدیدکنندگان محترم سایت با طرح سوالاتی مانند "چگونه سبد خرید خود را به سایت وصل کنیم؟" و غیره. من راه حل های آماده ای نمی سازم، من منطق پیاده سازی را توضیح می دهم، برای هر سایت جداگانه در هر صورت باید موارد خاصی را اضافه کنید، بنابراین اگر واقعاً نیاز به پیچ یا وصل کردن چیزی دارید، من خدمات پولی و رایگان را برای مشاوره ارائه می دهم و سایت های نهایی در فرم بازخورد بالای صفحه بنویسید، من به همه پاسخ خواهم داد.

دکمه ارسال غیرفعال (ویژگی DISABLED)

گاهی اوقات در سایت لازم است فرمی ایجاد شود که کاربر هر داده ای را در آن وارد کند. ممکن است هر تعداد فیلد در فرم وجود داشته باشد، اما همیشه فیلدهای الزامی وجود دارد. نحوه بررسی اینکه آیا کاربر فیلد مورد نیاز را پر کرده است یا خیر. دو راه وجود دارد:

1. چک کردن در کنترل کننده، یعنی. کاربر فیلدهای خواسته شده را پر می کند، فرم را ارسال می کند و سپس پردازنده فیلدهای خواسته شده را بررسی می کند و در صورت پر نشدن فیلد، کاربر را برمی گرداند. همه چیز ساده است، اما مکانیزمی برای انتقال مقادیر فیلدهای از قبل پر شده به فرم مورد نیاز است که می تواند با استفاده از جلسات پیاده سازی شود، اما این خیلی راحت نیست.
2. بررسی با روش های جاوا اسکریپت بسیار ساده تر است (از نظر نحوه کار خود فرم). ما هر فیلد را یک رویداد onchange یا هر پاسخ دیگری به عملکرد کاربر تنظیم می‌کنیم (البته نه onmouseover، اگرچه احتمالاً می‌توان آن را حتی خنده‌دار هم انجام داد...)، پس از آن تابعی که نوشته‌ایم بررسی می‌کند که آیا فیلدهای مورد نیاز هستند یا خیر. را پر کرده و دکمه ارسال را فعال یا غیرفعال کنید.

گزینه اول بیشتر مربوط به قسمت PHP است که فعلا در نظر گرفته نمی شود. بیایید دومی را با جزئیات بیشتری در نظر بگیریم. اولین چیزی که نیاز داریم خود فرم است:

همانطور که می بینید، دکمه ارسال دارای یک ویژگی غیرفعال است که روی غیر فعال تنظیم شده است. همچنین، هر فیلد فرم دارای یک رویداد onchange است که تابع EnableButton () را فراخوانی می کند. این تابع چگونه است؟ فرض کنید فیلدهای مورد نیاز فیلد1 و فیلد3 هستند، سپس تابع EnableButton () به شکل زیر خواهد بود:

عملکرد EnableButton ()
{
با (document.forms.form1)
{
اگر(field1.value! = "" && field2.value! = '')
{
disable_button.disabled = نادرست;
}
دیگر
{
disable_button.disabled = درست است، واقعی;
}
}
}

متأسفانه، من یک آنالوگ PHP از تابع خالی () در جاوا اسکریپت پیدا نکردم، بنابراین مقادیر فیلد باید با یک رشته خالی مقایسه شود. نکته دیگری که ارزش توجه دارد عبارت with (document.forms.form1) است. برای کسانی که با جاوا اسکریپت آشنایی ندارند - عبارت داخل پرانتز عبارت with به همه اشیا اضافه می شود که به میزان قابل توجهی نوشتن تابع را کاهش می دهد. بدون EnableButton () به این صورت خواهد بود:

عملکرد EnableButton ()
{
اگر(document.forms.form1.field1.value! = "" && document.forms.form1.field2.value! = '')
{
نادرست;
}
دیگر
{
document.forms.form1.disable_button.disabled = درست است، واقعی;
}
}

موافقم - کاملاً دست و پا گیر است.
در ادامه، شایان ذکر است که ویژگی disabled را می توان در هر عنصر فرمی استفاده کرد. مثال - تکمیل اطلاعات شرکت - آدرس قانونی و پستی. دو فیلد برای دو آدرس، با این حال، می توانید یک چک باکس اضافه کنید (- مطابق با قانونی است)، با علامت گذاری آن، کاربر نشان می دهد که فیلد آدرس پستی نیازی به پردازش ندارد و می توان ویژگی غیرفعال را به آن اضافه کرد.

) این سوال مطرح شد که خوب است دکمه های فرم ارسال شده به سرور ویژگی disabled = "disabled" را تنظیم کنند.

با این حال، آنها هنوز متوجه نشده اند که چرا این مورد نیاز است و چگونه آن را انجام دهند. به نظر می رسد که می تواند ساده تر باشد و اصلاً می توانید در مورد آن صحبت کنید ، اما نه - در واقع ، همه چیز چندان پیش پا افتاده نیست. فوراً متذکر می شوم که استدلال زیر برای هر دو نوع فرم صدق می کند: هر دو از طریق یک SUBMIT معمولی و با استفاده از AJAX ارسال می شوند.

چرا باید دکمه ها را غیر فعال کنید؟

1. تا برای کاربر مشخص شود که قبلاً روی دکمه کلیک کرده و فرم در حال ارسال است
2. تا سرور با درخواست های غیر ضروری بارگذاری نشود و احتمال بروز خطا کاهش یابد.

واضح است که می توانید با گذاشتن یک تصویرسازی خاص که می گوید درخواست پذیرفته شده و فرم ارسال می شود (ساده ترین مثال نشان دادن نوعی گیف متحرک) از کلیک های غیر ضروری جلوگیری کنید. با این حال، دکمه ها همچنان قابل کلیک خواهند بود و بی حوصله ترین کاربران از این فرصت استفاده نخواهند کرد. در عین حال، فرم دیگر نمی تواند به این کلیک های اضافی پاسخ دهد (گیف متحرک در حال چرخش است) و ناامیدی کاربر فقط افزایش می یابد.

همچنین واضح است که با آویزان کردن مقداری کلاس = "form_is_loading" در فرم و بررسی وجود این کلاس در هر ارسال، می توان از درخواست های غیر ضروری جلوگیری کرد. اما چرا این بررسی ها انجام می شود در حالی که می توانید بدون آن ها به سادگی دکمه را غیرفعال کنید؟

نحوه غیر فعال کردن دکمه ها

این گزینه ساده که در موضوعات فوق الذکر ارائه شده است، ناکافی و ناکارآمد است.

چرا کافی نیست فقط دکمه فشار داده شده را غیرفعال کنید:

1. ارسال یک فرم نیز می تواند با فشار دادن Enter انجام شود. بنابراین، پردازش دکمه‌ها باید روی رویداد onsubmit خود فرم آویزان شود. علاوه بر این، یک فرم می تواند چندین دکمه داشته باشد و منطقی است که همه آنها غیرفعال شوند و نه فقط دکمه ای که کلیک شده است.
2. اگر پس از ارسال فرم، با فرم به صفحه بازگردیم (با استفاده از دکمه "بازگشت" در مرورگر)، ذخیره سازی کار می کند: با دکمه های غیرفعال مواجه می شویم و نمی توانیم دوباره فرم را ارسال کنیم - بدون اجبار. بارگیری مجدد صفحه با از دست دادن تمام فیلدهای پر شده قبلی (بازگشت به فرم جستجو از صفحه نتایج جستجو در اینجا یک مثال زنده است).
3. اگر فرم دارای چندین دکمه باشد (به عنوان مثال، "ارسال" و "لغو")، پس ما نمی توانیم به سرور بگوییم کدام دکمه فشرده شده است: یک دکمه غیرفعال نام و مقدار خود را منتقل نمی کند - حتی اگر آن را بسازیم. غیرفعال توسط رویداد onsubmit

بنابراین، اسکریپت برای ایجاد دکمه های غیر فعال

به طور خلاصه، سناریو به شرح زیر است.

1. با رویداد onsubmit فرم، دکمه ها را غیر فعال کنید
2. قبل از خروج از صفحه توسط رویداد window.onunload، دکمه ها را به حالت فعال برمی گردانیم
3. هر دکمه فرم در رویداد onclick باید یک فیلد مخفی به همین نام ایجاد کند که از طریق آن مقدار خود را به سرور منتقل کند.

و سپس یک اسکریپت دقیق تر با طرح کد دنبال می شود.

//// فایل html ////////////////////////////////////////////////////////////////// ///////////////////////

//// فایل js /////////////////////////////////////////// //////////////////////////

موضوع مقاله امروز پر کردن فرم، یعنی اعتبار سنجی کوچک آن خواهد بود. برای دقیق تر، این واقعاً اعتبارسنجی نیست، زیرا هیچ اعتبار سنجی ورودی وجود نخواهد داشت. این روش تا زمانی که فیلدهای مورد نیاز در فرم پر نشود دکمه ارسال را غیر فعال می کند.

مسدود کردن دکمه ارسال در حالی که فیلدها خالی هستند با انجام این کار انجام می شود جی کوئری... یک فیلمنامه کوچک به ما کمک می کند، که برنامه های ما را اجرا می کند. بیایید با یک دکمه غیر فعال شکلی مانند این بسازیم.

از جمله کتابخانه jQuery

اولین مرحله اتصال به هدر جلوی درب است سریا به زیرزمین روبروی درب بدنکتابخانه ها جی کوئری.

در اینجا باید بسیار مراقب باشید، گاهی اوقات کتابخانه قبلاً قبلاً متصل شده است و اتصال مجدد آن منجر به درگیری و ناکارآمدی اسکریپت می شود. بنابراین، اگر کار نکرد، سعی کنید این کتابخانه را اضافه نکنید یا مکان اتصال را تغییر دهید.

ارسال اسکریپت مسدود کردن دکمه

تابع checkParams () (نام var = $ ("# نام"). Val ()؛ var email = $ ("# ایمیل"). Val (); var phone = $ ("# phone"). Val (); if (name.length! = 0 && email.length! = 0 && phone.length! = 0) ($ ("# ارسال"). removeAttr ("غیرفعال")؛) دیگری ($ ("# ارسال"). attr ("غیرفعال"، "غیرفعال"))

در خطوط 2،3،4 فیلدهای خود، یعنی شناسه‌های آنها را در فرم آینده قرار می‌دهیم و نام‌هایی را برای اسکریپت به آنها اختصاص می‌دهیم. همونطور که خودش گفت سه تا هست که در صورت نیاز میتونید اضافه ها رو حذف کنید یا موارد لازم رو اضافه کنید.

خط ششم شامل پارامترهای تعداد کاراکترهای فیلدها است. این کد پارامتر را مشخص می کند != 0 ، یعنی اگر چیزی در فیلد نباشد، دکمه را باز نمی کند، اگر حداقل یک کاراکتر رانندگی کنید، این فیلد پر شده در نظر گرفته می شود. و همانطور که می بینید، ما سه فیلد داریم و هر کدام یک پارامتر دارند.

اگر می خواهید حداقل تعداد کاراکترهای متفاوتی را مشخص کنید، باید کد را کمی تغییر دهید. اگر فقط "0" را با عدد مورد نظر جایگزین کنید، هیچ کاری انجام نمی دهد. برای اینکه همه چیز کار کند، باید جایگزین کنید:

! = 0 تا> = 7

یعنی اگر فیلد بزرگتر از 7 کاراکتر باشد، پارامتر را طوری تنظیم می کنیم که ارسال شود. یعنی تا زمانی که 7 کاراکتر یا بیشتر در فیلدی که این پارامتر مشخص شده باشد، دکمه فعال نمی شود. بیایید پارامترهای زیر را تنظیم کنیم. برای نام 2 کاراکتر، برای نامه - 5 و شماره 7. خط نهایی 6 اسکریپت به این صورت است:

اگر (name.length> = 2 && email.length> = 5 && phone.length> = 7) (

برای کسانی که به این سوال علاقه مند هستند - چگونه حداکثر تعداد کاراکترها را مشخص می کنید؟... پاسخ: در کد HTML، در فیلد ورودیصفت را بنویس

حداکثر طول = "15"

که محدودیت را 15 کاراکتر تعیین می کند. فقط شماره خود را وارد کنید

خطوط هفتم و نهم نشان دهنده شناسه دکمه آینده ما - "ارسال" از فرم است که در صورت رعایت شرایط قفل آن باز می شود. در این مورد، آن است - #ارسال.

کد HTML

حالا بیایید یک شکل ساده با سه فیلد وارد کنیم. فرم ما نام، ایمیل و شماره تلفن را ارسال می کند. شما می توانید از فرم خود استفاده کنید.

برای اینکه همه چیز کار کند، ابتدا - باید یک رویداد را به فیلدهای مورد نیاز اضافه کنید -

Onkeyup = "checkParams ()"

که اسکریپت ما را راه اندازی می کند.

ثانیاً ویژگی disabled را به دکمه اضافه کنید که در صورت پر شدن فیلدهای مورد نیاز توسط اسکریپت لغو می شود.

سوم در زمینه ورودیهمانطور که در بالا گفتم باید یک شناسه وجود داشته باشد که در اسکریپت نیز مشخص شده است.

تمام راه همین است. دشوار نیست، اگرچه معلوم شد که مقاله کوچک نیست. اگر همه چیز را با دقت بخوانید و درک کنید، پس نباید هیچ مشکلی داشته باشید.

این روش هنگام ایجاد فرم هایی که استفاده می کنند به من کمک کرد آژاکسو بدون توجه به پر شدن فیلدها، نامه ای را بدون بارگیری مجدد صفحه ارسال کنید. یعنی اگر شخصی شروع به فشار دادن دکمه کند، حروف خالی ارسال می شود و بنابراین دکمه مسدود شده و اجازه انجام این کار را نمی دهد.

این همه، از توجه شما متشکرم. 🙂