ساخت دکمه های ثبت Form با URL های مختلف



visibility  
mode_comment   ۰

در این مطلب میخوایم در مورد یک ویژگی جالب در مورد form ها توضیح بدیم و شما رو با اون آشنا کنیم. فرض کنید که یک فرم شبیه به فرم زیر دارید:

بجای comment مورد نظر میتونه المنتهای input مختلفی وجود داشته باشند. در انتها یک دکمه برای ثبت فرم قرار دادیم. زمانی که بر روی دکمه Submit کلیک میشه، اطلاعات فرم مورد نظر به آدرس /submit فرستاده میشه یا به اون آدرس منتقل میشیم. حالا فرض کنید که شما قصد دارید یک دکمه Submit دیگه اضافه کنید و زمانی که بر روی اون کلیک میکنید، اطلاعات به URL دیگری فرستاده بشه. مهم نیست که هدف این کار چیه ولی شرایطی رو در نظر بگیرید که باید چنین کاری رو انجام بدین و به دو یا چند دکمه Submit با URL های مختلف نیاز دارید. اگر در گوگل جستجو کنید، راه های مختلفی برای اینکار پیدا میکنید. یکی از روشهایی که وجود داره اینه که از Javascript استفاده کنیم و مقدار ویژگی action فرم رو در رویداد کلیک هر دکمه تغییر بدیم. کد زیر رو در نظر بگیرید:

میبینید که برای رویداد کلیک هر دکمه یک کد Javascript رو قرار دادیم و با استفاده از اون مقدار ویژگی action مربوط به فرم رو تغییر دادیم. همونطور که میبینید این روش از javascript کمک میگیره.

متخصص جاوا اسکریپت
با جاوا اسکریپت جادوگری کنید! آیا می دونید با زبان جاوااسکریپت می تونید، برای فرانت اند و بک اند وبسایت ها برنامه نویسی کنید؟ همینطور اپلیکیشن دسکتاپ و موبایل بسازید؟ اگر دوست داری اینکارها رو انجام بدی و React, ElectronJS, ReactNative, NodeJS,MongoDB و ... رو تو یه دوره یاد بگیری، متخصص جاوااسکریپت سون لرن رو حتما ببین : متخصص جاوا اسکریپت arrow_back

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

همه این کارها با استفاده از ویژگی formaction انجام میشه که مستقیما برای دکمه Submit قرار داده میشه و مقدار ویژگی action فرم رو بازنویسی و overwrite میکنه. نحوه استفاده از این ویژگی بصورت زیر هست:

همونطور که میبینید برای کل فرم مقدار ویژگی action رو برابر با submit قرار دادیم و با اینکار زمانی که دکمه اول رو فشار میدیم، اطلاعات به آدرس /submit ارسال میشن. اما در دکمه ارسال دومی از ویژگی formaction استفاده شده و مقدار دیگه ای برای اون قرار گرفته و با اینکار زمانی که بر روی این دکمه کلیک میشه، اطلاعات این فرم به آدرس /elsewhere ارسال میشن.

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

بهمین راحتی.

امیدوارم از این مطلب خوشتون اومده باشه.

موفق و پیروز باشید.

یا علی

comment دیدگاه کاربران

نیاز به لاگین

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