SitePoint Sponsor

User Tag List

Results 1 to 9 of 9
  1. #1
    SitePoint Enthusiast
    Join Date
    May 2012
    Posts
    28
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    2 scripts in one HTML file??

    All - We have one script working in our HTML file to validate the contents of the input form. However, we are also trying to incorporate another script to add up the contents of a shopping cart. So far all we have succeeded in doing is breaking the original script.

    I was hoping that one of you could help me figure out how to make this thing work. I am posting the code here for you to review.

    Thanks in advance for you assistance!

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
    "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    
    <meta http-equiv="content-type" content="text/html; charset=utf-8">
    <meta name="keywords" content="kudler fine foods, kudler,bakery , pastry, fresh produce, organic, fresh meat, fresh seafood, condiments, packaged foods, cheese, specialty dairy products">
    <meta name="description" content="Kudler Fine Foods">
    
    <title>Kudler Ecommerce Sampler</title>
    <link rel="stylesheet" type="text/css" href="base.css">
    <style type="text/css">
    
    hr {height:2px}         
    </style>
    
    <script type="text/javascript" src="calculations.js"> <-- This is what breaks the original validation script!
    function validateForm()
    {
    var x=document.getElementById('fname').value;
    if (x==null || x=="")
      {
      alert("First name must be filled out");
      return false;
      }
    var x=document.getElementById('lname').value;
    if (x==null || x=="")
      {
      alert("Last name must be filled out");
      return false;
      }
    var x=document.getElementById('address').value;
    if (x==null || x=="")
      {
      alert("Street address must be filled out");
      return false;
      }
    var x=document.getElementById('city').value;
    if (x==null || x=="")
      {
      alert("City name must be filled out");
      return false;
      }
    var x=document.getElementById('zip').value;
    if (x==null || x=="")
      {
      alert("Zip code must be filled out");
      return false;
      }
    var x=document.getElementById('email').value;
    var atpos=x.indexOf("@");
    var dotpos=x.lastIndexOf(".");
    if (atpos<1 || dotpos<atpos+2 || dotpos+2>=x.length)
      {
      alert("Not a valid e-mail address");
      return false;
      }
    var x=document.getElementById('cardnum').value;
    if (x==null || x=="")
      {
      alert("Credit card number must be filled out");
      return false;
      }
    var x=document.getElementById('securitycode').value;
    if (x==null || x=="")
      {
      alert("Security must be filled out");
      return false;
      }
    var x=document.getElementById('bzip').value;
    if (x==null || x=="")
      {
      alert("Billing zip code must be filled out");
      return false;
      }
    var x=document.getElementById('ordertotal').value;
    if (x==null || x=="")
      {
      alert("You must select at least 1 item to purchase");
      return false;
      }
    {
      }
      return true;
      
    }
    </script>
    <style type="text/css">
     div.c4 {clear:all;width:1200}
     h6.c3 {text-align:right}
     div.c2 {height:650px;width:350px;float:left;}
     div.c1 {width:1200px}
    </style>
    </head>
    <body onload='hideTotal()'>
    <div id="container" class="c1">
    <p><img class="topbanner" src="kudlerbanner.jpg" alt="Kudler Fine Foods!"></p>
    <h2>HOME  |   BAKERY  |   MEAT &amp; SEAFOOD  |   PRODUCE  |   CHEESE &amp; DAIRY  |   WINE  |   <a href="index.html">ORDERING</a></h2>
    <h1>Kudler E-commerce Order Page</h1>
    </div>
    <p class="pagecontent"><big>Ordering products from Kudler Fine Foods is a 3-step process:</big><br>
    <br>
    1. Fill out the form below with your shipping information.<br>
    2. Select your product from the drop-down menu.<br>
    3. Select your payment method.<br></p>
    <div class="sections">
    <div class="shipping c2">
    <p><big>Step 1.</big></p>
    
    <div id="text_form">
    <form name="order" action="mailto:kudlerordersummary@gmail.com" onsubmit="return validateForm()" "method="post" id="order">
    
    <fieldset id="shipping"><legend><strong>Shipping Information</strong></legend> <img class="delivery" src="delivery.jpg" alt="Shipping Information!!">
    <p>(*Required Field)</p>
    <p class="normal"><label for="fname">*First Name:</label> <input name="Firstname" type="text" id="fname" maxlength="30"></p>
    <p class="normal"><label for="lname">*Last Name:</label> <input name="LastName" type="text" id="lname" maxlength="30"></p>
    <p class="multi_field"><label for="address">*Street Address:</label> <input name="Address" type="text" id="address" maxlength="40"></p>
    <p class="normal"><label for="city">*City:</label> <input name="City" type="text" id="city" maxlength="30"></p>
    <p class="normal"><label for="state">State:</label> State: <select name="state">
    <option value="Select State">Select State</option>
    <option value="Alabama">Alabama</option>
    <option value="Alaska">Alaska</option>
    <option value="Arizona">Arizona</option>
    <option value="Arkansas">Arkansas</option>
    <option value="California">California</option>
    <option value="Colorado">Colorado</option>
    <option value="Connecticut">Connecticut</option>
    <option value="Delaware">Delawar</option>
    <option value="Florida">Florida</option>
    <option value="Georgia">Georgia</option>
    <option value="Hawaii">Hawaii</option>
    <option value="Idaho">Idaho</option>
    <option value="Illinois">Illinois</option>
    <option value="Indiana">Indiana</option>
    <option value="Iowa">Iowa</option>
    <option value="Kansas">Kansas</option>
    <option value="Kentucky">Kentucky</option>
    <option value="Louisiana">Louisiana</option>
    <option value="Maine">Maine</option>
    <option value="Maryland">Maryland</option>
    <option value="Massachusetts">Massachusetts</option>
    <option value="Michigan">Michigan</option>
    <option value="Minnesota">Minnesota</option>
    <option value="Mississippi">Mississippi</option>
    <option value="Missouri">Missouri</option>
    <option value="Montana">Montana</option>
    <option value="Nebraska">Nebraska</option>
    <option value="Nevada">Nevada</option>
    <option value="New Hampshire">New Hampshire</option>
    <option value="New Jersey">New Jersey</option>
    <option value="New Mexico">New Mexico</option>
    <option value="New York">New York</option>
    <option value="North Carolina">North Carolina</option>
    <option value="North Dakota">North Dakotaa</option>
    <option value="Ohio">Ohio</option>
    <option value="Oklahoma">Oklahoma</option>
    <option value="Oregon">Oregon</option>
    <option value="Pennsylvania">Pennsylvania</option>
    <option value="Rhode Island">Rhode Island</option>
    <option value="South Carolina">South Carolina</option>
    <option value="South Dakota">South Dakota</option>
    <option value="Tennessee">Tennessee</option>
    <option value="Texas">Texas</option>
    <option value="Utah">Utah</option>
    <option value="Vermont">Vermont</option>
    <option value="Virginia">Virginia</option>
    <option value="Washington">Washington</option>
    <option value="West Virginia">West Virginia</option>
    <option value="Wisconsin">Wisconsin</option>
    <option value="Wyoming">Wyoming</option>
    </select></p>
    <p class="normal"><label for="zip">*Zip Code:</label> <input name="ZipCode" type="text" id="zip" maxlength="5"></p>
    <p class="multi_field"><label for="email">*Email Address:</label> <input name="Email" type="text" id="email" maxlength="40"></p>
    </fieldset>
    </div>
    </div>
    </div>
    
    <div class="sections selections c2">
    <p><big>Step 2.</big></p>
    
    <fieldset id="selections"><legend><strong>Your Selections</strong></legend> <img class="wine" src="wine.png" alt="Select Your Items!!">
    <p id="bakery"><label>Bakery:</label><select id="item" name="bakery" onchange="calculateTotal()">
    <option value="selection">Make Selection</option>
    <option value="sour dough">Sour Dough Rolls ($5)</option>
    <option value="bread">Bread ($3)</option>
    <input type="text"  id="quantity"
        name="Quantity" value="Quantity" size="8" /></p>
    
    <p id="meatandseafood"><label>Meat:</label><select id="item" name="Meat and Seafood" onchange="calculateTotal()">
    <option value="selection">Make Selection</option>
    <option value="filet">Filet Mignon ($5)</option>
    <option value="fish">Halibut ($5)</option>
    <input type="text"  id="quantity"
        name="Quantity" value="Quantity" size="8" /></p>
    
    <p id="Produce"><label>Produce</label><select id="item" name="Produce" onchange="calculateTotal()">
    <option value="selection">Make Selection</option>
    <option value="asparagus">Asparagus ($3)</option>
    <option value="pineapple">Pineapple ($2)</option>
    <input type="text"  id="quantity"
        name="Quantity" value="Quantity" size="8" /></p>
    
    <p id="cheeseanddairy"><label>Dairy:</label><select id="item" name="Cheese and Dairy" onchange="calculateTotal()">
    <option value="selection">Make Selection</option>
    <option value="cheddar">Sharp Cheddar ($3)</option>
    <option value="milk">Milk ($4)</option>
    <input type="text"  id="quantity"
        name="Quantity" value="Quantity" size="8" /></p>
    
    <p id="Wine"><label>Wine:</label><select id="item" name="Wine" onchange="calculateTotal()">
    <option value="selection">Make Selection</option>
    <option value="chardonnay">Chardonnay - Dry ($25)</option>
    <option value="merlot">Merlot - Very Dry ($20)</option>
    <input type="text"  id="quantity"
        name="Quantity" value="Quantity" size="8" /></p>
    <div id="totalPrice"></div>
    <br></fieldset>
    </div>
    <div class="sections paymenttype c2">
    <p><big>Step 3.</big></p>
    
    <fieldset id="payment"><legend><strong>Payment Method</strong></legend> <img class="cards" src="cards.gif" alt="Credit Cards Accepted!!">
    <p>(*Required Field)</p>
    <p id="cardtype"><label>*Card Type:</label><select name="cardtype">
    <option value="Visa">Visa</option>
    <option value="Master Card">Master Card</option>
    <option value="Discover">Discover</option>
    <option value="American Express">American Express</option>
    </select></p>
    <label>*Card Number:</label> <input name="cardnum" id="cardnum" type="text" size="20"><br>
    <br>
    <label>*Security Code:</label> <input name="securitycode" id="securitycode" type="text" size="6"><br>
    <br>
    <label>*Billing ZIP Code:</label> <input name="bzip" id="bzip" type="text" size="10"><br>
    <br>
    <p><input name="Submit" type="submit" value="Submit"><input name="Reset" type="reset" value="Reset"></p>
    </fieldset>
    </form>
    </div>
    
    <div class="sections contacts c4">
    <p><big>Customer Contacts</big></p>
    <div class="contacts">
    <fieldset id="contacts">
    Customer Support<br><legend><strong>Customer Support</strong></legend> 
    <br>
    Sales<br>
    General Information<br>
    Product Queries<br>
    Shipping Questions<br>
    Payment Queries<br>
    <br>
    Marketing<br>
    <br>
    Purchasing (Suppliers)<br>
    <br>
    Careers<br>
    <br>
    Public Liaison<br>
    <br>
    Information Technology (Website Support)<br>
    <br>
    <big>Main Office</big><br>
    <br>
    La Jolla<br>
    Torrey Pines Rd. and Prospect Pl.<br>
    Rosen Shopping Center<br>
    La Jolla, CA 92037<br>
    <br>
    (858) 555-0138<br>
    </fieldset>
    </div>
    </div>
    <!-- end div id rightmenu -->
    <!-- page footer -->
    <div id="footer" class="c4">
    <hr>
    <h3>We sincerely appreciate your business.<br>
    Please come back soon and remember to visit one of our fine stores if you are in the neighborhood.<br></h3>
    <h5>HOME  |   BAKERY  |   MEAT &amp; SEAFOOD  |   PRODUCE  |   CHEESE &amp; DAIRY  |   WINE  |   <a href="index.html">ORDERING</a>  |   CONTACT US  |   SITE MAP  | </h5>
    <h6>Copyright 2012 Learning Team A (Team Project, WEB237). All rights reserved.</h6>
    
    <p><a href="http://validator.w3.org/check?uri=referer"><img src="http://www.w3.org/Icons/valid-xhtml10" alt="Valid XHTML 1.0 Transitional" height="31" width="88"></a></p>
    </div>
    <!-- end page footer -->
    </body>
    </html>
    Code:
    <script>
    var theForm = document.forms["order"];
    
    var prices= new Array();
    prices["selection"]=0;
    prices["sour dough"]=5;
    prices["bread"]=3;
    prices["filet"]=5;
    prices["fish"]=5;
    prices["asparagus"]=3;
    prices["pineapple"]=2;
    prices["cheddar"]=3;
    prices["milk"]=4;
    prices["chardonnay"]=25;
    prices["merlot"]=20;
    
    function itemPrice()
    {
        var TotalPrice=0;
        var theForm = document.forms["order"];
         var item = theForm.elements["item"];
     
    
        TotalPrice = prices[item.value];
     
        return itemPrice;
    }
    
    function getQuantity()
    {
        var theForm = document.forms["order"];
        var quantity = theForm.elements["quantity"];
        var howmany =0;
        if(quantity.value!="")
        {
            howmany = parseInt(quantity.value);
        }
    return howmany;
    }
    
    function getTotal()
    {
        var itemPrice = TotalPrice();
        var divobj = document.getElementById('totalPrice');
        divobj.style.display='block';
        divobj.innerHTML = "Total Order is $"+itemPrice;
    
    function hideTotal()
    {
        var divobj = document.getElementById('totalPrice');
        divobj.style.display='none';
    }
    
    </script>

  2. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,120
    Mentioned
    448 Post(s)
    Tagged
    8 Thread(s)
    Instead of this...

    Code:
    <script type="text/javascript" src="calculations.js">
    function validateForm()
    you should have this:

    Code:
    <script type="text/javascript" src="calculations.js"></script>
    <script>
    function validateForm()
    See if that helps.

    You haven't closed off the first script link and have left out the opening <script> tag for the next script.
    Facebook | Google+ | Twitter | Web Design Tips | Free Contact Form

    Forum Usage: Tips on posting code samples, images and more

    Forrest Gump: "IE is like a box of chocolates: you never know what you're gonna get."

  3. #3
    SitePoint Enthusiast
    Join Date
    May 2012
    Posts
    28
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Well... That fixed the problem of why the form didn't validate. The form now validates, but it generates an e-mail that's completely blank.

    It also never calculated the shopping cart info.

    Did I miss something??

  4. #4
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,120
    Mentioned
    448 Post(s)
    Tagged
    8 Thread(s)
    I can only comment on the missing tags, as JS isn't my thing. But honestly, it's not a good idea to rely on JS to process a form, because you can't rely on it. (People can have it turned off, for example.) It's better to have a server-side script handle this.
    Facebook | Google+ | Twitter | Web Design Tips | Free Contact Form

    Forum Usage: Tips on posting code samples, images and more

    Forrest Gump: "IE is like a box of chocolates: you never know what you're gonna get."

  5. #5
    SitePoint Enthusiast
    Join Date
    May 2012
    Posts
    28
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Understand. Unfortunately, this is a class project and it has to work inside our HTML file. So far I've been able to get the validation script to work, but now the shopping cart script is jacking everything up. Grrr...

    Well thanks for doing what you could. I appreciate it!

  6. #6
    SitePoint Enthusiast
    Join Date
    May 2012
    Posts
    28
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Here's what I'm working with now. Validation script works, but doesn't include any info in the e-mail it generates.

    The shopping cart script doesn't work at all.

    Help please!!

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
    "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    
    <meta http-equiv="content-type" content="text/html; 
    
    charset=utf-8">
    <meta name="keywords" content="kudler fine foods, kudler,bakery , 
    
    pastry, fresh produce, organic, fresh meat, fresh seafood, 
    
    condiments, packaged foods, cheese, specialty dairy products">
    <meta name="description" content="Kudler Fine Foods">
    
    <title>Kudler Ecommerce Sampler</title>
    <link rel="stylesheet" type="text/css" href="base.css">
    <style type="text/css">
    
    hr {height:2px}         
    </style>
    
    <script type="text/javascript">
    
    var theForm = document.forms["order"];
    
    var prices= new Array();
    prices["selection"]=0;
    prices["sour dough"]=5;
    prices["bread"]=3;
    prices["filet"]=5;
    prices["fish"]=5;
    prices["asparagus"]=3;
    prices["pineapple"]=2;
    prices["cheddar"]=3;
    prices["milk"]=4;
    prices["chardonnay"]=25;
    prices["merlot"]=20;
    
    function itemPrice()
    {
        var TotalPrice=0;
        var theForm = document.forms["order"];
         var item = theForm.elements["item"];
     
    
        TotalPrice = prices[item.value];
     
        return itemPrice;
    }
    
    function getQuantity()
    {
        var theForm = document.forms["order"];
        var quantity = theForm.elements["quantity"];
        var howmany =0;
        if(quantity.value!="")
        {
            howmany = parseInt(quantity.value);
        }
    return howmany;
    }
    
    function getTotal()
    {
        var itemPrice = TotalPrice();
        var divobj = document.getElementById('totalPrice');
        divobj.style.display='block';
        divobj.innerHTML = "Total Order is $"+itemPrice;
    
    function hideTotal()
    {
        var divobj = document.getElementById('totalPrice');
        divobj.style.display='none';
    }
    </script>
    
    <script type="text/javascript">
    
    function validateForm()
    {
    var x=document.getElementById('fname').value;
    if (x==null || x=="")
      {
      alert("First name must be filled out");
      return false;
      }
    var x=document.getElementById('lname').value;
    if (x==null || x=="")
      {
      alert("Last name must be filled out");
      return false;
      }
    var x=document.getElementById('address').value;
    if (x==null || x=="")
      {
      alert("Street address must be filled out");
      return false;
      }
    var x=document.getElementById('city').value;
    if (x==null || x=="")
      {
      alert("City name must be filled out");
      return false;
      }
    var x=document.getElementById('zip').value;
    if (x==null || x=="")
      {
      alert("Zip code must be filled out");
      return false;
      }
    var x=document.getElementById('email').value;
    var atpos=x.indexOf("@");
    var dotpos=x.lastIndexOf(".");
    if (atpos<1 || dotpos<atpos+2 || dotpos+2>=x.length)
      {
      alert("Not a valid e-mail address");
      return false;
      }
    var x=document.getElementById('cardnum').value;
    if (x==null || x=="")
      {
      alert("Credit card number must be filled out");
      return false;
      }
    var x=document.getElementById('securitycode').value;
    if (x==null || x=="")
      {
      alert("Security must be filled out");
      return false;
      }
    var x=document.getElementById('bzip').value;
    if (x==null || x=="")
      {
      alert("Billing zip code must be filled out");
      return false;
      }
    var x=document.getElementById('ordertotal').value;
    if (x==null || x=="")
      {
      alert("You must select at least 1 item to purchase");
      return false;
      }
    {
      }
      return true;
      
    }
    </script>
    <style type="text/css">
     div.c4 {clear:all;width:1200}
     h6.c3 {text-align:right}
     div.c2 {height:650px;width:350px;float:left;}
     div.c1 {width:1200px}
    </style>
    </head>
    <body onload='hideTotal()'>
    <div id="container" class="c1">
    <p><img class="topbanner" src="kudlerbanner.jpg" alt="Kudler Fine 
    
    Foods!"></p>
    <h2>HOME  |   BAKERY  |   MEAT &amp; SEAFOOD  |   PRODUCE  |   
    
    CHEESE &amp; DAIRY  |   WINE  |   <a 
    
    href="index.html">ORDERING</a></h2>
    <h1>Kudler E-commerce Order Page</h1>
    </div>
    <p class="pagecontent"><big>Ordering products from Kudler Fine 
    
    Foods is a 3-step process:</big><br>
    <br>
    1. Fill out the form below with your shipping information.<br>
    2. Select your product from the drop-down menu.<br>
    3. Select your payment method.<br></p>
    <div class="sections">
    <div class="shipping c2">
    <p><big>Step 1.</big></p>
    
    <div id="text_form">
    <form name="order" action="mailto:kudlerordersummary@gmail.com" 
    
    onsubmit="return validateForm()" "method="post" id="order">
    
    <fieldset id="shipping"><legend><strong>Shipping 
    
    Information</strong></legend> <img class="delivery" 
    
    src="delivery.jpg" alt="Shipping Information!!">
    <p>(*Required Field)</p>
    <p class="normal"><label for="fname">*First Name:</label> <input 
    
    name="Firstname" type="text" id="fname" maxlength="30"></p>
    <p class="normal"><label for="lname">*Last Name:</label> <input 
    
    name="LastName" type="text" id="lname" maxlength="30"></p>
    <p class="multi_field"><label for="address">*Street 
    
    Address:</label> <input name="Address" type="text" id="address" 
    
    maxlength="40"></p>
    <p class="normal"><label for="city">*City:</label> <input 
    
    name="City" type="text" id="city" maxlength="30"></p>
    <p class="normal"><label for="state">State:</label> State: <select 
    
    name="state">
    <option value="Select State">Select State</option>
    <option value="Alabama">Alabama</option>
    <option value="Alaska">Alaska</option>
    <option value="Arizona">Arizona</option>
    <option value="Arkansas">Arkansas</option>
    <option value="California">California</option>
    <option value="Colorado">Colorado</option>
    <option value="Connecticut">Connecticut</option>
    <option value="Delaware">Delawar</option>
    <option value="Florida">Florida</option>
    <option value="Georgia">Georgia</option>
    <option value="Hawaii">Hawaii</option>
    <option value="Idaho">Idaho</option>
    <option value="Illinois">Illinois</option>
    <option value="Indiana">Indiana</option>
    <option value="Iowa">Iowa</option>
    <option value="Kansas">Kansas</option>
    <option value="Kentucky">Kentucky</option>
    <option value="Louisiana">Louisiana</option>
    <option value="Maine">Maine</option>
    <option value="Maryland">Maryland</option>
    <option value="Massachusetts">Massachusetts</option>
    <option value="Michigan">Michigan</option>
    <option value="Minnesota">Minnesota</option>
    <option value="Mississippi">Mississippi</option>
    <option value="Missouri">Missouri</option>
    <option value="Montana">Montana</option>
    <option value="Nebraska">Nebraska</option>
    <option value="Nevada">Nevada</option>
    <option value="New Hampshire">New Hampshire</option>
    <option value="New Jersey">New Jersey</option>
    <option value="New Mexico">New Mexico</option>
    <option value="New York">New York</option>
    <option value="North Carolina">North Carolina</option>
    <option value="North Dakota">North Dakotaa</option>
    <option value="Ohio">Ohio</option>
    <option value="Oklahoma">Oklahoma</option>
    <option value="Oregon">Oregon</option>
    <option value="Pennsylvania">Pennsylvania</option>
    <option value="Rhode Island">Rhode Island</option>
    <option value="South Carolina">South Carolina</option>
    <option value="South Dakota">South Dakota</option>
    <option value="Tennessee">Tennessee</option>
    <option value="Texas">Texas</option>
    <option value="Utah">Utah</option>
    <option value="Vermont">Vermont</option>
    <option value="Virginia">Virginia</option>
    <option value="Washington">Washington</option>
    <option value="West Virginia">West Virginia</option>
    <option value="Wisconsin">Wisconsin</option>
    <option value="Wyoming">Wyoming</option>
    </select></p>
    <p class="normal"><label for="zip">*Zip Code:</label> <input 
    
    name="ZipCode" type="text" id="zip" maxlength="5"></p>
    <p class="multi_field"><label for="email">*Email Address:</label> 
    
    <input name="Email" type="text" id="email" maxlength="40"></p>
    </fieldset>
    </div>
    </div>
    </div>
    
    <div class="sections selections c2">
    <p><big>Step 2.</big></p>
    
    <fieldset id="selections"><legend><strong>Your 
    
    Selections</strong></legend> <img class="wine" src="wine.png" 
    
    alt="Select Your Items!!">
    <p id="bakery"><label>Bakery:</label><select id="item" 
    
    name="bakery" onchange="calculateTotal()">
    <option value="selection">Make Selection</option>
    <option value="sour dough">Sour Dough Rolls ($5)</option>
    <option value="bread">Bread ($3)</option>
    <input type="text"  id="quantity"
        name="Quantity" value="Quantity" size="8" /></p>
    
    <p id="meatandseafood"><label>Meat:</label><select id="item" 
    
    name="Meat and Seafood" onchange="calculateTotal()">
    <option value="selection">Make Selection</option>
    <option value="filet">Filet Mignon ($5)</option>
    <option value="fish">Halibut ($5)</option>
    <input type="text"  id="quantity"
        name="Quantity" value="Quantity" size="8" /></p>
    
    <p id="Produce"><label>Produce</label><select id="item" 
    
    name="Produce" onchange="calculateTotal()">
    <option value="selection">Make Selection</option>
    <option value="asparagus">Asparagus ($3)</option>
    <option value="pineapple">Pineapple ($2)</option>
    <input type="text"  id="quantity"
        name="Quantity" value="Quantity" size="8" /></p>
    
    <p id="cheeseanddairy"><label>Dairy:</label><select id="item" 
    
    name="Cheese and Dairy" onchange="calculateTotal()">
    <option value="selection">Make Selection</option>
    <option value="cheddar">Sharp Cheddar ($3)</option>
    <option value="milk">Milk ($4)</option>
    <input type="text"  id="quantity"
        name="Quantity" value="Quantity" size="8" /></p>
    
    <p id="Wine"><label>Wine:</label><select id="item" name="Wine" 
    
    onchange="calculateTotal()">
    <option value="selection">Make Selection</option>
    <option value="chardonnay">Chardonnay - Dry ($25)</option>
    <option value="merlot">Merlot - Very Dry ($20)</option>
    <input type="text"  id="quantity"
        name="Quantity" value="Quantity" size="8" /></p>
    <div id="totalPrice"></div>
    <br></fieldset>
    </div>
    <div class="sections paymenttype c2">
    <p><big>Step 3.</big></p>
    
    <fieldset id="payment"><legend><strong>Payment 
    
    Method</strong></legend> <img class="cards" src="cards.gif" 
    
    alt="Credit Cards Accepted!!">
    <p>(*Required Field)</p>
    <p id="cardtype"><label>*Card Type:</label><select 
    
    name="cardtype">
    <option value="Visa">Visa</option>
    <option value="Master Card">Master Card</option>
    <option value="Discover">Discover</option>
    <option value="American Express">American Express</option>
    </select></p>
    <label>*Card Number:</label> <input name="cardnum" id="cardnum" 
    
    type="text" size="20"><br>
    <br>
    <label>*Security Code:</label> <input name="securitycode" 
    
    id="securitycode" type="text" size="6"><br>
    <br>
    <label>*Billing ZIP Code:</label> <input name="bzip" id="bzip" 
    
    type="text" size="10"><br>
    <br>
    <p><input name="Submit" type="submit" value="Submit"><input 
    
    name="Reset" type="reset" value="Reset"></p>
    </fieldset>
    </form>
    </div>
    
    <div class="sections contacts c4">
    <p><big>Customer Contacts</big></p>
    <div class="contacts">
    <fieldset id="contacts">
    Customer Support<br><legend><strong>Customer 
    
    Support</strong></legend> 
    <br>
    Sales<br>
    General Information<br>
    Product Queries<br>
    Shipping Questions<br>
    Payment Queries<br>
    <br>
    Marketing<br>
    <br>
    Purchasing (Suppliers)<br>
    <br>
    Careers<br>
    <br>
    Public Liaison<br>
    <br>
    Information Technology (Website Support)<br>
    <br>
    <big>Main Office</big><br>
    <br>
    La Jolla<br>
    Torrey Pines Rd. and Prospect Pl.<br>
    Rosen Shopping Center<br>
    La Jolla, CA 92037<br>
    <br>
    (858) 555-0138<br>
    </fieldset>
    </div>
    </div>
    <!-- end div id rightmenu -->
    <!-- page footer -->
    <div id="footer" class="c4">
    <hr>
    <h3>We sincerely appreciate your business.<br>
    Please come back soon and remember to visit one of our fine stores 
    
    if you are in the neighborhood.<br></h3>
    <h5>HOME  |   BAKERY  |   MEAT &amp; SEAFOOD  |   PRODUCE  |   
    
    CHEESE &amp; DAIRY  |   WINE  |   <a 
    
    href="index.html">ORDERING</a>  |   CONTACT US  |   SITE MAP  | 
    
    </h5>
    <h6>Copyright 2012 Learning Team A (Team Project, WEB237). All 
    
    rights reserved.</h6>
    
    <p><a href="http://validator.w3.org/check?uri=referer"><img 
    
    src="http://www.w3.org/Icons/valid-xhtml10" alt="Valid XHTML 1.0 
    
    Transitional" height="31" width="88"></a></p>
    </div>
    <!-- end page footer -->
    </body>
    </html>

  7. #7
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,686
    Mentioned
    100 Post(s)
    Tagged
    4 Thread(s)
    The major problems that exist relate to the getTotal function, in that the function is not complete, and it makes a call to a non-existing totalPrice function.

    There is also form code that calls a calculateTotal function that doesn't exist, as well as three function itemPrice, getQuantity and getTotal that aren't used by anything.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  8. #8
    SitePoint Enthusiast
    Join Date
    May 2012
    Posts
    28
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Other than that is looks great eh?!

    Yikes...

  9. #9
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,686
    Mentioned
    100 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by Rick Sebastian View Post
    Other than that is looks great eh?!
    I'm afraid not. It looks like your price total calculations weren't ever able to work at all either.

    But first, stop it falling over, and after that get it back on it's feet.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript


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
  •