Question

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

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!