www.webdeveloper.com
Results 1 to 9 of 9

Thread: Drop down Boxes and Calculation of Two boxes

  1. #1
    Join Date
    Feb 2014
    Posts
    4

    Drop down Boxes and Calculation of Two boxes

    Hi

    i have currently got 5 drop down boxes which populate one another but at the moment i can not get (Oasis to show relevant dates and prices together as well as beyonce dates and prices)

    here is my html

    <!doctype html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>booking form</title>
    <script type="text/javascript" src="music-form.js">
    </script>
    </head>

    <body>
    <form method="get" name="myform" onsubmit="return Validate();">
    Booking Form
    <br/>
    <br/>
    Name: <input name="Name" size="30" maxlength="50" />
    <br/>
    <br/>
    Email: <input name="Email" size="30" maxlength="50" />
    <br/>
    <br/>
    Address: <input name="Address" size="30" maxlength="6" />
    <br/>
    <br/>
    Telephone NO: <br/> <input name="Telephone" size="30" maxlength="10" />
    <br/>
    <br/>
    Credit Card NO: <br/> <input name="Card" size="30" maxlength="10" />
    <br/>
    <h2>Select your tickets</h2>

    <select name="artist" id="artist" onChange="fillVenue()">
    <option>Select an Artist</option>
    <option value="madonna">Madonna</option>
    <option value="rodStewart">Rod Stewart</option>
    <option value="gunsAndRoses">Guns And Roses</option>
    <option value="oasis">Oasis</option>
    <option value="beyonce">Beyoncé</option>
    </select>

    <br><br>

    <select name="venue" id="venue" style="width:120px">
    <option>Select venue</option>
    </select>
    <br><br>
    <select name="date" id="date" style="width:120px">
    <option>Select Date</option>
    </select>
    <br><br>
    <select name="tickets" id="tickets" style="width:120px">
    <option>Select Tickets</option>
    </select>
    <br><br>
    <select name="price" id="price" style="width:120px">
    <option>Select Price</option>
    </select>
    <br/>
    </div>
    </form>

    and here is my javascript


    function Validate()
    {
    // Validating Name \\
    if (document.myform.Name.value == "" || null)
    {
    alert("Please enter your name!");
    document.myform.Name.focus();
    return false;
    }

    // Validating Email \\
    var email = document.myform.Email.value;
    var at = email.indexOf("@"); // @ sign required for authentication of an Email address
    var dot = email.lastIndexOf("."); // . sign required for authentication of an Email address

    if (at<1 || dot<at+2 || dot+2>=email.length)
    {
    alert("Please enter a valid e-mail address!");
    document.myform.Email.focus();
    return false;
    }
    // Validating Address \\
    if (document.myform.Address.value == "" || null)
    {
    alert("Please enter your address!");
    document.myform.Address.focus();
    return false;
    }

    if (document.myform.Telephone.value == "" || null)
    {

    alert("Please enter your telephone number!");
    document.myform.Telephone.focus();
    return false;
    }

    if (document.myform.Card.value == "" || null)

    {
    alert("Please enter your Card details!");
    document.myform.Card.focus();
    return false;
    }

    }

    function fillVenue() {

    //retrieves index of selected artist and target element to be populated
    var artist = document.getElementById("artist");
    var venue = document.getElementById("venue");
    var date = document.getElementById("date");
    var ticket = document.getElementById("tickets");
    var price = document.getElementById("price");

    //clears dropdowns and price
    venue.options.length = 0;
    date.options.length = 0;
    ticket.options.length = 0;
    price.options.length = 0;

    // clearing the onchange event on venue
    venue.onchange = null;

    //switch statements fill target with artist array
    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:
    // madonna
    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:
    //Rod Stewart
    var venueList = ["Select Venue", "Manchester", "Glasgow"];
    var dateList = ["Select Date" ]
    var ticketList = ["Select Tickets", "1", "2", "3", "4", "5", "6"];
    var priceList = ["Select Price", "£30", "£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;

    case 3:
    //Guns and Roses
    var venueList = ["Select Venue", "London"];
    var dateList = ["Select Date", "10th July"];
    var ticketList = ["Select Tickets", "1", "2", "3", "4", "5", "6"];
    var priceList = ["Select Price", "£88"];
    fillList(venue, venueList);
    fillList(date, dateList);
    fillList(ticket, ticketList);
    fillList(price, priceList);
    break;

    case 4:
    // Oasis
    var venueList = ["Select Venue", "London", "Glasgow", "Nottingham"];
    var dateList = ["Select Date"]
    var ticketList = ["Select Tickets", "1", "2", "3", "4", "5", "6"];
    var priceList = ["Select Price"]
    fillList(venue, venueList);
    fillList(date, dateList);
    fillList(ticket, ticketList);
    fillList(price, priceList);

    // adding onchange event on venue when the user selects oasis
    venue.onchange = function () {
    var dateList;
    switch(venue.selectedIndex) {
    case 0: dateList = ["Select Date"]; break;
    case 1: dateList = ["Select Date", "23rd July", "24th July"]; break;
    case 2: dateList = ["Select Date", "21st July"]; break;
    case 3: dateList = ["select Date", "18th July", "19th July"];break;
    }
    fillList(date, dateList);
    }

    break;

    case 5:
    //Beyonce
    var venueList = ["Select Venue", "Glasgow", "Manchester", "Birmingham", "London"];
    var dateList = ["Select Date"];
    var ticketList = ["Select Tickets", "1", "2", "3", "4", "5", "6"];
    var priceList = ["Select Price"];
    fillList(venue, venueList);
    fillList(date, dateList);
    fillList(ticket, ticketList);
    fillList(price, priceList);

    // adding onchange event on venue when the user selects beyonce
    venue.onchange = function () {
    var dateList;
    switch(venue.selectedIndex) {
    case 0: dateList = ["Select Date"]; break;
    case 1: dateList = ["Select Date", "8th june", "9th June"]; break;
    case 2: dateList = ["Select Date", "11th June", "12th June"]; break;
    case 3: dateList = ["select Date", "14th june", "15th June"];break;
    case 4: dateList = ["select Date", "17th June", "18th June", "19th June"];break;
    }
    fillList(date, dateList);
    }

    break;
    }
    }

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


    Basically trying to get all this together

    Artist name Venue Dates available Ticket price


    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


    Also would appreciate if some could help me in making the tickets and prices multiply for each music artists prices( i.e. guns and roses number of tickets * by ticket price)

    thanks to all that help

  2. #2
    Join Date
    Feb 2014
    Location
    india
    Posts
    14
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html lang="en">
    <head>
    <title></title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">

    <script type="text/javascript">
    function populateList() {
    var teamArray = ["", "24th", "26th", "28th"];
    var arLen=teamArray.length;
    for(var i=1; i<arLen; i++){
    document.form1.test.options[i]=new Option(teamArray[i], i);
    }

    var teamArray2 = ["", "1", "2", "3"];
    var arLen2=teamArray2.length;
    for(var i=1; i<arLen2; i++){
    document.form1.test2.options[i]=new Option(teamArray2[i], i);
    }

    var teamArray3 = ["", "35", "40", "60"];
    var arLen3=teamArray3.length;
    for(var i=1; i<arLen3; i++){
    document.form1.test3.options[i]=new Option(teamArray3[i], i);
    }
    }
    </script>
    </head>
    <body>
    <form action="#" method="" name="form1">
    <div>
    <select name="team" onchange="populateList()">
    <option>Select show</option>
    <option>Oasis</option>
    <option>Glasgow</option>
    </select>
    <select name="test">
    <option>Dates</option>
    </select>
    <select id='test2' name="test2">
    <option>No. OF TICKETS</option>
    </select>
    <select id='test3' name="test3" >
    <option>rates</option>
    </select>
    <div>
    </form>
    </body>
    </html>

    do something like this to populate other drop down boxes..and to them get value by id of dropdown boxes and simple multiplication

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

    Lightbulb

    A different solution ...

    Code:
    <!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">
    // From: http://www.codingforums.com/showthread.php?t=202456
    // and: http://www.codingforums.com/showthread.php?t=169465
    // Modified for 1 to 4 (+) level drop down selections
    // Modified again for 5 levels
    
    var categories = [];
      categories["startList"] = ['mMadonna','sRod Stewart','rGuns And Roses','oOasis','bBeyonce'];  // Level 1
      
        categories["mMadonna"]   = ["mLondon"];                        // Level 1 (artist)
        categories["mLondon"]    = ["m17th July", "m18th July"];       // Level 2 (venue)
        categories['m17th July'] = ["m30", "m45", "m70"];              // Level 3 (date)
        categories['m18th July'] = categories['m17th July'].slice(0);
    
        categories["sRod Stewart"] = ["sManchester", "sGlasgow"];       // Level 1 (artist)
        categories["sManchester"]  = ["s18th July","s20th July"];       // Level 2 (venue)
        categories["sGlasgow"]     = ["s22nd July","s23rd July"];       // Level 2
        categories['s18th July']   = ["s30", "s50", "s60"];             // Level 3 (date)
        categories['s20th July']   = categories['s18th July'].slice(0);
        categories['s22nd July']   = categories['s18th July'].slice(0);
        categories['s23rd July']   = categories['s18th July'].slice(0);
      
        categories["rGuns And Roses"] = ["rLondon"];                    // Level 1 (artist)
        categories["rLondon"]    = ["r10th July"];                      // Level 2 (venue)
        categories['r10th July'] = ["r88"];                             // Level 3 (date)
    
        categories['oOasis']       = ["oLondon", "oGlasgow", "oNottingham"];  // Level 1 (artist)
        categories['oLondon']     = ["o23rd July", "o24th July"];             // Level 2 (venue)
        categories['oGlasgow']    = ["o21st July"];
        categories['oNottingham'] = ["o18th July", "o19th July"];
        categories['o23rd July'] = ["o50"];                                   // Level 3 (date)
        categories['o24th July'] = categories['o23rd July'].slice(0);
        categories['o21st July'] = categories['o23rd July'].slice(0);
        categories['o18th July'] = categories['o23rd July'].slice(0);
        categories['o19th July'] = categories['o23rd July'].slice(0);
    
        categories['bBeyonce']     = ["bGlasgow", "bManchester", "bBirmingham", "bLondon"];   // Level 1 (artist)
        categories['bGlasgow']    = ["b8th June",  "b9th June"];                              // Level 2 (venue)
        categories['bManchester'] = ["b11th June", "b12th June"];
        categories['bBirmingham'] = ["b14th june", "b15th June"];
        categories['bLondon']     = ["b17th June", "b18th June", "b19th June"];
        categories['b8th June'] = ["b75"];                                                    // Level 3 (date)
        categories['b9th June'] = categories['b8th June'].slice(0);
        categories['b11th June'] = categories['b8th June'].slice(0);
        categories['b12th June'] = categories['b8th June'].slice(0);
        categories['b14th June'] = categories['b8th June'].slice(0);
        categories['b15th June'] = categories['b8th June'].slice(0);
        categories['b17th June'] = categories['b8th June'].slice(0);
        categories['b18th June'] = categories['b8th June'].slice(0);
    
        categories['ticketList'] = ["t1", "t2", "t3", "t4", "t5", "t6"];
    
    var nLists = 4; // number of lists in the set ( NOTE: 5-1 for this example only)
    
    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)); }
      }
      tarr.push('Total: £'
          + Number(document.getElementById('List4').value.substring(1)) * Number(document.getElementById('List5').value.substring(1)));
      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);	
    
    </script>
    </head>
    <body>
    <form action="" onsubmit="return false">
    
    <select name='List1' id="List1" onchange="fillSelect(this.value,this.form['List2'])"> </select> Artist <p>
    
    <select name='List2' id="List2" onchange="fillSelect(this.value,this.form['List3'])" class="DDlist"> </select> Venue <p>
     
    <select name='List3' id="List3" onchange="fillSelect(this.value,this.form['List4'])" class="DDlist"> </select> Event Date <p>
    
    <select name='List4' id="List4" onchange="fillSelect('ticketList',this.form['List5'])" class="DDlist"> </select> £ Cost <p>
    
    <select name='List5' id="List5" class="DDlist"> </select> # of Tickets <p>
    
    <!-- can add more levels if desired as "List6"+ -->
    <button onclick="getValues()">Show selections</button>
    <pre id="total"></pre>
    </form>
    </body>
    </html>
    ... much easier to maintain in an external (JS) flat file, if necessary.

    BTW: You should enclose your problems between [ code] and [ /code] tags (without the spaces)
    to make it easier for forum members to read. Side benefit is that it retains the formatting.

  4. #4
    Join Date
    Feb 2014
    Posts
    4
    ok got it all working

    just one last thing

    i want to have a text box that a user types in a number from 1 to 6 then that multiply's the drop down box of the selected price then adds £10 charge if they book 4 or more tickets

    (i.e. madonna- £35 x 1-6 + £10 for 4 or more)

    here is my js code

    // JavaScript Document

    // first combo box

    data_1 = new Option("Madonna");
    data_2 = new Option("Rod Stewart");
    data_3 = new Option("Guns N Roses");
    data_4 = new Option("Oasis");
    data_5 = new Option("Beyonce");

    // second combo box

    data_1_1 = new Option("London");
    data_2_1 = new Option("Manchester");
    data_2_2 = new Option("Glasgow");
    data_3_1 = new Option("London");
    data_4_1 = new Option("London");
    data_4_2 = new Option("Glasgow");
    data_4_3 = new Option("Nottingham");
    data_5_1 = new Option("Glasgow");
    data_5_2 = new Option("Manchester");
    data_5_3 = new Option("Birmingham");
    data_5_4 = new Option("London");

    // third combo box

    data_1_1_1 = new Option("17th July");
    data_1_1_2 = new Option("18th July");
    data_1_1_3 = new Option("19th July");
    data_2_1_1 = new Option("18 July");
    data_2_1_2 = new Option("20th July");
    data_2_2_1 = new Option("22nd July");
    data_2_2_2 = new Option("23rd July");
    data_3_1_1 = new Option("10th July");
    data_4_1_1 = new Option("23rd July");
    data_4_1_2 = new Option("24th July");
    data_4_2_1 = new Option("21st July");
    data_4_3_1 = new Option("18th July");
    data_4_3_2 = new Option("19th July");
    data_5_1_1 = new Option("8th June");
    data_5_1_2 = new Option("9th June");
    data_5_2_1 = new Option("11th June");
    data_5_2_2 = new Option("12th June");
    data_5_3_1 = new Option("14th June");
    data_5_3_2 = new Option("15th June");
    data_5_4_1 = new Option("17th June");
    data_5_4_2 = new Option("18th June");
    data_5_4_3 = new Option("19th June");

    // fourth combo box

    data_1_1_1_1 = new Option("£30");
    data_1_1_1_2 = new Option("£45");
    data_1_1_1_3 = new Option("£70");
    data_1_1_2_1 = new Option("£30");
    data_1_1_2_2 = new Option("£45");
    data_1_1_2_3 = new Option("£70");
    data_1_1_3_1 = new Option("£30");
    data_1_1_3_2 = new Option("£45");
    data_1_1_3_3 = new Option("£70");
    data_2_1_1_1 = new Option("£35");
    data_2_1_1_2 = new Option("£50");
    data_2_1_1_3 = new Option("£60");
    data_2_1_2_1 = new Option("£35");
    data_2_1_2_2 = new Option("£50");
    data_2_1_2_3 = new Option("£60");
    data_2_2_1_1 = new Option("£35");
    data_2_2_1_2 = new Option("£50");
    data_2_2_1_3 = new Option("£60");
    data_2_2_2_1 = new Option("£35");
    data_2_2_2_2 = new Option("£50");
    data_2_2_2_3 = new Option("£60");
    data_3_1_1_1 = new Option("£88");
    data_4_1_1_1 = new Option("£45");
    data_4_1_1_2 = new Option("£60");
    data_4_1_2_1 = new Option("£45");
    data_4_1_2_2 = new Option("£60");
    data_4_2_1_1 = new Option("£45");
    data_4_2_1_2 = new Option("£60");
    data_4_3_1_1 = new Option("£25");
    data_4_3_1_2 = new Option("£45");
    data_4_3_1_3 = new Option("£60");
    data_4_3_2_1 = new Option("£25");
    data_4_3_2_2 = new Option("£45");
    data_4_3_2_3 = new Option("£60");
    data_5_1_1_1 = new Option("£30");
    data_5_1_1_2 = new Option("£40");
    data_5_1_2_1 = new Option("£30");
    data_5_1_2_2 = new Option("£40");
    data_5_2_1_1 = new Option("£30");
    data_5_2_1_2 = new Option("£40");
    data_5_2_2_1 = new Option("£30");
    data_5_2_2_2 = new Option("£40");
    data_5_3_1_1 = new Option("£35");
    data_5_3_1_3 = new Option("£45");
    data_5_3_2_1 = new Option("£35");
    data_5_3_2_2 = new Option("£45");
    data_5_4_1_1 = new Option("£35");
    data_5_4_1_2 = new Option("£45");
    data_5_4_1_3 = new Option("£60");
    data_5_4_2_1 = new Option("£35");
    data_5_4_2_2 = new Option("£45");
    data_5_4_2_3 = new Option("£60");
    data_5_4_3_1 = new Option("£35");
    data_5_4_3_2 = new Option("£45");
    data_5_4_3_3 = new Option("£60");



    // other parameters

    displaywhenempty=""
    valuewhenempty=-1

    displaywhennotempty="-select-"
    valuewhennotempty=0


    function change(currentbox) {
    numb = currentbox.id.split("_");
    currentbox = numb[1];

    i=parseInt(currentbox)+1

    // This will empty all combo boxes following the current one

    while ((eval("typeof(document.getElementById(\"combo_"+i+"\"))!='undefined'")) &&
    (document.getElementById("combo_"+i)!=null)) {
    son = document.getElementById("combo_"+i);
    // I empty all options except the first one (it isn't allowed)
    for (m=son.options.length-1;m>0;m--) son.options[m]=null;
    // I reset the first option
    son.options[0]=new Option(displaywhenempty,valuewhenempty)
    i=i+1
    }


    // now I create the string with the "base" name ("stringa"), ie. "data_1_0"
    // to which I'll add _0,_1,_2,_3 etc to obtain the name of the combo box to fill

    stringa='data'
    i=0
    while ((eval("typeof(document.getElementById(\"combo_"+i+"\"))!='undefined'")) &&
    (document.getElementById("combo_"+i)!=null)) {
    eval("stringa=stringa+'_'+document.getElementById(\"combo_"+i+"\").selectedIndex")
    if (i==currentbox) break;
    i=i+1
    }


    // filling the "son" combo (if exists)

    following=parseInt(currentbox)+1

    if ((eval("typeof(document.getElementById(\"combo_"+following+"\"))!='undefined'")) &&
    (document.getElementById("combo_"+following)!=null)) {
    son = document.getElementById("combo_"+following);
    stringa=stringa+"_"
    i=0
    while ((eval("typeof("+stringa+i+")!='undefined'")) || (i==0)) {

    // if there are no options, I empty the first option of the "son" combo
    // otherwise I put "-select-" in it

    if ((i==0) && eval("typeof("+stringa+"0)=='undefined'"))
    if (eval("typeof("+stringa+"1)=='undefined'"))
    eval("son.options[0]=new Option(displaywhenempty,valuewhenempty)")
    else
    eval("son.options[0]=new Option(displaywhennotempty,valuewhennotempty)")
    else
    eval("son.options["+i+"]=new Option("+stringa+i+".text,"+stringa+i+".value)")
    i=i+1
    }
    //son.focus()
    i=1
    combostatus=''
    cstatus=stringa.split("_")
    while (cstatus[i]!=null) {
    combostatus=combostatus+cstatus[i]
    i=i+1
    }
    return combostatus;
    }
    }

  5. #5
    Join Date
    Feb 2014
    Posts
    4
    and here is my HTML code

    <!doctype html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>Untitled Document</title>
    <script type="text/javascript" src="test.js">
    </script>
    </head>

    <body>
    <form>
    <select name="combo0" id="combo_0" onChange="change(this);" style="width:200px;">
    <option value="value0">-select-</option>
    <option value="value1">Madonna</option>
    <option value="value2">Rod Stewart</option>
    <option value="value3">Guns N Roses</option>
    <option value="value4">Oasis</option>
    <option value="value5">Beyonce</option>


    </select>
    <BR><BR>
    <select name="combo1" id="combo_1" onChange="change(this)" style="width:200px;">
    <option value="value1"> </option>
    </select>
    <BR><BR>
    <select name="combo2" id="combo_2" onChange="change(this);" style="width:200px;">
    <option value="value1"> </option>
    </select>
    <BR><BR>
    <select name="combo3" id="combo_3" onChange="change(this);" style="width:200px;">
    <option value="value1"> </option>

    </select>
    <br><br>
    <select name="combo4" id="combo_4" onChange="change(this);" style="width:200px;">
    <option value="value1"> </option>
    </select>
    </form>


    </body>
    </html>

  6. #6
    Join Date
    Feb 2014
    Posts
    4
    Quote Originally Posted by JMRKER View Post
    A different solution ...

    Code:
    <!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">
    // From: http://www.codingforums.com/showthread.php?t=202456
    // and: http://www.codingforums.com/showthread.php?t=169465
    // Modified for 1 to 4 (+) level drop down selections
    // Modified again for 5 levels
    
    var categories = [];
      categories["startList"] = ['mMadonna','sRod Stewart','rGuns And Roses','oOasis','bBeyonce'];  // Level 1
      
        categories["mMadonna"]   = ["mLondon"];                        // Level 1 (artist)
        categories["mLondon"]    = ["m17th July", "m18th July"];       // Level 2 (venue)
        categories['m17th July'] = ["m30", "m45", "m70"];              // Level 3 (date)
        categories['m18th July'] = categories['m17th July'].slice(0);
    
        categories["sRod Stewart"] = ["sManchester", "sGlasgow"];       // Level 1 (artist)
        categories["sManchester"]  = ["s18th July","s20th July"];       // Level 2 (venue)
        categories["sGlasgow"]     = ["s22nd July","s23rd July"];       // Level 2
        categories['s18th July']   = ["s30", "s50", "s60"];             // Level 3 (date)
        categories['s20th July']   = categories['s18th July'].slice(0);
        categories['s22nd July']   = categories['s18th July'].slice(0);
        categories['s23rd July']   = categories['s18th July'].slice(0);
      
        categories["rGuns And Roses"] = ["rLondon"];                    // Level 1 (artist)
        categories["rLondon"]    = ["r10th July"];                      // Level 2 (venue)
        categories['r10th July'] = ["r88"];                             // Level 3 (date)
    
        categories['oOasis']       = ["oLondon", "oGlasgow", "oNottingham"];  // Level 1 (artist)
        categories['oLondon']     = ["o23rd July", "o24th July"];             // Level 2 (venue)
        categories['oGlasgow']    = ["o21st July"];
        categories['oNottingham'] = ["o18th July", "o19th July"];
        categories['o23rd July'] = ["o50"];                                   // Level 3 (date)
        categories['o24th July'] = categories['o23rd July'].slice(0);
        categories['o21st July'] = categories['o23rd July'].slice(0);
        categories['o18th July'] = categories['o23rd July'].slice(0);
        categories['o19th July'] = categories['o23rd July'].slice(0);
    
        categories['bBeyonce']     = ["bGlasgow", "bManchester", "bBirmingham", "bLondon"];   // Level 1 (artist)
        categories['bGlasgow']    = ["b8th June",  "b9th June"];                              // Level 2 (venue)
        categories['bManchester'] = ["b11th June", "b12th June"];
        categories['bBirmingham'] = ["b14th june", "b15th June"];
        categories['bLondon']     = ["b17th June", "b18th June", "b19th June"];
        categories['b8th June'] = ["b75"];                                                    // Level 3 (date)
        categories['b9th June'] = categories['b8th June'].slice(0);
        categories['b11th June'] = categories['b8th June'].slice(0);
        categories['b12th June'] = categories['b8th June'].slice(0);
        categories['b14th June'] = categories['b8th June'].slice(0);
        categories['b15th June'] = categories['b8th June'].slice(0);
        categories['b17th June'] = categories['b8th June'].slice(0);
        categories['b18th June'] = categories['b8th June'].slice(0);
    
        categories['ticketList'] = ["t1", "t2", "t3", "t4", "t5", "t6"];
    
    var nLists = 4; // number of lists in the set ( NOTE: 5-1 for this example only)
    
    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)); }
      }
      tarr.push('Total: £'
          + Number(document.getElementById('List4').value.substring(1)) * Number(document.getElementById('List5').value.substring(1)));
      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);	
    
    </script>
    </head>
    <body>
    <form action="" onsubmit="return false">
    
    <select name='List1' id="List1" onchange="fillSelect(this.value,this.form['List2'])"> </select> Artist <p>
    
    <select name='List2' id="List2" onchange="fillSelect(this.value,this.form['List3'])" class="DDlist"> </select> Venue <p>
     
    <select name='List3' id="List3" onchange="fillSelect(this.value,this.form['List4'])" class="DDlist"> </select> Event Date <p>
    
    <select name='List4' id="List4" onchange="fillSelect('ticketList',this.form['List5'])" class="DDlist"> </select> £ Cost <p>
    
    <select name='List5' id="List5" class="DDlist"> </select> # of Tickets <p>
    
    <!-- can add more levels if desired as "List6"+ -->
    <button onclick="getValues()">Show selections</button>
    <pre id="total"></pre>
    </form>
    </body>
    </html>
    ... much easier to maintain in an external (JS) flat file, if necessary.

    BTW: You should enclose your problems between [ code] and [ /code] tags (without the spaces)
    to make it easier for forum members to read. Side benefit is that it retains the formatting.

    hey thanks JMRKER have done it your way, just one last question see for total how would i include a extra £10 on the total if some books 4 tickets or more?

    really appreciated the help here

  7. #7
    Join Date
    Dec 2005
    Location
    FL
    Posts
    7,373

    Arrow

    Quote Originally Posted by RobertMM View Post
    hey thanks JMRKER have done it your way, just one last question see for total how would i include a extra £10 on the total if some books 4 tickets or more?

    really appreciated the help here
    You should really try to make an attempt at coding it yourself. Otherwise sometimes you will be waiting a bit for the answer.
    The forum members usually prefer to decipher and comment on your attempts rather than write it for you.

    That being said, change only this function...
    Code:
    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(); 
    }
    ... and remember to post your code with the appropriate [ code] tags.

  8. #8
    Join Date
    Feb 2014
    Location
    india
    Posts
    14
    nicely done jmrker

  9. #9
    Join Date
    Dec 2005
    Location
    FL
    Posts
    7,373
    Quote Originally Posted by pradzz7 View Post
    nicely done jmrker
    Thank you.

Thread Information

Users Browsing this Thread

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

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