آموزش ساخت فرم محاسبه گر در RSFrom


                      آموزش ساخت فرم محاسبه گر در RSFrom

آموزش ساخت فرم محاسبه گر در RSFrom

show_chart 1988
date_range 05-آذر-1397
person_outline امیررضا تهرانی
folder_open وبلاگ

 
خیلی از استفاده کنندگان کامپوننت RSForm همیشه مشکل ساخت یک فرم محاسبه گر را دارند که چگونه یک فرمی بسازند که کاربران شان با کمک آن بصورت آنلاین قیمت ها یا اعداد یا هر چیزی که قابل انجام عملیات ریاضی هست را انجام دهند.
با اینکه کاموننت RSForm فقط یک کامپوننت ساخت فرم هست اما به حدی کاربر گرا نوشته شده است که هر کسی می تواند با داشتن دانش JavaScript و PHP هر کاری با این کامپوننت و فرم هایش انجام دهد.
در این اموزش فرا خواهیم گرفت چگونه بتوانیم فرم محاسبه با باکس - محاسبه با دکمه رادیویی و محاسبه یا لیست های چند انتخابی را بسازیم.
پیش نیاز برای این آموزش داشتن آشنایی نسبی به JavaScript و آشنایی کامل با HTML و آشنایی نسی با RSForm می باشد.

اولین آموزش نحوه ساختن فرم محاسبه گر با باکس (TextBox) می باشد :
تصویر:


شما باید خودتان همچین فرمی را با کامپوننت بسازید. این اموزش فقط جهت راهنمایی نوشتن کدهای JavaScript می باشد
بعد از ساختن این فرم در بخش ویرایش همان فرم وارد بخش CSS and Javascript شوید و کد جاوا اسکریپت زیر را درون ان قرار دهید.



{code lang:php showtitle:false lines:true hidden:false} function rsformTextCalculate(){ var txt1=document.getElementById('field1');
var txt2=document.getElementById('field2');
var result=document.getElementById('total');
if(txt1.value=="" || txt1.value!=parseFloat(txt1.value)) txt1.value=0; if(txt2.value=="" || txt2.value!=parseFloat(txt2.value))
txt2.value=0;
result.value=0;
result.value=parseInt(result.value);
result.value=parseInt(result.value)+parseInt(txt1.value)+parseInt(txt2.value);
}{/code}



از آنجایی که باید به JavaScript آشنایی داشته باشید بنده کد را توضیح نمی دهم.فقط توجه کنید که txt1 و txt2 نام های input ها هستند و total هم نام input نمایش نتیجه می باشد.
شما می توانید قسمت های txt1، txt2، totalرو به نام textbox های خودتون تغییر بدید.
حالا باید کد زیر رو در بخش Additional Attributes دکمه ارسال (تو تصویر دکمه "محاسه") قرار بدید:


{code lang:php showtitle:false lines:true hidden:false}on-click="rsformTextCalculate();"{/code}



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

دومین آموزش نحوه ساختن فرم محاسبه گر با دکمه رادیویی (Radio Bottun) می باشد :
تصویر:


شما باید خودتان همچین فرمی را با کامپوننت بسازید. این اموزش فقط جهت راهنمایی نوشتن کدهای JavaScript می باشد
بعد از ساختن این فرم در بخش ویرایش همان فرم وارد بخش CSS and Javascript شوید و کد جاوا اسکریپت زیر را درون ان قرار دهید.



{code lang:php showtitle:false lines:true hidden:false} function rsformRadioCalculate(){ var op1=document.getElementsByName('form[radio1]');
var op2=document.getElementsByName('form[radio2]');
var result=document.getElementById('total');
result.value=0;
result.value=parseInt(result.value);
for(i=0;i<op1.length;i++)
if(op1[i].checked)
result.value=parseInt(result.value)+parseInt(op1[i].value);
for(i=0;i<op2.length;i++)
if(op2[i].checked)
result.value=parseInt(result.value)+parseInt(op2[i].value);
}{/code}


توجه کنید که 'form[radio1]' همان نام input دکمه رادیویی اول می باشد و 'form[radio2]' نام input دکمه رادیویی دوم می باشد.
total هم نام input نمایش نتیجه می باشد. این روش برای چک باکس (CheckBox) هم جواب گو خواهد بود.
حالا باید کد زیر رو در بخش Additional Attributes دکمه ارسال (تو تصویر دکمه "محاسبه") قرار بدید :


{code lang:php showtitle:false lines:true hidden:false}on-click="rsformRadioCalculate();"{/code}



تا تابعی که نوشتیم زمانی عمل کند که روی دکمه محاسبه کلیک شد.
سومین آموزش نحوه ساختن فرم محاسبه گر با لیست چند انتخابی (select) می باشد :
تصویر:


شما باید خودتان همچین فرمی را با کامپوننت بسازید. این اموزش فقط جهت راهنمایی نوشتن کدهای JavaScript می باشد
بعد از ساختن این فرم در بخش ویرایش همان فرم وارد بخش CSS and Javascript شوید و کد جاوا اسکریپت زیر را درون ان قرار دهید.



{code lang:php showtitle:false lines:true hidden:false} function rsformSelectCalculate(){ var option1=document.getElementById('textlist');
var result=document.getElementById('total');
result.value=0;
result.value=parseInt(result.value);
for(i=0;i<option1.length;i++)
if(option1.options[i].selected)
result.value=parseInt(result.value)+parseInt(option1[i].value);
}{/code}



توجه کنید که textlist نام همان عنصر select است و total نام input نمایش نتیجه می باشد که طبق فرم خودتان می توانید تغییر دهید.
حالا باید کد زیر رو در بخش Additional Attributes دکمه ارسال (تو تصویر دکمه "محاسبه") قرار بدید :


{code lang:php showtitle:false lines:true hidden:false}on-click="rsformSelectCalculate();"{/code}



هر نوع فرم محاسبه ای که بخواهید با کامپوننت RSForm بسازید فقط کافی است کمی JavaScript بدانید . تمام. می بینید که چقدر آسان است.
اگر هم بخواهید مثلا نتیجه ی محاسبه برای بانک و پرداخت ارسال شود فقط کافی است قسمتی که پلاگین total قیمت را نمایش می دهد تغییر دهید. به همین سادگی!

کاری از گروه پیامک ایرانیان
امیدواریم مفید واقع شود

مدیریت پیامک ایرانیان جومینا

طراحی سایت : رایان نگار پارس

پیامک ایرانیان | ارسال | تبلیغات | پنل پیامک