Error with javascript order price not being displayed

Question

My name is Nicole. I am a newbie at creating javascript code.

I am trying to build a UK Course website allowing website owners to offer courses for sale and include chat agents to help answer peoples questions regarding the course.

There is some error in my javascript.

If the customer is based in the UK, VAT tax is added onto the course price. The prices display correctly on the checkout page.

But if the customer is located in any other country, no VAT tax is added to the price.

However, for this option, the price is not being displayed at all.

I cannot see any errors in my javascript code, so it is driving my crazy!

My CSS, html and javascript code is listed blow. Please help!

$(document).ready(function() {
    function calcOrderPrice() {

        var countryselected = document.getElementById('customerBusinessCountry').value;
        var packageselected = document.getElementById('customerUKCoursesPackage').value;
        var noofadditionalpackagesselected = document.getElementById('customerAdditionalUKCoursesAgentPackages').value;
        var noofadditionalagentsonlyselected = document.getElementById('customerAdditionalUKCoursesAgentsOnly').value;

        var package_selected_price = 0.00;
        var additional_packages_price = 0.00;
        var total_additional_packages_price = 0.00;
        var noofadditionalagentsonly = 0;
        var additional_agents_only_price = 0.00;
        var total_additional_agents_only_price = 0.00;
        var total_additional_agents_only_price = 0.00;
        var noofadditionalpackages = 0;
        var sub_total_price = 0.00;
        var vat_price = 0.00;
        var total_price = 0.00;
        var sub_total_price_str = "";
        var vat_price_str = "";
        var total_price_str = "";
        var sub_total_price_str_length = 0;
        var vat_price_str_length = 0;
        var total_price_str_length = 0;

        if ((packageselected == "Platinum") || (packageselected == "Gold") || (packageselected == "Silver") || (packageselected == "Bronze") || (packageselected == "Standard") || (packageselected == "Entry")) {

            if (countryselected == "UnitedKingdom") {

                additional_agents_only_price = 440.00;

                if (packageselected == "Platinum") {

                    package_selected_price = 7700.00;
                    total_price = total_price + package_selected_price;

                }

                if (packageselected == "Gold") {

                    package_selected_price = 6600.00;
                    total_price = total_price + package_selected_price;

                }

                if (packageselected == "Silver") {

                    package_selected_price = 4400.00;
                    total_price = total_price + package_selected_price;

                }

                if (packageselected == "Bronze") {

                    package_selected_price = 3300.00;
                    total_price = total_price + package_selected_price;

                }

                if (packageselected == "Standard") {

                    package_selected_price = 2200.00;
                    total_price = total_price + package_selected_price;

                }

                if (packageselected == "Entry") {

                    package_selected_price = 1100.00;
                    total_price = total_price + package_selected_price;

                }

            }

            if (countryselected == "Other") {

                additional_agents_only_price = 400.00;

                if (packageselected == "Platinum") {

                    package_selected_price = 7000.00;
                    total_price = total_price + package_selected_price;

                }

                if (packageselected == "Gold") {

                    package_selected_price = 6000.00;
                    total_price = total_price + package_selected_price;

                }

                if (packageselected == "Silver") {

                    package_selected_price = 4000.00;
                    total_price = total_price + package_selected_price;

                }

                if (packageselected == "Bronze") {

                    package_selected_price = 3000.00;
                    total_price = total_price + package_selected_price;

                }

                if (packageselected == "Standard") {

                    package_selected_price = 2000.00;
                    total_price = total_price + package_selected_price;

                }

                if (packageselected == "Entry") {

                    package_selected_price = 1000.00;
                    total_price = total_price + package_selected_price;

                }

            }

            if (parseInt(noofadditionalpackagesselected) > 0) {

                additional_packages_price = package_selected_price / 2;
                noofadditionalpackages = parseInt(noofadditionalpackagesselected);
                total_additional_packages_price = noofadditionalpackages * additional_packages_price;
                total_price = total_price + total_additional_packages_price;

            }

            if (parseInt(noofadditionalagentsonlyselected) > 0) {

                noofadditionalagentsonly = parseInt(noofadditionalagentsonlyselected);
                total_additional_agents_only_price = noofadditionalagentsonly * additional_agents_only_price;
                total_price = total_price + total_additional_agents_only_price;

            }

            // Convert Total Price from integer to currency string
            total_price_str = new Intl.NumberFormat("en-US", {
                style: "currency",
                currency: "USD"
            }).format(total_price);

            total_price_str_length = total_price_str.length;

            total_price_str = total_price_str.substring(1, total_price_str_length);

            if (countryselected == "UnitedKingdom") {

                if (total_price > 0) {
                    vat_price = total_price / 11;
                    sub_total_price = total_price - vat_price;
                }

                // Convert VAT Price from integer to currency string
                vat_price_str = new Intl.NumberFormat("en-US", {
                    style: "currency",
                    currency: "USD"
                }).format(vat_price);

                vat_price_str_length = vat_price_str.length;

                vat_price_str = vat_price_str.substring(1, vat_price_str_length);

                // Convert Sub-Total Price from integer to currency string
                sub_total_price_str = new Intl.NumberFormat("en-US", {
                    style: "currency",
                    currency: "USD"
                }).format(sub_total_price);

                sub_total_price_str_length = sub_total_price_str.length;

                sub_total_price_str = sub_total_price_str.substring(1, sub_total_price_str_length);

                $("#output1").text(sub_total_price_str);
                $("#output2").text(vat_price_str);
                $("#output3").text(total_price_str);

            }

            if (countryselected == "Other") {

                $("#output4").text(total_price_str);

            }

        }

    }

    $('#customerBusinessCountry').on('change', function() {
        var selectedvalue = $(this).val();
        var selectedtext = $(this).find("option:selected").text();
        $("div.customerUKCoursesPackageDiv").hide();
        $("div.customerAdditionalUKCoursesAgentPackagesDiv").hide();
        $("div.customerAdditionalUKCoursesAgentsOnlyDiv").hide();
        $("div.customerUKCoursesOrderPaymentMethodDiv").hide();
        $("div.customerUKCoursesOrderSubTotalPriceDiv").hide();
        $("div.customerUKCoursesOrderVATPriceDiv").hide();
        $("div.customerUKCoursesOrderTotalPriceDiv").hide();
        $("#customerUKCoursesPackage" + selectedvalue).show();
        $("#customerAdditionalUKCoursesAgentPackagesAll").show();
        $("#customerAdditionalUKCoursesAgentsOnly" + selectedvalue).show();
        $("#customerUKCoursesOrderPaymentMethodAll").show();
        $("#customerUKCoursesOrderSubTotalPrice" + selectedvalue).show();
        $("#customerUKCoursesOrderVATPrice" + selectedvalue).show();
        $("#customerUKCoursesOrderTotalPrice" + selectedvalue).show();

        var sub_total_price = 0.00;
        var vat_price = 0.00;
        var total_price = 0.00;

        var sub_total_price_str = sub_total_price + ".00";
        var vat_price_str = vat_price + ".00";
        var total_price_str = total_price + ".00";

        $("#output1").text(sub_total_price_str);
        $("#output2").text(vat_price_str);
        $("#output3").text(total_price_str);

    });

    $('#customerUKCoursesPackage').on('change', function() {

        calcOrderPrice();

    });

    $('#customerAdditionalUKCoursesAgentPackages').on('change', function() {

        calcOrderPrice();

    });

    $('#customerAdditionalUKCoursesAgentsOnly').on('change', function() {

        calcOrderPrice();

    });

});

.customerUKCoursesPackageDiv {
    display: none;
}

.customerAdditionalUKCoursesAgentPackagesDiv {
    display: none;
}

.customerAdditionalUKCoursesAgentsOnlyDiv {
    display: none;
}

.customerUKCoursesOrderPaymentMethodDiv {
    display: none;
}

.customerUKCoursesOrderSubTotalPriceDiv {
    display: none;
}

.customerUKCoursesOrderVATPriceDiv {
    display: none;
}

.customerUKCoursesOrderTotalPriceDiv {
    display: none;
}

<script src="https://www.yourdomain.co.uk/common/javascript/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<article id="contact-page">
    <section id="contact-form">
        <div class="full-width">
            <div class="container">
                <div class="row-fluid">
                    <div class="span8 offset2 contact-intro">
                        <h1>UK Courses Order Form</h1>
                        <p>Input your details and select your preferred UK Courses Package options in the Form.</br></br>To order successfully, you must enter your preferred information in all Fields marked with an *. You must select your preferred UK Courses Package. If you require additional UK Courses Chat Agent Packages or Chat Agents Only for other web pages on your website, you can select the number of additional UK Courses Chat Agent Packages and / or Chat Agents Only you wish to purchase. Additional UK Courses Chat Agent Packages cost 50% of the price of the UK Courses Package you selected, each. Additional Chat Agents Only cost $440.00 each.</br></br>All prices are displayed in GBP. UK Orders include 10% VAT in the prices displayed and the Total Order Price. International Orders do not include 10% VAT in the prices displayed and the Total Order Price.</p>
                    </div>
                    <div class="span5 offset2">
                        <form class="contact-form" action="https://www.yourdomain.co.uk/process_order_form.php" method="POST">
                            <h3>ORDER DETAILS</h3>
                            <input name="SecurityCode" type="hidden" value="V7P3rMN0ctFe3Hi8GsDGpUX4">
                            <label class="sans">Full Name *</label><input name="customerName" required="true" type="text" placeholder="Input your Full Name. Maximum 200 Characters." value="" maxlength="200" data-maxlength="200">
                            <label class="sans">Email *</label><input name="customerEmail" required="true" type="email" placeholder="Input your Email Address. Maximum 200 Characters." value="" maxlength="200" data-maxlength="200">
                            <label class="sans">Phone Number *</label><input name="customerPhoneNumber" required="true" type="text" placeholder="Input your Phone Number. Maximum 20 Characters." value="" maxlength="20" data-maxlength="20">
                            <label class="sans">Business Name *</label><input name="customerBusinessName" required="true" type="text" placeholder="Input your Businss Name. Maximum 200 Characters." value="" maxlength="200" data-maxlength="200">
                            <label class="sans">Business Website URL *</label><input name="customerBusinessWebsite" required="true" type="text" placeholder="Input your Business Website URL. Maximum 200 Characters." value="" maxlength="200" data-maxlength="200">
                            <label class="sans">Business Address *</label><input name="customerBusinessAddress" required="true" type="text" placeholder="Input your Business Address. Maximum 200 Characters." value="" maxlength="200" data-maxlength="200">
                            <label class="sans">Business Country *</label>
                            <div class="styled">
                                <select id="customerBusinessCountry" name="customerBusinessCountry" required="true" autocomplete="off">
                                    <option selected="selected" value="Select Business Country" disabled="disabled"> Select Business Country</option>
                                    <option value="UnitedKingdom"> United Kingdom</option>
                                    <option value="Other"> Other</option>
                                </select>
                            </div>
                            <div id="customerUKCoursesPackageUnitedKingdom" class="customerUKCoursesPackageDiv">
                                <label class="sans">Select UK Courses Package *</label>
                                <div class="styled">
                                    <select id="customerUKCoursesPackage" name="customerUKCoursesPackage" required="true" autocomplete="off">
                                        <option selected="selected" value="Select UK Courses Package" disabled="disabled"> Select UK Courses Package</option>
                                        <option value="Platinum"> Platinum UK Courses - $7,700.00</option>
                                        <option value="Gold"> Gold UK Courses - $6,600.00</option>
                                        <option value="Silver"> Silver UK Courses - $4,400.00</option>
                                        <option value="Bronze"> Bronze UK Courses - $3,300.00</option>
                                        <option value="Standard"> Standard UK Courses - $2,200.00</option>
                                        <option value="Entry"> Entry UK Courses - $1,100.00</option>
                                    </select>
                                </div>
                            </div>
                            <div id="customerUKCoursesPackageOther" class="customerUKCoursesPackageDiv">
                                <label class="sans">Select UK Courses Package *</label>
                                <div class="styled">
                                    <select id="customerUKCoursesPackage" name="customerUKCoursesPackage" required="true" autocomplete="off">
                                        <option selected="selected" value="Select UK Courses Package" disabled="disabled"> Select UK Courses Package</option>
                                        <option value="Platinum"> Platinum UK Courses - GBP7,000.00</option>
                                        <option value="Gold"> Gold UK Courses - GBP6,000.00</option>
                                        <option value="Silver"> Silver UK Courses - GBP4,000.00</option>
                                        <option value="Bronze"> Bronze UK Courses - GBP3,000.00</option>
                                        <option value="Standard"> Standard UK Courses - GBP2,000.00</option>
                                        <option value="Entry"> Entry UK Courses - GBP1,000.00</option>
                                    </select>
                                </div>
                            </div>
                            <div id="customerAdditionalUKCoursesAgentPackagesAll" class="customerAdditionalUKCoursesAgentPackagesDiv">
                                <label class="sans">Additional UK Courses Chat Agent Packages *</label>
                                <div class="styled">
                                    <select id="customerAdditionalUKCoursesAgentPackages" name="customerAdditionalUKCoursesAgentPackages" required="true" autocomplete="off">
                                        <option selected="selected" value="Select Additional UK Courses Packages" disabled="disabled"> Select Additional UK Courses Packages</option>
                                        <option value="0"> 0</option>
                                        <option value="1"> 1 x 50% of above selected Package Price</option>
                                        <option value="2"> 2 x 50% of above selected Package Price</option>
                                        <option value="3"> 3 x 50% of above selected Package Price</option>
                                        <option value="4"> 4 x 50% of above selected Package Price</option>
                                        <option value="5"> 5 x 50% of above selected Package Price</option>
                                        <option value="6"> 6 x 50% of above selected Package Price</option>
                                        <option value="7"> 7 x 50% of above selected Package Price</option>
                                        <option value="8"> 8 x 50% of above selected Package Price</option>
                                        <option value="9"> 9 x 50% of above selected Package Price</option>
                                        <option value="10"> 10 x 50% of above selected Package Price</option>
                                    </select>
                                </div>
                            </div>
                            <div id="customerAdditionalUKCoursesAgentsOnlyUnitedKingdom" class="customerAdditionalUKCoursesAgentsOnlyDiv">
                                <label class="sans">Additional UK Courses Chat Agents Only *</label>
                                <div class="styled">
                                    <select id="customerAdditionalUKCoursesAgentsOnly" name="customerAdditionalUKCoursesAgentsOnly" required="true" autocomplete="off">
                                        <option selected="selected" value="Select Additional UK Courses Agents Only" disabled="disabled"> Select Additional UK Courses Agents Only</option>
                                        <option value="0"> 0</option>
                                        <option value="1"> 1 - $440.00</option>
                                        <option value="2"> 2 - $880.00</option>
                                        <option value="3"> 3 - $1,320.00</option>
                                        <option value="4"> 4 - $1,760.00</option>
                                        <option value="5"> 5 - $2,200.00</option>
                                        <option value="6"> 6 - $2,640.00</option>
                                        <option value="7"> 7 - $3,080.00</option>
                                        <option value="8"> 8 - $3,520.00</option>
                                        <option value="9"> 9 - $3,960.00</option>
                                        <option value="10"> 10 - $4,400.00</option>
                                    </select>
                                </div>
                            </div>
                            <div id="customerAdditionalUKCoursesAgentsOnlyOther" class="customerAdditionalUKCoursesAgentsOnlyDiv">
                                <label class="sans">Additional UK Courses Chat Agents Only *</label>
                                <div class="styled">
                                    <select id="customerAdditionalUKCoursesAgentsOnly" name="customerAdditionalUKCoursesAgentsOnly" required="true" autocomplete="off">
                                        <option selected="selected" value="Select Additional UK Courses Agents Only" disabled="disabled"> Select Additional UK Courses Agents Only</option>
                                        <option value="0"> 0</option>
                                        <option value="1"> 1 - GBP400.00</option>
                                        <option value="2"> 2 - GBP800.00</option>
                                        <option value="3"> 3 - GBP1,200.00</option>
                                        <option value="4"> 4 - GBP1,600.00</option>
                                        <option value="5"> 5 - GBP2,000.00</option>
                                        <option value="6"> 6 - GBP2,400.00</option>
                                        <option value="7"> 7 - GBP3,800.00</option>
                                        <option value="8"> 8 - GBP3,200.00</option>
                                        <option value="9"> 9 - GBP3,600.00</option>
                                        <option value="10"> 10 - GBP4,000.00</option>
                                    </select>
                                </div>
                            </div>
                            <div id="customerUKCoursesOrderPaymentMethodAll" class="customerUKCoursesOrderPaymentMethodDiv">
                                <label class="sans">UK Courses Order Payment Method *</label>
                                <div class="styled">
                                    <select id="customerUKCoursesOrderPaymentMethod" name="customerUKCoursesOrderPaymentMethod" required="true" autocomplete="off">
                                        <option selected="selected" value="Select Payment Method" disabled="disabled"> Select Payment Method</option>
                                        <option value="PayPal"> PayPal, Credit / Debit Card</option>
                                        <option value="EFT"> Electronic Fund Transfer</option>
                                    </select>
                                </div>
                            </div>
                            <div id="customerUKCoursesOrderSubTotalPriceUnitedKingdom" class="customerUKCoursesOrderSubTotalPriceDiv">
                                <p>UK Courses Order Sub Total Price: $<span id="output1" name="sub_total_price_str"></span></p>
                            </div>
                            <div id="customerUKCoursesOrderVATPriceUnitedKingdom" class="customerUKCoursesOrderVATPriceDiv">
                                <p>UK Courses Order V.A.T. Price: $<span id="output2" name="vat_price_str"></span></p>
                            </div>
                            <div id="customerUKCoursesOrderTotalPriceUnitedKingdom" class="customerUKCoursesOrderTotalPriceDiv">
                                <p>UK Courses Order Total Price: $<span id="output3" name="total_price_str"></span></p>
                            </div>
                            <div id="customerUKCoursesOrderTotalPriceOther" class="customerUKCoursesOrderTotalPriceDiv">
                                <p>UK Courses Order Total Price: GBP<span id="output4" name="total_price_str"></span></p>
                            </div>
                            <input name="url" class="anti-spam" type="text">
                            <label class="sans">Security Question</label>
                            <div class="g-recaptcha" data-sitekey="8tJu3Wdro6GTNS4t67bdg-FU-bG4EVniH6fE4TG42a-xe3"></div>
                            <br>
                            <input class="buttons submit sans" type="submit" value="CHECKOUT">
                        </form>
                    </div>
                    <div class="span3 offset1">
                        <h3>PRIVACY</h3>
                        <p>We respect your Privacy.</br></br>We require your details to complete your Order but we do not store your information or sell it on to any third parties.</br></br>We do not store your Credit / Debit Card details. All Credit / Debit Card processing is performed by PayPal on their PayPal Transaction Processing Gateway.</p>
                    </div>
                </div>
            </div>
        </div>
    </section>
</article>
<footer id="main-footer">
</footer>

I tried checking my javascript code in a few different online javascript code checkers but none of them reported any errors.

I think maybe I have made a simple mistake somewhere but I cannot find the error as to why no price is displayed if the Order country selected from the drop-down list is "Other".

I also know there are probably a lot of more efficient ways to construct my javascript coding but I am not worried about that for now. I just want my javascript code to work properly :-(

I would really appreciate any help here as I am just a newbie and it is killing my confidence so much!

Much, much thanks in advance for any assistance.

Kind Regards,

Nicole

Answer 1

There are two SELECT elements with the id="customerUKCoursesPackage". Only the first one—containing United Kingdom prices—get the change handler that executes the calcOrderPrice() function.

And then there's:

var packageselected = document.getElementById('customerUKCoursesPackage').value;

...that is only accessing the United Kingdom package price list.

As @Libor points out in the comments—same problem with the SELECT elements id=customerAdditionalUKCoursesAgentsOnly.

---

There are a variety of ways to fix this, here's one:

Change:

<select id="customerUKCoursesPackage" name="customerUKCoursesPackage" required="true" autocomplete="off">

...to:

<select class="customerUKCoursesPackage" name="customerUKCoursesPackage" required="true" autocomplete="off">

...on both course SELECT lists. id is changed to class.

Then change the course SELECT lists event handlers:

$('#customerUKCoursesPackageUnitedKingdom .customerUKCoursesPackage').on('change', function(){
    calcOrderPrice();
});

$('#customerUKCoursesPackageOther .customerUKCoursesPackage').on('change', function(){
    calcOrderPrice();
});

The CSS selector is expanded to target the correct course SELECT list, and adding an event handler for both.

...and, finally, get the visible courses SELECT element when defining packageselected:

var packageselected; // = document.getElementById('customerUKCoursesPackage').value;
if ( $("#customerUKCoursesPackageUnitedKingdom .customerUKCoursesPackage").is(":visible") ) {
    packageselected = $("#customerUKCoursesPackageUnitedKingdom .customerUKCoursesPackage").val();
}
else if ( $("#customerUKCoursesPackageOther .customerUKCoursesPackage").is(":visible") ) {
    packageselected = $("#customerUKCoursesPackageOther .customerUKCoursesPackage").val();
}