Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 2 of 2
  1. #1
    New to the CF scene
    Join Date
    Mar 2012
    Posts
    6
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Unhappy Javascript confirmation/ validation? Help!

    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(&pound;):</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!

  • #2
    Master Coder felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, Australia
    Posts
    6,640
    Thanks
    0
    Thanked 649 Times in 639 Posts
    Your form needs an action attribute in order to specify where it is being submitted to. That will need to be a page running a server side script to actually capture the information. That same server side script can also output all the values in the HTML to allow the information to be confirmed.

    Only after you get it all working using the server side processing would you consider adding JavaScript to make filling out the form more convenient by reporting some errors before the form is submitted.
    Stephen
    Learn Modern JavaScript - http://javascriptexample.net/
    Helping others to solve their computer problem at http://www.felgall.com/

    Don't forget to start your JavaScript code with "use strict"; which makes it easier to find errors in your code.


  •  

    Posting Permissions

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