חישוב הזמנה ב jQuery

[CSS]

חישוב הזמנה ב jQuery

במדריך הזה נלמד איך לחשב את המחיר של הזמנת איחסון.
ניצור בדף דיב עם id="order" שבתוכו יהיו כל האפשרויות של האיחסון.

<div id="order">

</div>

ניצור תחילה select עם 4 אפשרויות בחירה ועם id="host":
(ריק)
חבילה קטנה - 20 ש"ח לחודש. (הערך שלה יהיה כ ho1)
חבילה בינונית - 30 ש"ח לחודש. (הערך שלה יהיה כ ho2)
חבילה מקצועית - 45 ש"ח לחודש. (הערך שלה יהיה כ ho3)
ניצור את זה ב HTML:

<b>חבילה:</b><BR>
<select id="host">
<option></option>
<option value="ho1"> חבילה קטנה (20 שקל לחודש) </option>
<option value="ho2"> חבילה בינונית (30 שקל לחודש) </option>
<option value="ho3"> חבילה מקצועית (45 שקל לחודש) </option>
</select>

בכוונה עשיתי option אחד ריק, כדי שהמשתמש יוכל לבחור חבילה.

לאחר מכן נביא אפשרות של בחירת פאנל לאיחסון, ע"י radio:
cPanel - תוספת 10 ש"ח לחודש. (הערך יהיה כ cpanel)
directadmin - ללא תוספת תשלום. (הערך יהיה כ directadmin)

נעשה את זה ב HTML:

<BR><BR><b>פאנל ניהול:</b><BR>
<label><input type="radio" value="cpanel" class="panel" name="panel"> cPanel (תוספת 10 ש"ח לחודש)</label> <BR>
<label><input type="radio" value="dadmin" class="panel" name="panel"> DirectAdmin </label>

עכשיו נכין אפשרות של תוספות לאיחסון, ע"י checkbox כדי שיוכלו לבחור כמה אפשרויות:
אבטחת SSL - תוספת 25 ש"ח לחודש. (הערך יהיה ssl ו id="as")
דומיין - תוספת 30 ש"ח לשנה. (הערך יהיה domain ו id="ad")
כתובת אייפי נוספת - תוספת 5 ש"ח לחודש. (הערך יהיה plusip ו id="ap")

נעשה את זה ב HTML:

<BR><BR><b>תוספות לאיחסון:</b><BR>
<label><input type="checkbox" value="ssl" id="as"> אבטחת SSL (בתוספת 25 שקל לחודש) </label><BR>
<label><input type="checkbox" value="domain" id="ad"> דומיין (בתוספת 30 שקל לשנה) </label><BR>
<label><input type="checkbox" value="plusip" id="ap"> כתובת אייפי נוספת (בתוספת 5 שקל לחודש)</label>

ודבר אחרון ב FORM יהיה זמן האיחסון - חודש או שנה.
נכין select עם id="hostime", ו-2 אפשרויות, הערך של החודש יהיה ht1 והערך של השנה יהיה ht2.

<BR><BR><b>זמן האיחסון</b><BR>
<select id="hostime">
<option value="ht1">חודש</option>
<option value="ht2"> שנה</option>
</select>

לבסוף נכין טקסט שבתוכו יהיה את הסכום הסופי לתשלום, שהסכום לתשלום יהיה בתוך id="pay":

<BR><BR><BR><BR>
<div style="float:right;">סה"כ לתשלום: </div>
<div id="pay" style="float:right; padding-right:2px; font-weight:bold;">0</div>
<div style="float:right; padding-right:5px;"> ש"ח </div>

התוצאה עד עכשיו היא כזאת:

במידה ואתם משתמשים במסמך חדש, ואתם מקבלים את זה מבולגן, הכניסו בראש הדף את השורה:

<style type="text/css">
body {direction:rtl; font-family:arial;}
input,select {font-family:arial;}
</style>

ובידקו אם עכשיו זה מסודר.

זהו, סיימנו את החלק של ה HTML.

<div id="order">
<b>חבילה:</b><BR>
<select id="host">
<option> </option>
<option value="ho1"> חבילה קטנה (20 שקל לחודש) </option>
<option value="ho2"> חבילה בינונית (30 שקל לחודש) </option>
<option value="ho3"> חבילה מקצועית (45 שקל לחודש) </option>
</select>


<BR><BR><b>פאנל ניהול:</b><BR>
<label><input type="radio" value="cpanel" class="panel" name="panel"> cPanel (תוספת 10 ש"ח לחודש)</label> <BR>
<label><input type="radio" value="dadmin" class="panel" name="panel"> DirectAdmin </label>


<BR><BR><b>תוספות לאיחסון:</b><BR>
<label><input type="checkbox" value="ssl" id="as" class="add"> אבטחת SSL (בתוספת 25 שקל לחודש) </label><BR>
<label><input type="checkbox" value="domain" id="ad" class="add"> דומיין (בתוספת 30 שקל לשנה) </label><BR>
<label><input type="checkbox" value="plusip" id="ap" class="add"> כתובת אייפי נוספת (בתוספת 5 שקל לחודש)</label>

<BR><BR><b>זמן האיחסון</b><BR>
<select id="hostime">
<option value="ht1">חודש</option>
<option value="ht2"> שנה</option>
</select>

<BR><BR><BR><BR>
<div style="float:right;">סה"כ לתשלום: </div>
<div id="pay" style="float:right; padding-right:2px; font-weight:bold;">0</div>
<div style="float:right; padding-right:5px;"> ש"ח </div>
</div>

עכשיו נתחיל בחלק של ה jQuery.
קודם כל, נכין כמה משתנים.
מכיוון שבחרתי בשמות לא ברורים, הוספתי שורות הסבר:

// need pay
var mpay = 0; // month pay

// month pay
var mpp = 0 // panel
,bpp = 0 // host package
,cpp = 0 // sll
,cbp = 0; // ip

// year pay
var cap = 0; // domain 

אז אני עכשיו אסביר כל משתנה:
mpay - סה"כ לתשלום.
mpp - הסכום של סוג הפאנל.
bpp - הסכום של החבילת איחסון.
cpp - הסכום של ה SLL.
cbp - הסכום של ה ip.
cap - הסכום של הדומיין.

בסופו של דבר, נצטרך לחבר את כל הסכומים של האפשרויות לסכום הסופי.
עכשיו נעשה אירוע של שינוי של input או select:

$("#order input,#order select").change(function() {

});

עכשיו נתחיל לחשב כמה תעלה החבילה שלנו.
נקבל את הערך של ה select שלנו, ונכניס לתוך המשתנה hostc.

var hostc = $("#host").val();

לאחר מכן נעשה בדיקה לאיזה ערך שווה ה select שלנו, כדי שנוכל לדעת כמה זה יעלה.
בואו ניזכר בערכים שלנו:
ho1
20 ש"ח
ho2
30 ש"ח
ho3
45 ש"ח
את הערך של הכסף נכניס למשתנה bpp:

if(hostc == "ho1") {bpp = 20;}else{
if(hostc == "ho2") {bpp = 30;}else{
if(hostc == "ho3") {bpp = 45;}
} }

זהו, עכשיו לפי הבחירה של החבילה, הערך של המשתנה bpp ישתנה.

עכשיו נבצע בדיקה האם הפאנל הנבחר הוא cpanel או לא.
במידה וכן, נשנה את הערך של mpp ל-10, במידה ולא, הערך יהיה 0 (חובה לציין זאת, מכיוון שיכול להיות מקרה שהמשתמש יבחר ב cpanel ואז יבחר directadmin).
נכניס למשתנה panelc את הערך של ה radio המסומן ונעשה את הבדיקה.

var panelc = $(".panel:checked").val();
if(panelc == "cpanel") {mpp = 10;}else{mpp = 0;}

עכשיו במידה ונבחר cpanel, הערך של mpp יהיה 10.

לאחר מכן, נבצע בדיקה איזה אפשרויות מסומנות.
בתחילת המדריך הגדרנו לכל אפשרות id:
ssl - #as
domain - #ad
plusip - #ap
אז עכשיו נעשה בדיקה הערך של ה ID המסומן שווה לערך שבתוכו.
במידה וכן, נשנה את הערך של המשתנה של האפשרות:
cpp - ssl
cap - domain
cbp - ip

if($("#as:checked").val() == "ssl") {cpp = 25; }else{ cpp = 0; }
if($("#ad:checked").val() == "domain") {cap = 30; }else{ cap = 0; }
if($("#ap:checked").val() == "plusip") {cbp = 5; }else{ cbp = 0; }

עכשיו במידה וה SSL מסומן, אז הערך של cpp יהיה 25, במידה וה domain מסומן, אז הערך של cap יהיה 30, ובמידה וה plusip מסומן, הערך של cbp יהיה 5.

זהו, סיימנו לחשב כמה עולה סה"כ כל אפשרות, עכשיו צריך להציג אותה בהתאם לזמן שנבחר.
להזכירכם, בתחילת המדריך אמרנו ש #hostime יכול להכיל או ht1 - כלומר לחודש, או ht2 לשנה.
נעשה עכשיו בדיקה האם הערך של #hostime שווה ל ht1.
במידה וכן, אז נחשב את הסכום של כל האפשרויות, חוץ מהדומיין (מכיוון שהעלות שלו היא לשנה).
במידה ולא, נעשה את אותה פעולה, רק הפעם נכפיל ב-12 - כדי לקבל את הסכום לשנה.

if($("#hostime").val() == "ht1") {
mpay = mpp+bpp+cpp+cbp;
}else{
mpay = (mpp+bpp+cpp+cbp)*12;
}

עכשיו נכניס למשתנה n2p את הסכום הסופי לתשלום + הסכום של הדומיין, ונדפיס אותו ב #pay.

var n2p = mpay+cap;
$("#pay").text(n2p);

זהו, עכשיו אתם יכולים לבדוק את המחשבון הזמנות שלכם ולבדוק שהכל תקין.
במידה ולא, בידקו שהקוד המלא שלכם הוא כזה:

<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
$(document).ready(function(){
// need pay
var mpay = 0; // month pay

// month pay
var mpp = 0 // panel
,bpp = 0 // host package
,cpp = 0 // sll
,cbp = 0; // ip

// year pay
var cap = 0; // domain 
$("#order input,#order select").change(function() {

var hostc = $("#host").val();
if(hostc == "ho1") {bpp = 20;}else{
if(hostc == "ho2") {bpp = 30;}else{
if(hostc == "ho3") {bpp = 45;}
} }

var panelc = $(".panel:checked").val();
if(panelc == "cpanel") {mpp = 10;}else{mpp = 0;}

if($("#as:checked").val() == "ssl") {cpp = 25; }else{ cpp = 0; }
if($("#ad:checked").val() == "domain") {cap = 30; }else{ cap = 0; }
if($("#ap:checked").val() == "plusip") {cbp = 5; }else{ cbp = 0; }


if($("#hostime").val() == "ht1") {
mpay = mpp+bpp+cpp+cbp;
}else{
mpay = (mpp+bpp+cpp+cbp)*12;
}

var n2p = mpay+cap;
$("#pay").text(n2p);
});



});
</script>

<div id="order">
<b>חבילה:</b><BR>
<select id="host">
<option> </option>
<option value="ho1"> חבילה קטנה (20 שקל לחודש) </option>
<option value="ho2"> חבילה בינונית (30 שקל לחודש) </option>
<option value="ho3"> חבילה מקצועית (45 שקל לחודש) </option>
</select>


<BR><BR><b>פאנל ניהול:</b><BR>
<label><input type="radio" value="cpanel" class="panel" name="panel"> cPanel (תוספת 10 ש"ח לחודש)</label> <BR>
<label><input type="radio" value="dadmin" class="panel" name="panel"> DirectAdmin </label>


<BR><BR><b>תוספות לאיחסון:</b><BR>
<label><input type="checkbox" value="ssl" id="as"> אבטחת SSL (בתוספת 25 שקל לחודש) </label><BR>
<label><input type="checkbox" value="domain" id="ad"> דומיין (בתוספת 30 שקל לשנה) </label><BR>
<label><input type="checkbox" value="plusip" id="ap"> כתובת אייפי נוספת (בתוספת 5 שקל לחודש)</label>

<BR><BR><b>זמן האיחסון</b><BR>
<select id="hostime">
<option value="ht1">חודש</option>
<option value="ht2"> שנה</option>
</select>

<BR><BR><BR><BR>
<div style="float:right;">סה"כ לתשלום: </div>
<div id="pay" style="float:right; padding-right:2px; font-weight:bold;">0</div>
<div style="float:right; padding-right:5px;"> ש"ח </div>
</div>

במידה והקוד המלא הוא כמו שרשום למעלה, ועדיין יש בעיה, אשמח אם תרשמו ואני אתקן אותה.
כל הערה, שאלה, בקשה תתקבל בברכה.

[-Smoxer-]

מדריך מצויין! תודה רבה.

[Cr3]

מדריך מצויין, תודה רבה וכל הכבוד