"if" statement in javascript & displaying result in label

Question

Hi guys,

I have a registration form where a customer selects their desired package via a dropdownlist. They then select whether they wish to avail of a multiyear discount by choosing Yes or No radio buttons. If the yes radio button is selected, a dropdownlist is shown (using javascript) with a selection of years 1-3. I'm not familar at all with javascript, and what I need to do next is when the customer selects year 1, 2, 3 for multiyear discounts, to calculate this discount, and show in a label beside the dropdownlist OR hide this label if the customer has selected no to multiyear discounts.

Here is my existing code: Javascript to hide the yearly discount dropdownlist

<script type='text/javascript'>

$(function(){

 $('#discountselection').hide();

    $('#No').click(function(){
        $('#discountselection').hide();
    });

    $('#Yes').click(function(){
        $('#discountselection').show();
    });

});

</script>

And here is the HTML code:

        <td width="343">Package*</td>

        <td colspan="4">

        <select class="purple" name="package">

            <option value="Standard">Standard - &euro;55 Monthly</option>

            <option value="Premium" selected="selected">Premium - &euro;99 Monthly</option>

            <option value="Platinum">Platinum - &euro;149 Monthly</option>

        </select>

        </td>

        <tr>

        <td width="343">Would You like to avail of our multiyear discounts?*

        <br />See <a href="#dialog" name="modal">Pricing</a> for more details

        </td>

        <td colspan="4">

            <input name="discount" type="radio" id="Yes" value="Yes" />Yes

            <input name="discount" type="radio" id="No" value="No" checked="checked" />No<br />  

            <select name="discountselection" class="purple" id="discountselection">

                <option value="1" selected="selected">1 Year</option>

                <option value="2">2 Years</option>

                <option value="3">3 Years</option>  

            </select>                  

        </td>

This would be the IF statement I would need to execute within the javascript to calculate the price:

if package == "standard" && discountselection == "1"
{
    cost = 45 * 12;
    //display cost in label
}   
elseif package == "standard" && discountselection =="2"
{
    cost = 45 * 24; 
    //display cost in label
}
elseif package == "standard" && discountselection =="3"
{
    cost = 45 * 36;
    //display cost in label
}
elseif package == "premium" && discountselection =="1"
{
    cost = 85 * 12; 
    //display cost in label
}
elseif package == "premium" && discountselection =="2"
{
    cost = 85 * 24;
    //display cost in label
}
elseif package == "premium" && discountselection =="3"
{
    cost = 85 * 36;
    //display cost in label
}
elseif package == "platinum" && discountselection =="1"
{
    cost = 134 * 12;
    //display cost in label 
}
elseif package == "platinum" && discountselection =="2"
{
    cost = 134 * 24;
    //display cost in label
}
else package == "platinum" && discountselection =="3"
{
    cost = 134 * 36;
    //display cost in label
}

I am just unsure how to create this IF statement within Javascript. If anyone could offer any advice, help, or links to tutorials that could help me in this, I'd be very grateful.

Answer 1

W3 Schools will be a great resource as you learn Javascript. You can learn more about if and else syntax here.

Answer 2

Check this to start with -

http://www.w3schools.com/JS/js_if_else.asp

Answer 3

I hope that I understood your question correctly, but you're trying to display a label with the costs if the user selected a value from your select box.

If you can accomplish this by using the change event (provided by jQuery).

$("#discountselection").change(function()  { 
    var product_cat = $("#package option:selected").val();

    if(product_cat == "standard") {
       product_prefix = 45;
    } else if (product_cat == "premium") {
       product_prefix = 85;
    } else if (product_cat == "platinum") {
       product_prefix = 134;
    }

    var selected_value = $("#discountselection option:selected").val();
    var cost = product_prefix * (12 * selected_value);
    $("#costlabel").val(cost);
}); 

But please be aware that you should double check these values on the server!

Answer 4

In javascript else and if must be separate words. In javascript the condition to an if statement must or should be enclosed in parentheses. So:

if(package == "standard" && discountselection == "1")
{
    cost = 45 * 12;
}   
else if(package == "standard" && discountselection =="2")
{
    cost = 45 * 24; 
}

And so on. But, if I were you I'd consider doing something a little more automatic. I hate repetitive typing!

var discount = {1: 12, 2: 24, 3: 36};

var package_prices = {'standard': 45, 'premium': 85, 'platinum': 134 };

var cost = package_prices[package] * discount[discountselection];

Now cost should be correct, and look at all the effort you save.

Note: I have followed your example code, here, but in your actual HTML your option values have an upper case first character, so in fact this would fail unless the package_prices variable were modified to suit (e.g. 'Standard': 45 instead of 'standard': 45)

If you're looking for good reference material on Javascript, as opposed to more verbose tutorials, you can't do better than the Mozilla Developer Center, for example here's their if/else documentation.