I am making a program that will allow people to purchase tickets. I'm relatively new at this so I'm just practicing with with concert tickets and stuff before going into the real thing.
I think I have the basis but I'm puzzled with my drop down menu's. I want to have a html drop down but populate the content of it with arrays. How would I go about doing that?
my code so far..
Code:
<html>
<center>
<br>
<br>
<br>
<h1><FONT COLOR="06799F">Oasis</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;
}
window.location= "thanks.html";
}
function calcTic(frm)
{
if (frm.dates.value=="")
{
alert("Please choose dates.")
return;
}
else if (frm.tic.value=="")
{
alert("Please choose number of tickets.")
return;
}
else
{
var extra=frm.tic.value>3?10:0;
frm.total.value="£"+Number (frm.dates.value*frm.tic.value+extra);
}
}
//session expiry
setTimeout( "_SessionExpired()", 10 * 60 * 1000 ); //expires after 10 mins
function _SessionExpired()
{
alert("Session has expired!"); //alerts user
location.href = "1.html"; //redirects to login page
}
</script>
</head>
<body>
<!--offer choices-->
<br>
<br>
<h4>Select Your Chosen Ticket: </h4>
<!--drop down menus-->
<form name = "form1">
<select name="dates">
<option value="">Select Ticket</option>
<option value=25>Nottingham, 18th July - £25</option>
<option value=45>Nottingham, 18th July - £45</option>
<option value=60>Nottingham, 18th July - £60</option>
<option value=25>Nottingham, 19th July - £25</option>
<option value=45>Nottingham, 19th July - £45</option>
<option value=60>Nottingham, 19th July - £60</option>
<option> </option>
<option value=45>Glasgow, 21st July - £45</option>
<option value=60>Glasgow, 21st July - £60</option>
<option> </option>
<option value=45>London, 23rd July - £45</option>
<option value=60>London, 23rd July - £60</option>
<option value=45>London, 24th July - £45</option>
<option value=60>London, 24th July - £60</option>
</select>
<!--number of tickets-->
<br>
<br>
<br>
<br>
<h4>Select The Number of Tickets:</h4>
(maximum of 6)
<br>(Additional £10 fee for 4+ tickets)
<br>
<br>
<select name="tic">
<option value="">Select Ticket</option>
<option value=1>1 </option>
<option value=2>2 </option>
<option value=3>3 </option>
<option value=4>4 </option>
<option value=5>5 </option>
<option value=6>6 </option>
</select>
<br><br>
<input type="button" value="Calculate Price" onclick="calcTic(this.form)"/>
<br><br><b>Total price:</b> <input name="total"type="text"/>
<br><br><br><br><br>
<!--form to enter details-->
<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="16" /><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>
I am new to this so if anyone is able to show me how to go about this task and explain it'd be EXTREMELY helpful!
in a nutshell... (untested - writing it by hand. you'll need to define your array first, of course)
Code:
for (i=0;i<myArray.length;i++){
var x=document.getElementById("mySelect");
var option=document.createElement("option");
option.text=myArray[i];
try {
// for IE earlier than version 8
x.add(option,x.options[null]);
} catch (e) {
x.add(option,null);
}
}
for the array to be useful in this context each element that you want t tyurn into an option should be a subarray and those subarrays should have one element for the text and one for the value of the option, like this:
Code:
var tickets=[["Nottingham, 18th July - £25",25],["Nottingham, 18th July - £45",45] ]
once you have that it is simply a matter of looping through the array and creating new options:
Code:
<body>
<select id="theselect"></select>
<script type = "text/javascript">
var tickets=[["Nottingham, 18th July - £25",25],["Nottingham, 18th July - £45",45] ]
var sel=document.getElementById("theselect")
for (var i = 0; i < tickets.length; i++) {
sel.options[i]=new Option(tickets[i][0],tickets[i][1])
}
</script>
</body>
Can I ask if the why the javascript part has to be in the <body>? It's because I have other code for another input form validation and a session timer which refuses to work if I put those in the body section..
my validation/session timer code is:
Code:
//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;
}
window.location= "thanks.html";
}
//session expiry
setTimeout( "_SessionExpired()", 10 * 60 * 1000 ); //expires after 10 mins
function _SessionExpired()
{
alert("Session has expired!"); //alerts user
location.href = "1.html"; //redirects to login page
}
of course you can put these actions in a separate function which is called on page load - then all the js-code can be placed in the head section of the document. or you can just place the js-code in an external js-file to make the markup be less complicated.
use [code]YOUR CODE GOES HERE[/code] or burn in Hell
After I press the "buy tickets" button I want a pop up showing the tickets chosen, number of tickets and the total price so the user is able to confirm before moving onto the next page. Would I use a session cookie for this, or is there another way of going about this business?
I know how to do the cookie but how would I select the two drop downs and total price field?
Reply With Quote
Bookmarks