ساخت اکشن چندگانه فرم با جاوااسکریپت

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

فرم های از عناصر بسیار مهم و کاربردی در صفحات وب به منظور دریافت اطلاعات از کاربران است. تقریبا تمام عملیاتی که کاربر در آن نقش دارد با استفاده از فرم ها انجام می شود.

زبان های سمت سرور با استفاده از فرم ها و دریافت داده از سمت کاربر (client-side) می توانند عملیات و پردازش هایی را به منظور داینامیک سازی و انجام تغییرات (manipulation) و ذخیره آن در دیتابیس را انجام دهند.

مدیریت سایت با فرم ها می تواند مطالب یا محصولات جدیدی را اضافه کند, عملیات ویرایش را انجام دهد و یا تصویر و فایل های غیره را آپلود کند.

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

پس می توانیم نتیجه بگیریم فرم HTML یکی از عناصر بسیار مهم و ضرور در هر صفحه وب داینامیک است.

همانطور که می دانید فرم ها با دریافت خصوصیت action قادر به ارسال داده ای وارد شده در فیلد ها به یک صفحه مثلا server.php را دارند. برای اینکه اطلاعات یک فرم را به چند صفحه PHP ارسال کنیم, از iframe و جاوااسکریپت بهره می بریم.

ساخت اکشن چندگانه فرم با جاوااسکریپت

فرم HTML

در ابتدا یک فرم HTML داریم که دو مقدار username, password را از کاربر می گیرد و به صفحه تعیین شده در بخش اکشن فرم (login1.php) ارسال می کند.

همچنین برای مدیریت رویداد کلیک دکمه سابمیت از تابع OnButton() جاوااسکریپت استفاده کردیم.

<form name=Form1 action= "login1.php" method=post>
	<label for="usr">Username</label> 
	<input type="text" name="username" id="usr">
	<label for="pwd">Password</label>  
	<input type="password" name="password" id="pwd">
<input type="submit" value="Send" name="button1" onclick="return OnButton();">

<label for="usr">Username</label>

<label for="pwd">Password</label>

همینکه کلیک شده تابع جاوااسکریپت ما اجرا می شود.

کد JavaScript دکمه سابمیت

در اینجا برای ساخت اکشن چندگانه فرم با جاوااسکریپت , داده ها را به دو صفحه متفاوت ارسال می کنیم

<script language=javascript>
function OnButton()
{
    document.Form1.action = "login2.php"    // First target
    document.Form1.target = "iframe1";    // Open in a iframe
    document.Form1.submit();        // Submit the page
    document.Form1.action = "page3.php"    // Second target
    document.Form1.target = "iframe2";    // Open in a iframe
    document.Form1.submit();        // Submit the page
    return true;
}
</script>

function OnButton()

{

document.Form1.action = "login2.php" // First target

document.Form1.target = "iframe1"; // Open in a iframe

document.Form1.submit(); // Submit the page

document.Form1.action = "page3.php" // Second target

document.Form1.target = "iframe2"; // Open in a iframe

document.Form1.submit(); // Submit the page

return true;

}

</script>

همانطور که در کد iframe زیر می بینید ما برای ارسال داده به دو صفحه مختلف دو iframe با nameهای متفاوت را ایجاد کردیم.در اینجا برای اینکه کاربر از وجود این دو i frameایجاد شده مطلع نشود آن ها را با کد CSS مخفی کردیم.

<div style="visibility:hidden">
<iframe NAME="iframe1" width="40" height="40"></iframe>
<iframe NAME="iframe2" width="40" height="40"></iframe>
</div>

</div>

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

همچنین محدودیتی در تعریف این آی-فریم ها ندارید و هر چقدر در حد تعادل می توانید ایجاد کنید.

نکته : توجه کنید که فرض ما اینجا لاگین شدن کاربر بود که برای ما می توانید این فرم بسیار متفاوت باشد. در این مثال کاربر فقط تاییدیه برگشتی از اکشن اول (login1.php) را خواهد داد. البته شما می توانید یک صفحه جداگانه برای نمایش هر دو در یک صفحه ایجاد کنید یا اینکه به صفحه مورد نظر ریدایرکت کنید.

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

برای دانلود سورس کد از باکس دانلود استفاده کنید.

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

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