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