Hi all!

I am trying to create a online booking page for my fathers business and need some assistance.
I am relatively new to JavaScript, and wanted to keep it simple - so I've tried to replicate what I will do with a different system (the one I'm trying out is ticket booking).

I have a system where you pick the ticket and how many you want, but I wanted to show the total price underneath, after the customer has chosen which ticket and how many.

Would anyone be able to help?

Code:
<html>

<center>
<br>
<br>
<br>
<h1><FONT COLOR="000000">Guns N' Roses</FONT></h1>

<head>
<script type="text/javascript">


//validate the form (name shouldn't be blank)


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;
  }


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;
  }

}
</script>


</head>


<body>

<!--offer choices-->

<br>
<br>
<h4>Select Your Chosen Ticket: </h4>
<select>

<option>Select Ticket</option>

<option>London, 10th July - £88</option>

</select>

<!--number of tickets-->
<br>
<br>
<br>
<br>
<h4>Select The Number of Tickets:</h4>
(maximum of 6)

<br>
<br>
<select>

<option>Select Ticket</option>

<option>1 </option>
<option>2 </option>
<option>3 </option>
<option>4 </option>
<option>5 </option>
<option>6 </option>

</select>


<!--form to enter details-->


<form name = "form1">
<br><br><br><br><br>


<h2>Please Enter Your Details Below.</h2>


<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();" />													<!--submit button-->

</center>

</body>



</html>

As I said, I am relatively new to this so any help would be greatly appreciated and if you could comment why a certain method was chosen it'd be even more helpful in me understanding!


Thanks in advance.