SitePoint Sponsor

User Tag List

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

    Can't Get JavaScript to Validate Form Data

    Hi all. Relatively new to the forums, and I hope I'm posting this in the right place.

    I am having a problem getting the JavaScript in our HTML doc to validate the form inside the HTML code. (I hope I explained that right)

    We have 3 <fieldset>'s inside the doc to separate data. According to the W3C validator, the </form> tag MUST come at the end of the first </fieldset> entry. Obviously, that will not allow the script to pick up the remaining 2 sections of the form data.

    Having said that, even if I do put the </form> tag at the very end, the best I've been able to accomplish is to get the "Submit" button to generate a blank e-mail with all of the form fields included. It simply will NOT validate the form before it generates the e-mail regardless of where I put the </form> tag.

    So I am at a complete loss.

    If someone could take a look at the code and give me some pointers I would be greatly appreciative.

    I attached our index.html file as index.txt

    Rick
    Attached Files Attached Files

  2. #2
    Non-Member bronze trophy
    Join Date
    Nov 2009
    Location
    Keene, NH
    Posts
    3,760
    Mentioned
    23 Post(s)
    Tagged
    0 Thread(s)
    Uhm... javascript doesn't have associative arrays... forms is a collection; a glorified array... you cannot index it as:
    document.forms["order"]["lastname"]

    That would actually be document.forms[0].elements[???] (you'd have to manually count what element it is)

    The forms array is so fragile that as a rule I'd never use it; to me it's a holdover from the old Netscape days -- a proper form should have ID's on every input anyways, meaning what you WANT is

    var x=document.getElementById('lname');

    Though man, that markup... paragraphs around non paragraphs, no fieldsets around fields with fieldsets around non-form elements, paragraphs+big doing heading tags jobs, presentational style in the markup, hordes of classes for nothing... headings around non-heading elements, heading orders that don't even make sense (like a h2 preceeding a h1)...

    Needs a bit of work. You may want to research what all those tags you are using are actually for.

  3. #3
    SitePoint Enthusiast
    Join Date
    May 2012
    Posts
    28
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Shadow - Thanks for the tips. We are actually just learning this stuff. Getting our form to validate is not a requirement for our assignment, it's just something that I'm trying to get working because, frankly, it pisses me off that I can't!

    So I'm just searching for A. Why it won't work. And B. What method(s) would you guys recommend I use to make it work?!

    If I understand your response correctly, you are saying that I should remove the <form> tag and use a var x=document.get... method, yes?

  4. #4
    Non-Member bronze trophy
    Join Date
    Nov 2009
    Location
    Keene, NH
    Posts
    3,760
    Mentioned
    23 Post(s)
    Tagged
    0 Thread(s)
    The FORM tag is fine, you want a form tag if you have INPUTS -- the problem is in your script.

    A "associative" array is one that has string type names -- like "lastname" for it's values. Javascript doesn't have those, as such this:

    document.forms["order"]

    Is NOT javascript. Javascript doesn't work that way. The document.forms result is an ARRAY, indexed numerically, so the only thing you can put in the square brackets is a number. When we say invalid in javascript, it means that unlike HTML plodding along as if nothing is wrong, the script is going to come to a screeching halt. (were that HTML was as well behaved!)

    document.forms[0]

    Would point at the first from on the page... but trying to count by number makes it a pain should you add another form on the page before it (like a search)... and the sub-elements array is likewise... hindered. It's just too fragile which is why I'd use the unique ID on each input (which every ID should be unique, no re-using those!) as the target.

    To fix your script, you need to take every place that you call this type of construct:

    var x=document.forms["order"]["lastname"].value;

    and replace it with

    var x=document.getElementById('lname').value;

    Where the value in quotes inside the getElementById method is the ID of the input you want to check. Since you only have 9 of them that's not a giant change.

    Even if ["order"]["lastname"] was valid and actually ran, it would still fail -- in your HTML id="lname" is set to name="textfield" -- as is every other input there.. the 'lastname' target doesn't even exist!

    Though much of your bad markup is going to fail even with the script working -- like all the input's that have the same NAME on them; should only happen with type="radio" -- the NAME attribute is what is sent to the server to be processed, ID is for CSS and Javascript to target. As such, they should always be unique to each INPUT tag... the exception being NAME where you have a <input type="radio"> since they all are supposed to report to the same server side result.

  5. #5
    SitePoint Enthusiast
    Join Date
    May 2012
    Posts
    28
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I desperately wish I understood everything you just wrote. However, I will attempt to process your comments this weekend and figure out how to fix this mess.

    You mentioned that even if I did fix the script, it would still not work because the HTML portion is still FUBAR.

    By that I assume you are saying that this entry:

    var x=document.forms["order"]["lastname"].value;
    if (x==null || x=="")
    {
    alert("Last name must be filled out");
    return false;
    }

    Does not work with this entry:


    <p class="normal">
    <label for="lname">*Last Name/label>
    <input name="textfield" type="text" id="lname" maxlength="30" >
    </p>

    Because the HTML entry has "lname" and the script is looking for "lastname".

    Is that right?

    If so, if I make them match, it should work, yes?

  6. #6
    SitePoint Enthusiast
    Join Date
    May 2012
    Posts
    28
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I changed all the script fields to:


    Code:
    <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('cardtype').value;
    if (x==null || x=="")
    {
    alert("Credit card number must be filled out");
    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;
    }
    }
    </script> 
    </head>
    I also made sure that all of the corresponding HTML ID's were set with the same names.

    The "Submit" button will now generate an e-mail with all of the correct headers for the ID's in the list, but it will still not validate the form.

    Any idea how to fix that??
    Last edited by DaveMaxwell; Jun 1, 2012 at 12:38.

  7. #7
    Non-Member bronze trophy
    Join Date
    Nov 2009
    Location
    Keene, NH
    Posts
    3,760
    Mentioned
    23 Post(s)
    Tagged
    0 Thread(s)
    Well, I did just notice one little problem...

    You forgot to return true if none of the other routines return false -- so it's not returning anything -- null, and for most cases, null equals false.

    Right before you end the script, change it to:
    Code:
      }
      return true;
    }
    </script>
    Not sure if that's your whole problem, but it's a good start.

  8. #8
    SitePoint Enthusiast
    Join Date
    May 2012
    Posts
    28
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    lol... That would make sense.

    I added it. Still doesn't work.

    The e-mail looks great though!

    Seriously... I really appreciate the help. I'm learning a lot here.

    Rick

  9. #9
    SitePoint Enthusiast
    Join Date
    May 2012
    Posts
    28
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Here's the whole blasted thing again just so you're looking at what I'm looking at...

    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_test.css">
    
    
    <style type="text/css">
    hr {height:2px} 
    </style>
    <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('cardtype').value;
    if (x==null || x=="")
    {
    alert("Credit Card type must be filled out");
    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>
    </head>
    <body>
    
    <div id="container">
    <p><img class="topbanner" src="kudlerbanner.jpg" alt="Kudler Fine Foods!"></p>
    
    <h2>
    HOME&nbsp;&nbsp;|&nbsp;&nbsp;
    BAKERY&nbsp;&nbsp;|&nbsp;&nbsp;
    MEAT &amp; SEAFOOD&nbsp;&nbsp;|&nbsp;&nbsp;
    PRODUCE&nbsp;&nbsp;|&nbsp;&nbsp;
    CHEESE &amp; DAIRY&nbsp;&nbsp;|&nbsp;&nbsp;
    WINE&nbsp;&nbsp;|&nbsp;&nbsp;
    <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:
    Last edited by DaveMaxwell; Jun 1, 2012 at 12:39. Reason: wrapped in code tags to save scrolling...

  10. #10
    Just Blow It bronze trophy
    DaveMaxwell's Avatar
    Join Date
    Nov 1999
    Location
    Mechanicsburg, PA
    Posts
    7,290
    Mentioned
    122 Post(s)
    Tagged
    1 Thread(s)
    Rick - please wrap any posted code in the code tag ( [ code ] and [ /code ] without the spaces.) This makes it easier for people to follow along and prevents ridiculous amounts of scrolling....
    Dave Maxwell - Manage Your Site Team Leader
    My favorite YouTube Video! | Star Wars, Dr Suess Style
    Learn how to be ready for The Forums' Move to Discourse

  11. #11
    SitePoint Enthusiast
    Join Date
    May 2012
    Posts
    28
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Roger that. Didn't know. My apologies.

    I'll try that now.


    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_test.css">
    
    
    <style type="text/css">
    hr {height:2px}		
    </style>
    <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('cardtype').value;
    if (x==null || x=="")
      {
      alert("Credit Card type must be filled out");
      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>
    </head>
    <body>
    
    <div id="container">
    <p><img class="topbanner" src="kudlerbanner.jpg" alt="Kudler Fine Foods!"></p>
    
         <h2>
          HOME&nbsp;&nbsp;|&nbsp;&nbsp;
          BAKERY&nbsp;&nbsp;|&nbsp;&nbsp;
          MEAT &amp; SEAFOOD&nbsp;&nbsp;|&nbsp;&nbsp;
          PRODUCE&nbsp;&nbsp;|&nbsp;&nbsp;
          CHEESE &amp; DAIRY&nbsp;&nbsp;|&nbsp;&nbsp;
          WINE&nbsp;&nbsp;|&nbsp;&nbsp;
          <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 style='height: 550px; width: 350px; border: 2px solid gray; float: left;'>  
    <p><big>Step 1.</big></p>
    
    <form name="order" action="mailto:kudlerordersummary@gmail.com" onsubmit="return validateForm()" method="post">
    
    <div><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:&nbsp;<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>
      
          </div></div>
    
    <div style='height: 550px; width: 350px; border: 2px solid gray; float: left;'> 
    <p><big>Step 2.</big></p>
    <div><img class="wine" src="wine.png" align-image="center" alt="Select Your Items!!">
    
          <p id="bakery"><select name="Bakery">
            <option value="Bakery">Bakery Selection</option>
            <option value="Sour Dough Rolls">Sour Dough Rolls</option>
            <option value="Bread">Bread</option>
            <option value="Chocolate Cake">Chocolate Cake</option>
            <option value="Assorted Dozen Doughnuts">Assorted Dozen Doughnuts</option>
            <option value="Cupcakes">Cupcakes</option>
            </select>&nbsp;&nbsp;
                Qty:&nbsp;<select name="qty">
                    <option>0</option>
                    <option>1</option>
                    <option>2</option>
                    <option>3</option>
                    <option>4</option>
                    <option>5</option>
                    <option>6</option>
                    <option>7</option>
                    <option>8</option>
                    <option>9</option>
                    <option>10</option>
                    <option>11</option>
                    <option>12</option>
                    <option>13</option>
                    <option>15</option>
                    <option>20</option>
                    <option>99</option>
                </select>
            </p>
          <p id="meatandseafood"><select name="Meat and Seafood">
            <option value="Meat and Seafood">Meat and Seafood Selection</option>
            <option value="Filet Mignon">Filet Mignon</option>
            <option value="New York Strip">New York Strip</option>
            <option value="Chilean Sea Bass">Chilean Sea Bass</option>
            <option value="Copper River Salmon">Copper River Salmon</option>
            <option value="Halibut">Halibut</option>
            </select>&nbsp;&nbsp;
                Qty:&nbsp;<select name="qty">
                    <option>0</option>
                    <option>1</option>
                    <option>2</option>
                    <option>3</option>
                    <option>4</option>
                    <option>5</option>
                    <option>6</option>
                    <option>7</option>
                    <option>8</option>
                    <option>9</option>
                    <option>10</option>
                    <option>11</option>
                    <option>12</option>
                    <option>13</option>
                    <option>15</option>
                    <option>20</option>
                    <option>99</option>
                </select>
            </p>
          <p id="Produce"><select name="Produce">
            <option value="Produce">Produce Selection</option>
            <option value="Asparagus">Asparagus</option>
            <option value="Broccoli">Broccoli</option>
            <option value="Pineapple">Pineapple</option>
            <option value="Apples - Red Delicious">Apples - Red Delicious</option>
            <option value="Serrano Peppers">Serrano Peppers</option>
            </select>&nbsp;&nbsp;
                Qty:&nbsp;<select name="qty">
                    <option>0</option>
                    <option>1</option>
                    <option>2</option>
                    <option>3</option>
                    <option>4</option>
                    <option>5</option>
                    <option>6</option>
                    <option>7</option>
                    <option>8</option>
                    <option>9</option>
                    <option>10</option>
                    <option>11</option>
                    <option>12</option>
                    <option>13</option>
                    <option>15</option>
                    <option>20</option>
                    <option>99</option>
                </select>
            </p>
          <p id="cheeseanddairy"><select name="Cheese and Dairy">
            <option value="Cheese &amp; Dairy">Cheese and Dairy Selection</option>
            <option value="Cheddar - Extra Sharp Bandon">Cheddar - Extra Sharp Bandon</option>
            <option value="Cheddar - Sharp Tillamook">Cheddar - Sharp Tillamook</option>
            <option value="Milk - 2 Percent">Milk - 2 Percent</option>
            <option value="Milk - Non-Fat">Milk - Non-Fat</option>
            <option value="Yogurt - Oregon Strawberry">Yogurt - Oregon Strawberry</option>
            </select>&nbsp;&nbsp;
                Qty:&nbsp;<select name="qty">
                    <option>0</option>
                    <option>1</option>
                    <option>2</option>
                    <option>3</option>
                    <option>4</option>
                    <option>5</option>
                    <option>6</option>
                    <option>7</option>
                    <option>8</option>
                    <option>9</option>
                    <option>10</option>
                    <option>11</option>
                    <option>12</option>
                    <option>13</option>
                    <option>15</option>
                    <option>20</option>
                    <option>99</option>
                </select>
            </p>
          <p id="Wine"><select name="Wine">
            <option value="Wine">Wine Selection</option>
            <option value="Chardonnay - Dry">Chardonnay - Dry</option>
            <option value="Pinot Noir">Pinot Noir</option>
            <option value="Cabernet Sauvignon">Cabernet Sauvignon</option>
            <option value="Merlot - Very Dry">Merlot - Very Dry</option>
            <option value="White Reisling">White Reisling</option>
            </select>&nbsp;&nbsp;
                Qty:&nbsp;<select name="qty">
                    <option>0</option>
                    <option>1</option>
                    <option>2</option>
                    <option>3</option>
                    <option>4</option>
                    <option>5</option>
                    <option>6</option>
                    <option>7</option>
                    <option>8</option>
                    <option>9</option>
                    <option>10</option>
                    <option>11</option>
                    <option>12</option>
                    <option>13</option>
                    <option>15</option>
                    <option>20</option>
                    <option>99</option>
                </select>
            </p>
    
    	<label>Your Order Total:</label><input name="ordertotal" type="text" size="8"><br><br>
    </div></div>  
         
      
    <div style='height: 550px; width: 350px; border: 2px solid gray; float: left;'>
    <p><big>Step 3.</big></p>
    
    <div><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>
          <label>Your Order Total With Tax and Shipping:</label><input name="ordertotal" id="ordertotal"type="text" size="10" ><br ><br >
    	<p>
    	<input name="Submit" type="submit" value="Submit" >
    	<input name="Reset" type="reset" value="Reset" >
    	</p>
     </form> 
    </div>
    </div>
      
      </div>   
      </div> 
    
    <div class="contacts"> 
    <p><big>Contacts</big></p>
     
    
        <fieldset id="contacts">
        <legend><b>Contacts</b></legend>
    
        Customer Support<br><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>
    
    <!-- page footer -->
    <div id="footer" style="clear:all;width:1200">
    <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&nbsp;&nbsp;|&nbsp;&nbsp;
        BAKERY&nbsp;&nbsp;|&nbsp;&nbsp;
        MEAT &amp; SEAFOOD&nbsp;&nbsp;|&nbsp;&nbsp;
        PRODUCE&nbsp;&nbsp;|&nbsp;&nbsp;
        CHEESE &amp; DAIRY&nbsp;&nbsp;|&nbsp;&nbsp;
        WINE&nbsp;&nbsp;|&nbsp;&nbsp;
        <a href="index.html">ORDERING</a>&nbsp;&nbsp;|&nbsp;&nbsp;
        CONTACT US&nbsp;&nbsp;|&nbsp;&nbsp;
        SITE MAP&nbsp;&nbsp;|&nbsp;
        </h5>
        <h6 style="text-align:right">Copyright &copy; 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>

  12. #12
    SitePoint Enthusiast
    Join Date
    May 2012
    Posts
    28
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I have it now. Thanks for pointing that out.


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
  •