Confirmation pop up, help! Javascript

jamesy23 · June 3, 2012, 8:03pm

I was wondering what I would have to do to have a transaction summary before moving onto the next page. I mean I would click “Buy Tickets” a pop up would show me what I was purchasing (for example. 2 tickets for Nottingham, 18th July at £45 each and the total cost (£90)) .

Anyone have any ideas how to go about this?


<html>

<head>
<a href="2.html" style="text-decoration: none"> Purchase different tickets
<br><<</a>
<center>
<br>
<br>
<br>
<h1><FONT COLOR="06799F">Oasis</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(&pound;):</b> <input name="total"type="text" />

<br /><br />(Includes £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=[
[" "],
["Nottingham, 18th July",25],								//arrays to fill up the drop down
["Nottingham, 18th July",45],
["Nottingham, 18th July",60],
["Nottingham, 19th July",25],
["Nottingham, 19th July",45],
["Nottingham, 19th July",60],
[" "],
["Glasgow, 21st July",45],
["Glasgow, 21st July",60],
[" "],
["London, 23rd July",45],
["London, 23rd July",60],
["London, 24th July",45],
["London, 24th July",60]
],
sel_1=document.getElementById("sel_1"),							//ticket drop down	
sel_2=document.getElementById("sel_2");							//number of tickets drop down

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);}										//populating second drop down (1-6)

function calcTic(frm)
{
if(frm.sel_1.value==""){alert("Please choose dates.");frm.sel_1.focus();return;}						//if unchosen ticket, alert before calculating price
if(frm.sel_2.value==""){alert("Please choose number of tickets.");frm.sel_2.focus();return;} 					//if unchosen number of tickets, alert before calculating price

else{
var val_1=new Number(frm.sel_1.value),val_2=new Number(frm.sel_2.value),extra=val_2>3?10:0;					//totals up the price (ticket x quantity (+£10 if 4 or more))
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>

also, I have tried a few ways but I can’t seem to get a “£” sign in front of the prices on the drop down without changing the value of the field.
Any suggestions on how to change?

any help appreciated!

Thanks in advance

Paul_Wilkins · June 3, 2012, 11:36pm

Sure, I’ll answer these in reverse order to help improve the clarity of things in relation to the total.

I am going to assume that you mean below the drop down where the total is shown.
I understand your concern, because if you do it like this:


frm.total.value = '£' + val_1 * val_2 + extra;

You will end up with the wrong result, because it is the string of ‘£50’ to which extra is added, which just appends a 0 on to the end resulting in ‘£500’

So instead, you can either calculate the total beforehand:


function calcTic(frm) {
    var total = 0;
    ...
    total = val_1 * val_2 + extra;
    frm.total.value = '£' + total;

or you can just place the calculation in parenthesis:


frm.total.value = '£' + (val_1 * val_2 + extra);

You could create a function that does that with something like:


function confirmTicketPurchase() {
    var form = document.forms["tickets"],
        tickets = form.sel_1,
        ticket = tickets.options[tickets.selectedIndex].innerHTML,
        price = tickets.value,
        amount = form.sel_2.value,
        total = form.total.value;

    // price is a number straight from the option value, whereas total is a string such as '£50' 
    return window.confirm('You are about to purchase ' + amount + ' tickets to ' + ticket + ' at £' + price + ' each at a total cost of ' + total);
}

and call that from the validate function. If you want to confirm before checking the other fields, you could place it at the start of the validate function with:


function validate() {
    if (!confirmTicketPurchase()) {
        return false;
    }
    ...
}

or if you want the confirmation to occur only after the other fields are validated as being correct, you can place the confirm at the end of the function with:


function validate() {
    ...
    return confirmTicketPurchase();
}

jamesy23 · June 4, 2012, 5:14pm

thanks, I found another way to fix the problem but this still helped! but I was particularly stuck on showing the pound (£) sign in my drop down ie. [“Nottingham, 18th July”,45], etc…

I want it to be “Nottingham, 18th July, £45” …basically I want the pound sign showing up but the value of the field to be the same (45) so it wouldn’t be a problem when it comes to totaling up the price. How would I do this? I have tried to put the sign in with quotation marks but it doesn’t work and the value changes.

Would you know how I can combat this problem?

Thanks!

Paul_Wilkins · June 4, 2012, 8:09pm

I’ve just tried that and it seems to work perfectly fine when I make the change.

Show us the change you attempting to do, and we’ll provide some advice on what you’re doing.

jamesy23 · June 4, 2012, 9:42pm

I was trying [“Nottingham, 18th July”,“£”, 45] and [“Nottingham, 18th July”,(£)45] and also by putting the code form in [“Nottingham, 18th July”,‘(\u00A3)45’]…

But no luck! I’m stumped

Paul_Wilkins · June 4, 2012, 9:47pm

Okay - this is the part that retrieves those ticket values from the array, and puts them in the dropdown box as options.


for (var i = 1; i < tickets.length; i++) {
    sel_1.options[i] = new Option(tickets[i][0] + ' - ' + tickets[i][1], tickets[i][1]);
}

where tickets[i][0] is the destination, and tickets[i][1] is the ticket price.

If I’m correctly understanding what you want, you want the £ symbol to appear just before the ticket price.
So it should just mean changing ’ - ’ to ’ - £’ shouldn’t it?

jamesy23 · June 5, 2012, 10:44am

ahhhhhhh that makes so much more sense! I can’t believe I missed that bit/

Thanks, a million! I can do the rest myself now