Hi guys,
I am having a little problem that I'd like some assistance with! I'm making a simple booking program (doing a test run on artists and concert tickets first).
I have all the things but in my last page (thank you page) I want to put a transaction detail summarizing what has been purchased ie. the ticket, quantity and total price.
my thank you page isn't much at the moment as I have no idea how to go about it:
Code:
<html>
<head>
<center>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<h1>Thank You!</h1>
<h3>Your tickets have been booked. </br></h3>
</head>
<body>
<br>
<br>
<img id="Beyonce" src ="beyonce2.jpg" width="200" height="200" >
<img id="Madonna" src ="madonna2.jpg" width="200" height="200" >
<img id="Rod Stewart" src ="rod stewart2.jpg" width="200" height="200" >
<img id="Oasis" src ="oasis2.jpg" width="200" height="200" >
<img id="Guns N' Roses" src ="guns n roses2.jpg" width="200" height="200" >
<br><br><br>
<h3><a href="2.html" style="text-decoration: none"> Purchase more tickets! Limited time!
<br></a></h3>
</center>
</body>
</html>
One of the pages I have (for the artists) is:
Code:
<html>
<head>
<a href="2.html" style="text-decoration: none"> Purchase different tickets
<br><<</a>
<center>
<br>
<br>
<br>
<h1><FONT COLOR="000000">Guns N' Roses</FONT></h1>
</head>
<body>
<br /><br /><br /><br /><br />
<form name="tickets">
<select id="sel_1"><option value="">Select Ticket (s)</option></select>
<select id="sel_2"><option value="">Select Number of Ticket (s)</option></select>
<input type="button" value="Calculate Price" onclick="calcTic(this.form)" />
<br /><br /><b>Total price(£):</b> <input name="total"type="text" />
<br /><br />(Additional £10 fee for 4+ tickets)
</form>
<br /><br /><br />
<!--form to enter details-->
<h2>Please Enter Your Details Below.</h2>
<form name="form1">
<b>Name:</b> <br /><input type="text" name="Name" value="" size="30" maxlength="50" /> <br><br>
<b>Address:</b><br>
<input type="text" name="Address1" value="Line 1" size="30" maxlength="50" />
<br><input type="text" name="Address2" value="Line 2" size="30" maxlength="50" />
<br><input type="text" name="Address3" value="Town/City" size="30" maxlength="50" />
<br><input type="text" name="Address4" value="Postcode" size="30" maxlength="50" />
<br><br><b>Telephone:</b> <br /><input type="text" name="Phone" value="" size="30" maxlength="11" /> <br><br>
<b>Email:</b><br><input type="text" name="Email" value="" size="30" maxlength="50" /><br><br>
<b>Card Number:</b><br><input type="text" name="Card" value="" size="30" maxlength="16" />
</form>
<br><br>
<input type="submit" value="Buy Tickets" onclick="validate();" />
<br /><br />
</center>
<script type = "text/javascript">
var tickets=[
[" "],
["London, 10th July",88]
],
sel_1=document.getElementById("sel_1"),
sel_2=document.getElementById("sel_2");
for(var i=1;i<tickets.length;i++){sel_1.options[i]=new Option(tickets[i][0]+' - '+tickets[i][1],tickets[i][1]);}
for(var i=1;i<7;i++){sel_2.options[i]=new Option(i,i);}
function calcTic(frm){
if(frm.sel_1.value==""){alert("Please choose dates.");frm.sel_1.focus();return;}
if(frm.sel_2.value==""){alert("Please choose number of tickets.");frm.sel_2.focus();return;}
else{
var val_1=new Number(frm.sel_1.value),val_2=new Number(frm.sel_2.value),extra=val_2>3?10:0;
frm.total.value=val_1*val_2+extra;
}
}
function validate()
{
var x=document.forms["form1"]["Name"].value; //validate the name field
if (x==null || x=="")
{
alert("Please fill in your Name."); //show message if empty
return false;
}
else if (document.form1.Name.value.length < 3 || null) //if name is under 3 characters, show alert
{
alert("Please enter your name correctly!");
document.form1.Name.focus();
return false;
}
var x=document.forms["form1"]["Address1"].value; //validate the first line of address field
if (x==null || x=="")
{
alert("Please fill in your first line of address."); //show message if empty
return false;
}
var x=document.forms["form1"]["Address2"].value; //validate the second line of address field
if (x==null || x=="")
{
alert("Please fill in your second line of address."); //show message if empty
return false;
}
var x=document.forms["form1"]["Address3"].value; //validate the town/city field
if (x==null || x=="")
{
alert("Please fill in your town/city."); //show message if empty
return false;
}
var x=document.forms["form1"]["Address4"].value; //validate the postcode field
if (x==null || x=="")
{
alert("Please fill in your postcode."); //show message if empty
return false;
}
var x=document.forms["form1"]["Phone"].value; //validate the phone number field
if (x==null || x=="")
{
alert("Please fill in your phone number."); //show message if empty
return false;
}
else if (document.form1.Phone.value.length < 11 || null) //if phone number is under 11 numbers, show alert
{
alert("Please enter your phone number correctly!");
document.form1.Phone.focus();
return false;
}
var x=document.forms["form1"]["Email"].value; //validate the email
var atpos=x.indexOf("@");
var dotpos=x.lastIndexOf(".");
if (atpos<1 || dotpos<atpos+2 || dotpos+2>=x.length) //check for the "@" and "."
{
alert("Not a valid e-mail address.");
return false;
}
var x=document.forms["form1"]["Card"].value; //validate the card field
if (x==null || x=="")
{
alert("Please fill in your Card number."); //show message if empty
return false;
}
window.location= "thanks.html";
}
//session expiry
setTimeout( "_SessionExpired()", 20 * 60 * 1000 ); //expires after 20 mins
function _SessionExpired()
{
alert("Session has expired!"); //alerts user
location.href = "1.html"; //redirects to login page
}
</script>
</body>
</html>
How would I create the transaction detail on the next page if I had bought for example 2 tickets for Guns n Roses at £88 ?
I suppose it would be a way of validating you purchase by showing the confirmation..
Any help would be appreciated!
Before you post, read our: 
Javascript confirmation/ validation? Help!
