Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

JavaScript

Posted by Kristian Woods
Kristian Woods
23,414 Points

How do you calculate the values from select drop down forms?

I'm trying to design a script that has a dynamic select dropdown menu, which takes a ticket price, then multiplies that by the number of tickets the user wants. However, I cant get the total price to display to the user

Any help would be great

Thanks

<!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8">

    <link rel="stylesheet" type="text/css" href="css/normalize.css">
    <link rel="stylesheet" type="text/css" href="css/main.css">
    <style>
    .mySlides {display:none;}
    </style>

<div class="content section" style="max-width:500px">
  <img class="mySlides" src="images/madonna.jpg" style="width:100%">
  <img class="mySlides" src="images/stereo.jpg" style="width:100%">
  <img class="mySlides" src="images/calvin.jpg" style="width:100%">
    <img class="mySlides" src="images/oasis.jpg" style="width:100%">
</div>



    <title>Page Title</title>

</head>

<body>

<form>
    <fieldset>

          <legend><span class="number">1</span> Your basic info</legend>

            <label for="name">Name:</label>  
            <input type="text" id="name" name="user_name">

            <label for="mail">Email:</label>
            <input type="email" id="mail" name="user_email">

            <label for="address">Address:</label>
            <input type="text" id="address" name="user_address">

            <label for="telephone">Telephone:</label>
            <input type="text" id="telephone" name="user_telephone">

            <label for="card number">Card Number:</label>
            <input type="text" id="card_number" name="user_card_number">

          </fieldset>

<fieldset>


    <legend><span class="number">2</span>Buy Tickets</legend>

    <select name="brand" id="artist" onchange="tickets()">
        <label>Artists</label>
        <option value="selectArtist">Select Artist</option>
        <option value="selectMadonna">Madonna</option>
        <option value="selectStereophonics">Stereophonics</option>
        <option value="selectCalvin">Calvin Harris</option>
        <option value="selectOasis">Oasis</option>

    </select>

    <br />
    <br />

    <select name="dates" id="dates" style="width: 120px"></select>

    <br />
    <br />

    <select name="ticketPrice" id="ticketPrice" style="width: 150px">

    </select>

    <br />
    <br />

    <select name="ticketNumber" id="ticketNumber" style="width: 170px">
        <option value="ticketNumber">Select number of tickets...</option>
        <option value="1">1</option>
        <option value="2">2</option>
        <option value="3">3</option>
        <option value="4">4</option>
        <option value="5">5</option>
        <option value="6">6</option>
    </select>

    </fieldset>

    <div id="price-display">
        <h3>Total Price:</h3>
    </div>

    <button id="buy" type="submit" onclick="return purchaseFinished();">Buy Tickets</button>
    <a href="index.html">Back to Sign In</a>

</form>






    <script src="script.js"></script>
    <script src="slider.js"></script>


</body>

</html>

function tickets() { // populates the dropdown with specified array
    dates.options.length = 0;

    var e = document.getElementById("dates");
    var p = document.getElementById("ticketPrice");
    var ticketNumber = document.getElementById("ticketNumber");
    var fee = 10;
    var grandTotal;
    var artist = document.getElementById("artist").selectedIndex


    switch (artist) {
    case 1:
        var arr = new Array("Select Date...", "17th July 2016", "18th July 2016");
        var pArr = new Array("Select Price...", "£30", "£45");
        fillList(arr, e);
        fillList(pArr, p);
        break;

    case 2:
        var arr = new Array("Select Date...", "18th July 2016", "20th July 2016");
        var pArr = new Array("Select Price...", "£35", "£50");
        fillList(arr, e);
        fillList(pArr, p);
        break;

    case 3:
        var arr = new Array("Select Date...", "10th July 2016");
        var pArr = new Array("Select Price...", "£88");
        fillList(arr, e);
        fillList(pArr, p);
        break;

    case 4:
        var arr = new Array("Select Date...", "23rd July 2016", "24th July 2016");
        var pArr = new Array("Select Price...", "£45", "£60");
        fillList(arr, e);
        fillList(pArr, p);
        break;
    }

}

function fillList(arr, e) {
    e.options.length = 0;
    for (var i = 0; i < arr.length; i++) {
        option = new Option(arr[i], arr[i]);
        e.options[i] = option;
    }
}




function purchaseFinished() { // makes sure user enters a value

    var e = document.getElementById("dates");
    var p = document.getElementById("ticketPrice");


    if (document.getElementById("name").value == "") {
        alert("Please Enter Name");
        return false;
    }  else if (document.getElementById("mail").value == "") {
        alert("Please Enter E-mail");
        return false;
    } else if (document.getElementById("address").value == "") {
        alert("Please Enter Address");
        return false;
    } else if (document.getElementById("telephone").value == "") {
        alert("Please Enter Phone Number");
        return false;
    } else if (document.getElementById("card_number").value == "") {
        alert("Please Enter Card Details");
        return false;
    }  else if (dates.length == 0) {
        alert("Choose an Artist");
        return false;
    } else if (e.length == 0) {
        alert("Choose a price");
        return false;
    } else {
        clear();
        return true;
    }

}

function clear() {
    var signUpName = document.getElementById("name").value;
    alert("Thank you for your purchase, " + signUpName);
}

function calculate() { // calculates the total price 

    var p = document.getElementById("ticketPrice").value;
    var ticketNumber = document.getElementById("ticketNumber").value;
    var fee = 10;
    var grandTotal;
    var total = p * ticketNumber;


        if (ticketNumber < 4) {
            var grandTotal = total;
            alert(grandTotal);
        } else if (ticketNumber > 4) {
            var grandTotal = (total + fee);
            alert(grandTotal);
        } 

}

calculate();

1 Answer

Steven Parker
Steven Parker
243,318 Points
Steven Parker
Steven Parker
243,318 Points

:point_right: There's a few separate issues here:

  • You don't need to call "calculate" at the end of your script, the values it needs have not been input yet.
  • You will want to call it when user selects a price or quantity.
  • You can add an "onchange" attribute to those selects like the one that calls "tickets" when the artist is selected.
  • Calculate should return if either price or quantity have not been selected.
  • You may want to load the price options with separate text and values (the currency sign makes it "NaN")
  • You may want to add a form element after "Total Price:" that you can update instead of using alert.

These are all pretty small issues in themselves (most one-liners). Happy coding! :sparkles:

Kristian Woods
Kristian Woods
23,414 Points

Mate, you've pulled me out the fire quite a few times now. Thank you so much