SitePoint Sponsor

User Tag List

Results 1 to 7 of 7
  1. #1
    SitePoint Member
    Join Date
    Mar 2012
    Posts
    8
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Unhappy confirmation pop up, help! Javascript

    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?
    Code:
    <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

  2. #2
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,729
    Mentioned
    104 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by jamesy23 View Post
    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?
    Sure, I'll answer these in reverse order to help improve the clarity of things in relation to the total.

    Quote Originally Posted by jamesy23 View Post
    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.
    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:

    Code:
    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:

    Code javascript:
    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:

    Code javascript:
    frm.total.value = '' + (val_1 * val_2 + extra);

    Quote Originally Posted by jamesy23 View Post
    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)) .
    You could create a function that does that with something like:

    Code javascript:
    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:

    Code javascript:
    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:

    Code javascript:
    function validate() {
        ...
        return confirmTicketPurchase();
    }
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  3. #3
    SitePoint Member
    Join Date
    Mar 2012
    Posts
    8
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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!

  4. #4
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,729
    Mentioned
    104 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by jamesy23 View Post
    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.
    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.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  5. #5
    SitePoint Member
    Join Date
    Mar 2012
    Posts
    8
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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 :/

  6. #6
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,729
    Mentioned
    104 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by jamesy23 View Post
    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 :/
    Okay - this is the part that retrieves those ticket values from the array, and puts them in the dropdown box as options.

    Code:
    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?
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  7. #7
    SitePoint Member
    Join Date
    Mar 2012
    Posts
    8
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •