ارسال داده های فرم های html به یک iframe

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

1 <iframe name="ifrm7" src="http://www.7learn.com/js/tabber/demo1.html"></iframe>

که نمایشش به شکل زیر میشه :



حال می خواییم یه چنین چیزی رو با هم بنویسیم . که اطلاعات یک فرم رو به یک iframe در زیر آن فرستاده شود .

یک رنگ را انتخاب کنید و دکمه submit رو بزنید تا نتیجه رو ببینید .
برای این کار شما به دو تا فایل نیاز دارید . یکی فایلی که فرم html شما رو در بر داره (form.html) و دیگری فایلی که اطلاعات فرم به اون ارسال می شه تا پردازش لازم روی اطلاعات ورودی رو انجام بده (print.php) .

فایل form.html رو به شکل زیر داریم که شامل یک فرم هست که یک منوی select درون آن هست که رنگ مورد علاقه کاربر را دریافت میکند . و در آخر این فایل هم iframe ی که قرار نتیجه رو در آن بیاریم آوردیم .

1 <html>
2 <head>
3 <title>7Learn Form to iFrame</title>
4 <style type="text/css">
5 .frm{
6     width: 270px;
7     background-color:#eee;
8     padding: 7px;
9     border-radius: 10px;
10 }
11 .cntr{
12     margin: 0 auto;
13     text-align: center;
14 }
15 input{
16     height: 20px;
17     border:1px solid silver;
18     cursor: pointer;
19 }
20 input:hover{
21     background-color: #a7ff89;
22 }
23 </style>
24 </head>
25 <body>
26 <form action="http://7learn.com/files/frmifr/print.php" target="ifrm7" method="post" class="frm cntr">
27     <select name="fcolor">
28         <option value="white">Select Yor Favorite Color ...</option>
29         <option value="red">Red</option>
30         <option value="green">Green</option>
31         <option value="blue">Blue</option>
32         <option value="yellow">Yellow</option>
33     </select>
34   <input type="submit" value=" Submit ">
35 </form>
36 <br/>
37 <div class="cntr">
38 <iframe  name="ifrm7" src="http://www.7learn.com/files/frmifr/print.php">
39 </iframe>
40 </div>
41 </body>
42 </html>

در این کد خطوط 26 و 38 رو که مشخص شده دقت کنید.برای اینکه صفحه دریافت اطلاعات در یک iframe باز بشه فقط کافیه به iframe ی که تعریف میکنید (خط 38) با استفاده از ویژگی name یک نام رو اختصاص بدید و همون نام رو به عنوان ویژگی target تگ فرم مورد نظرتون (خط 26) اضافه کنید . میبینید که در اینجا مقدار ifrm7 رو برای نام iframe و برای target فرم تعیین کردیم . یعنی می خوایم اطلاعاتی که به صفحه print.php (مقدار ویژگی action فرم در خط 26) می فرستیم نتیجش در این iframe معلوم بشه ! به همین سادگی . هیچ نیازی به استفاده از تگ اضافه یا کدهای جاوا اسکریپت نیست !
اگر مقدار target فرم رو _blank بزارید صفحه نتیجه در یک پنجره جدید باز میشه . درست شبیه همون چیزی که برای لینک ها داریم .
اطلاعات این فرم با متد post به ادرس http://7learn.com/files/frmifr/print.php ارسال میشه .
اینم فایل print.php که اطلاعات دریافت شده فرم رو که در آرایه _POST پی اچ پی حاضر شده رو ، میگیره و پردازشی که در اینجا فقط چاپ یه متن و قرار دادن رنگ دریافت شده به عنوان پس زمینه هست رو انجام میده :

1 <html>
2 <head>
3     <title>7Learn Form to iFrame</title>
4     <style type="text/css">
5         .msg {
6             font-size: 16px
7         }
8     </style>
9 </head>
10  
11 <?php
12 $color = "white";
13 $isFormPosted = false;
14 if (isset($_POST['fcolor'])) {
15     $color = $_POST['fcolor'];
16     $isFormPosted = true;
17 }
18 ?>
19  
20 <body bgcolor="<?php echo $color?>">
21 <?php if ($isFormPosted) : ?>
22    <span class="msg">
23        Your Favorite color is my background color (<?php echo $color?>) ! .
24    </span>
25 <?php else : ?>
26    <span style="font-size: 16px">
27        Please Submit the form !
28    </span>
29 <?php endif; ?>
30 </body>
31 </html>

در فایل دریافت کننده اطلاعات فرم یعنی print.php رنگ دریافت شده را به همراه یک متن چاپ می کنیم و پس زمینه صفحه نتایج رو هم به همان رنگ انتخاب شده توسط کاربر تغییر میدهیم !

ارسال نظر