PB Lite Calculator

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<form action="" method="post">
    <input type="hidden" name="finalPrice" value="">
    <h4>Tell us a bit about who you are</h4>
    <p><em>We just need some details incase we need to discuss anything with you</em></p>
    <label for="name">Your Name</label>
    <input type="text" class="form-control" name="name" placeholder="Your Name">
    <br>
    <label for="name">Company Name</label>
    <input type="text" class="form-control" name="companyName" placeholder="Company Name">
    <br>
    <label for="name">Contact Telephone Number</label>
    <input type="text" class="form-control" name="telephoneNumber" required placeholder="Contact Telephone Number">
    <br>
    <label for="name">Contact Email Address</label>
    <input type="text" class="form-control" name="emailAddress" required placeholder="Contact Email Address">
    <hr>
    <h4>Included Features</h4>
    <p><em>These features are included as standard in all packages</em></p>
    <div class="checkbox">
        <label class="checkbox-inline">
            <input type="checkbox" name="includedFeatures[]" disabled checked value="Google Analytics"> Google Analytics
        </label>
        <label class="checkbox-inline">
            <input type="checkbox" name="includedFeatures[]" disabled checked value="Wordpress"> Wordpress CMS
        </label>
        <label class="checkbox-inline">
            <input type="checkbox" name="includedFeatures[]" disabled checked value="Hosting"> 1 Year Secure Hosting
        </label>
        <label class="checkbox-inline">
            <input type="checkbox" name="includedFeatures[]" disabled checked value="Gallery System"> Gallery System
        </label>
    </div>
    <div class="checkbox">
        <label class="checkbox-inline">
            <input type="checkbox"...

CSS

body {
    padding: 40px;
}

JavaScript

var products = {
    "checkatrade": {
        "price": 0,
        "description": "Add section about Checkatrade to your homepage."
    },
    "areaCoveredMap": {
        "price": 0,
        "description": "Add a custom Google map to your site to show potential customers where you operate."
    },
    "standardTheme": {
        "price": 0,
        "description": "Our standard PB Lite theme."
    },
    "customTheme": {
        "price": 56000,
        "description": "Our designers will create a custom theme for your new site."
    },
    "gallerySystem": {
        "price": 0,
        "description": "Our designers will create a custom theme for your new site."
    },
    "caseStudySystem": {
        "price": 28000,
        "description": "Our designers will create a custom theme for your new site."
    },
    "portfolioSystem": {
        "price": 14000,
        "description": "Our designers will create a custom theme for your new site."
    },
    "blogSystem": {
        "price": 16000,
        "description": "Our designers will create a custom theme for your new site."
    },
    "teamSystem": {
        "price": 16000,
        "description": "Our designers will create a custom theme for your new site."
    },
}

var basePrice = 185000;
var calculatedPrice = 0;
var designChoicePrice = 0;
var systemsChosenPrice = 0;

var amountSpan = $('span.amount');
var amountHiddenField = $('input[name="finalPrice"]');
var checkPriceButton = $('button#checkPrice');
var designChoice = $('input[name="designChoice"]');
var systemsChosen = $('input[name="systemsChosen[]"]');
var systemsChosenID = ['gallerySystem'];

designChoice.change(function() {
    var designChoiceID = $(this).val();

    if (designChoiceID == "standardTheme") {
        designChoicePrice = products.standardTheme.price
    } else if (designChoiceID == "customTheme") {
        designChoicePrice = products.customTheme.price
    }
});

systemsChosen.change(function() {
    systemsChosenPrice = 0;
    var dataID =...