Drop down menu calculation

Question

How to calculate the total of the value of two drop down menus that has been selected by the user. I have no pre determined values in HTML. Here is my code, i want to multiply the number of tickets by the price selected and show it to the user. thanks.

HTML

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

    <option>Select Price</option>
</select>
<br>
<br>
<select name="tickets" id="tickets" style="width:120px">
    <option>Select Tickets</option>
</select>

   <br>
   <br>
<input name="button" type="button" value="Submit" onClick="return validate2()"/>   
<input name="reset" type="reset" value="Reset" />
</form>

JavaScript

switch (artist.selectedIndex)
{
    case 0:
        var venueList   = ["Select Venue"];
        var dateList    = ["Select Date"];
        var ticketList  = ["Select Tickets"];
        var priceList   = ["Select Price"];
        fillList(venue, venueList);
        fillList(date, dateList);
        fillList(ticket, ticketList);
        fillList(price, priceList);
        break;

    case 1:

        var venueList   = ["Select Venue", "London"];
        var dateList    = ["Select Date", "17th July", "18th July"];
        var ticketList  = ["Select Tickets", "1", "2", "3", "4", "5", "6"];
        var priceList   = ["Select Price", "£30", "£45", "£70"];
        fillList(venue, venueList);
        fillList(date, dateList);
        fillList(ticket, ticketList);
        fillList(price, priceList);
        break;

    case 2:

        var venueList   = ["Select Venue", "Manchester", "Glasgow"];
        var dateList    = ["Select Date"]
        var ticketList  = ["Select Tickets", "1", "2", "3", "4", "5", "6"];
        var priceList   = ["Select Price", "£35", "£50", "£60"];
        fillList(venue, venueList);
        fillList(date, dateList);
        fillList(ticket, ticketList);
        fillList(price, priceList);

        // adding onchange event on venue when the user selects rod stewart
        venue.onchange = function ()
        {
            var dateList;
            switch(venue.selectedIndex)
            {
                case 0: dateList = ["Select Date"]; break;
                case 1: dateList = ["Select Date", "18th July", "20th July"]; break;
                case 2: dateList = ["Select Date", "22nd July", "23rd July"]; break;
            }
            fillList(date, dateList);
        }


        break;

PeteAUK · Answer 1 · 2014-02-10T10:31:30.420

0

First off I'm taking the assumption that venue, date, ticket and price are references to the select elements.

However with your current code I'd suggest something like this -

function validate2() {
    var truePrice = parseFloat(String.replace(price.options[price.selectedIndex].value, '£', '')),
        noOfTickets = parseInt(ticket.options[ticket.selectedIndex].value);

    return truePrice * noOfTickets;        
}

http://fiddle.jshell.net/J4Ryy/3/ Here is a working fiddle based on my answer :)

edited Feb 10 '14 at 10:31

answered Feb 07 '14 at 11:15

PeteAUK

968
6
16

doesnt seem to work. I have put this code into my JavaScript: function totalPrice() { var truePrice = parseFloat(String.replace(price.value, '£', '')), noOfTickets = parseInt(ticket.value); return document.getElementById(mytotal).innerHTML = truePrice * noOfTickets; } and have a div tag in my HTML to output it to user – Danni_B Feb 07 '14 at 11:28
Looks like you missed the edit I did. I'd forgotten you were working with select boxes but realised after I'd posted. Have a look at the edited code ;) – PeteAUK Feb 07 '14 at 12:08
i get the error code: Uncaught TypeError: Object function String() { [native code] } has no method 'replace' – Danni_B Feb 07 '14 at 12:36
Try: price.options[price.selectedIndex].value.replace('£','') instead of: String.replace(price.options[price.selectedIndex].value, '£', '') I'd forgotten I had a framework in place :) – PeteAUK Feb 07 '14 at 14:13
i changed price.options[price.selectedIndex].value.replace('£','') to price.options[price.selectedIndex].value.replace,'£',''). now have no errors but doesnt work. @PeteAUK – Danni_B Feb 07 '14 at 14:55
I've created this as a Fiddle for you to play with. I've had to "recreate" your code as best I could guess, but in principal it works. Also I've had to declare validate2 as a global variable - you'd be better off attaching it with an event listener. http://fiddle.jshell.net/J4Ryy/3/ – PeteAUK Feb 07 '14 at 17:28

score 0 · Answer 2 · edited May 23 '17 at 12:15

0

You have to get the value of the two dropdowns in to variables. The value of your dropdowns or other hthml tags is a string.

You have to convert the string into a number. How you can do this you can read here: How do I convert a String into an integer

After that you can do normal operations like

var c = var a + var b

Greethings

edited May 23 '17 at 12:15

Community

1
1

answered Feb 07 '14 at 11:16

Joofe Kopp

123
2
13

score 0 · Answer 3 · answered Feb 07 '14 at 11:22

Using jQuery:

<script src="https://code.jquery.com/jquery.js"></script>
<script>
    $('select').on('change', function (e) {
        var tickets = $('#tickets').val();
        var price = $('#price').val().substring(1);
        alert(tickets * price);
    });
</script>

Explanation: everytime the select box changes we calculate the total price by getting the values of the select boxes. The .substring(1) removes the pound symbol by taking a substring from position 1 to the end.

You can change the alert to do something else, like put it in a box:

$('#resultBox').html(tickets * price);

Drop down menu calculation

3 Answers3