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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

وظیفه مدیر این بود که بتواند کاربران را از پایگاه داده حذف کند. بنابراین ما پارامترهای جستجو را تنظیم می کنیم و اسکریپت 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 را می توان در هر عنصر فرمی استفاده کرد. مثال - تکمیل اطلاعات شرکت - آدرس قانونی و پستی. دو فیلد برای دو آدرس، با این حال، می توانید یک چک باکس اضافه کنید (- مطابق با قانونی است)، با علامت گذاری آن، کاربر نشان می دهد که فیلد آدرس پستی نیازی به پردازش ندارد و ویژگی غیرفعال می تواند به آن اضافه شود.