یک فرم پویا با جاوااسکریپت بسازید که کاربر بتواند با کلیک روی دکمه «افزودن فیلد» فیلدهای ورودی جدید اضافه یا حذف کند و هنگام ارسال، مقادیر را بهصورت JSON زیر فرم نمایش دهد.
8.0 بازدید آخرین ویرایش در 201 روز قبل ساعت 03:43 0.0
برای حل این مسئله از جاوااسکریپت خالص استفاده کنید: با addEventListener روی دکمهٔ «افزودن»، یک عنصر ورودی جدید (یا یک قالب cloneNode/template) به DOM اضافه کنید و برای دکمههای حذف از event delegation استفاده کنید تا فیلد مربوطه را حذف کنند. هنگام ارسال فرم، با preventDefault جلوی رفتار پیشفرض را بگیرید، مقادیر همهٔ فیلدها را با querySelectorAll جمعآوری کرده و به یک آرایه یا شی تبدیل و با JSON.stringify نمایش دهید. نکات مفید: از data-attributes برای شناسهٔ فیلدها استفاده کنید، اعتبارسنجی ساده (مثلاً غیرخالی بودن) انجام دهید و رابط کاربری را با پیامهای خطا یا تغییرات بصری بهروز کنید.
توسط پژوهشگر در 201 روز قبل ساعت 03:43 1 پاسخ
جدید ترین قدیمی ترین بالاترین امتیاز پاسخ های من
در حال بارگیری...
برای ارسال پاسخ باید با حساب کاربری وارد شوید.
ورود به حساب کاربری
نکته مهم این است که اگر فیلدها را با cloneNode یا template اضافه میکنید، رویدادهای مربوطه باید دوباره به فیلدهای جدید وصل شوند یا از template استفاده کنید تا رویدادها درست کار کنند. برای حذف با استفاده از delegated events، مطمئن شوید که آیتمهای حذف بهدرستی با data-attributes تشخیص داده میشوند و حتماً با جلوگیری از رفتار پیشفرض، فرم دوباره ارسال نشود. هنگام جمعآوری مقادیر، فیلدهای خالی را فیلتر کرده و مقدار هر فیلد را با نام آن ذخیره کنید تا ساختار JSON روشن و منطبق با کلیدها باشد. از نظر تجربهٔ کاربری، نمایش پیامهای خطا و بازخورد بصری ساده به کاربر خیلی مفید است.
گزارش