www.webdeveloper.com
Results 1 to 3 of 3

Thread: [RESOLVED] Changing Drop Down Menu help

  1. #1
    Join Date
    Feb 2014
    Posts
    3

    resolved [RESOLVED] Changing Drop Down Menu help

    Okay, my first post here.

    This is my problem, I'm creating a short drop down menu to allow the user to select an artist, venue, date, price of ticket and number of tickets. Customers buying four or more tickets will pay an additional £10 fee (max 6 tickets). Any time I fill in the form and go to select ticket amount which should appear 1-6 appears 1-6 and 1-6 again.
    here is a link to show you the problem http://imgur.com/pgPryK3

    Below are the booking details

    Madonna London / 17th, 18th July £30, £45, £70

    Rod Stewart / Manchester 18th, 20th July £35, £50, £60 / Glasgow 22nd, 23rd July £35, £50, £60

    Guns and Roses London 10th July £88

    Oasis / London 23rd, 24th July £45, £60 / Glasgow 21st July £45, £60 / Nottingham 18th, 19th July £25, £45, £60

    Beyoncé / Glasgow 8th, 9th June £30, £40 / Manchester 11th, 12th June £30, £40 / Birmingham 14th, 15th June £35, £45 / London 17th, 18th, 19th June £30, £45, £60


    Below is my HTML


    <!doctype html>
    <html lang="en">
    <head>
    <title> Bookings </title>
    <meta charset="UTF-8">

    <style type="text/css">
    .DDlist { display:inline; }
    </style>

    <script type="text/javascript" src="jrmaker.js"></script>
    </head>
    <body>

    <form action="" onsubmit="return false"><div align="center">

    <select name='List1' id="List1" onchange="fillSelect(this.value,this.form['List2'])"><option>Select and Artist</option></select> <br/><br/>

    <select name='List2' id="List2" onchange="fillSelect(this.value,this.form['List3'])" class="DDlist"><option>Select a Venue</option> </select> <br/><br/>

    <select name='List3' id="List3" onchange="fillSelect(this.value,this.form['List4'])" class="DDlist"><option>Select a Date</option></select><br/><br/>

    <select name='List4' id="List4" onchange="fillSelect('ticketList',this.form['List5'])" class="DDlist"><option>Select a Ticket Price</option></select><br/><br/>

    <select name='List5' id="List5" class="DDlist"><option>Select Ticket Amount</option></select><br/><br/>

    <button onclick="getValues()">Show selections</button>
    <pre id="total"></pre>
    </div>
    </form>
    </body>
    </html>


    Here is my Javascript


    // JavaScript Document

    var categories = [];
    categories["startList"] = ['mMadonna','sRod Stewart','rGuns And Roses','oOasis','bBeyonce'];

    categories["mMadonna"] = ["mLondon"];
    categories["mLondon"] = ["m17th July", "m18th July"];
    categories['m17th July'] = ["m30", "m45", "m70"];
    categories['m18th July'] = ["m30", "m45", "m70"];

    categories["sRod Stewart"] = ["sManchester", "sGlasgow"];
    categories["sManchester"] = ["s18th July","s20th July"];
    categories["sGlasgow"] = ["s22nd July","s23rd July"];
    categories['s18th July'] = ["s35", "s50", "s60"];
    categories['s20th July'] = ["s35", "s50", "s60"];
    categories['s22nd July'] = ["s35", "s50", "s60"];
    categories['s23rd July'] = ["s35", "s50", "s60"];

    categories["rGuns And Roses"] = ["rLondon"];
    categories["rLondon"] = ["r10th July"];
    categories['r10th July'] = ["r88"];

    categories['oOasis'] = ["oLondon", "oGlasgow", "oNottingham"];
    categories['oLondon'] = ["o23rd July", "o24th July"];
    categories['oGlasgow'] = ["o21st July"];
    categories['oNottingham'] = ["o18th July", "o19th July"];
    categories['o21st July'] = ["o45", "o60"];
    categories['o23rd July'] = ["o45", "o60"];
    categories['o24th July'] = ["o45", "o60"];
    categories['o17th July'] = ["o25", "o45", "o60"];
    categories['o18th July'] = ["o25", "o45", "o60"];
    categories['o19th July'] = ["o25", "o45", "o60"];


    categories['bBeyonce'] = ["bGlasgow", "bManchester", "bBirmingham", "bLondon"];
    categories['bGlasgow'] = ["b8th June", "b9th June"];
    categories['bManchester'] = ["b11th June", "b12th June"];
    categories['bBirmingham'] = ["b14th june", "b15th June"];
    categories['bLondon'] = ["b17th June", "b18th June", "b19th June"];
    categories['b8th June'] = ["b30", "b40"];
    categories['b9th June'] = ["b30", "b40"];
    categories['b11th June'] = ["b30", "b40"];
    categories['b12th June'] = ["b30", "b40"];
    categories['b14th June'] = ["b35", "b45"];
    categories['b15th June'] = ["b35", "b45"];
    categories['b17th June'] = ["b30", "b45", "b60"];
    categories['b18th June'] = ["b30", "b45", "b60"];
    categories['b19th June'] = ["b30", "b45", "b60"];

    categories['ticketList'] = ["t1", "t2", "t3", "t4", "t5", "t6"];

    var nLists = 4;

    function fillSelect(currCat,currList){
    var step = Number(currList.name.replace(/\D/g,""));
    for (i=step; i<nLists+1; i++) {
    document.forms[0]['List'+i].length = 1;
    document.forms[0]['List'+i].selectedIndex = 0;
    document.getElementById('List'+i).style.display = 'inline';
    }
    var nCat = categories[currCat];
    if (nCat != undefined) {
    document.getElementById('List'+step).style.display = 'inline';
    for (each in nCat) {
    var nOption = document.createElement('option');
    var nData = document.createTextNode(nCat[each].substring(1));
    nOption.setAttribute('value',nCat[each]);
    nOption.appendChild(nData);
    currList.appendChild(nOption);
    }
    }
    }

    function getValues() {
    var tarr = [];
    tarr.push(document.getElementById('List1').value.substring(1));
    for (var i=2; i<=nLists+1; i++) {
    if (document.getElementById('List'+i).selectedIndex != 0) {
    tarr.push(document.getElementById('List'+i).value.substring(1)); }
    }
    var cost = Number(document.getElementById('List4').value.substring(1));
    var ticket = Number(document.getElementById('List5').value.substring(1));
    var total = cost * ticket;
    if (ticket >= 4) { total += 10; }
    var str = 'Total: £'+total.toFixed(2);
    tarr.push(str);
    document.getElementById('total').innerHTML = tarr.join();
    }

    function init() { fillSelect('startList',document.forms[0]['List1']); }

    navigator.appName == "Microsoft Internet Explorer"
    ? attachEvent('onload', init, false)
    : addEventListener('load', init, false);


    Any help would be greatly appreciated

  2. #2
    Join Date
    Feb 2014
    Posts
    3

    Update.

    I've just noticed that every single time I go to select/redo it, it adds another 1-6, and if I try to select another artist (without refreshing), it adds another 1-6.

  3. #3
    Join Date
    Dec 2005
    Location
    FL
    Posts
    7,364

    Question

    Is this some sort of homework assignment?
    Question has been asked and answered on:
    http://www.webdeveloper.com/forum/sh...t=#post1312435

    Looks an awful lot like the code I provided with some errors induced.
    If you want to claim it as your own code, at least understand it.
    Better yet, give credit for the source and then ask questions about modifying it

    Unless this is the same OP using a different identification???

    What's going on here???
    Last edited by JMRKER; 02-11-2014 at 10:53 PM.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles