جلوگیری از ثبت تکراری اطلاعات فرم با جاوااسکریپت

عادت دوبار کلیک کردن یا دابل کلیک در میان کاربران ویندوز باعث شده است تا برخی از کاربران در صفحات وب نیز بر روی لینک‌ها و دکمه‌های ثبت فرم‌ها دوبار کلیک کنند.

اگر شما مدیر یک سایت یا وبلاگ باشید، احتمالا ثبت چندباره‌ی اطلاعات فرم‌ها توسط کاربران که منجر به ارسال اطلاعات تکراری می‌شود یکی از مشکلاتی است که با آن روبرو هستید.

این مساله هم از جهت بررسی اطلاعات ارسالی و هم از جهت اتلاف منابع سیستم حائز اهمیت می‌باشد.

در این مطلب با استفاده از جاوااسکریپت به شما نمایش می‌دهیم که چگونه می‌توانید از ثبت اطلاعات تکراری فرم‌ها در دیتابیس و یا ارسال آن‌ها به ایمیل جلوگیری کنید.

غیرفعال کردن دکمه‌ی ارسال برای جلوگیری از ثبت اطلاعات تکراری فرم

به طور معمول با هربار کلیک بر روی دکمه‌ی ارسال (Submit) فرم، اطلاعات آن ارسال و ثبت می‌شود و کاربر می‌تواند هرچندبار که خواست! بر روی دکمه‌ی ارسال یا ثبت کلیک کند.

با استفاده از این روش، پس از اینکه یکبار بر روی دکمه‌ی Submit کلیک شد، این دکمه غیرفعال شده و امکان کلیک مجدد بر روی آن وجود نخواهد داشت به این ترتیب از ثبت اطلاعات تکراری فرم جلوگیری بعمل خواهد آمد.

نمایش نمونه آنلاین

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

به این ترتیب هرزمانی که بر روی دکمه‌ی Submit یا ارسال، کلیک شود و یا از دکمه‌ی Enter/Return صفحه کلید استفاده شود، این دکمه از دسترس خارج می‌شود.

توجه داشته باشید که برای مشخص کردن دکمه‌ی مورد نظر، باید نامی که در مشخصه‌ی name وارد شده با نامی که در مشخصه‌ی onSubmit قرار گرفته است یکسان باشد.

در کد فوق نام‌هایی که باید یکسان باشند با رنگ قرمز مشخص شده اند.

جلوگیری از ثبت تکراری فرم به شیوه‌ی کاربرپسندتر!

اگر دکمه‌ی ثبت فرم را مانند حالت قبل به سادگی از دسترس خارج شود ممکن است برای کاربران کمی گیج کننده باشد. بنابراین بهتر است کمی تغییر ایجاد شود.

بدین منظور بهتر است ابتدا دکمه از دسترس خارج شده و سپس متن دکمه از کلمه‌ی “ارسال” به “لطفا صبر کنید…” تغییر کند و بعد از ثبت اطلاعات پیام مبتنی بر موفقیت آمیز بودن یا نبودن فرآیند‌ آن به کاربر نمایش داده شود.

در قطعه کد بالا نیز همانند مثال قبلی، باید نامی که در مشخصه‌ی name وارد شده با نامی که در مشخصه‌ی onSubmit قرار گرفته است یکسان باشد.

همچنین بجای عبارت Please wait که با رنگ آبی مشخص شده است پیامی که می‌خواهید به کاربر نمایش دهید را وارد کنید.

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

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