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 don’t see any way to attach the file, so I hope it’s okay to copy and paste the code into the bottom of this message. I apologize in advance if that’s an issue.
Rick
<!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.forms["order"]["lastname"].value;
if (x==null || x=="")
{
alert("Last name must be filled out");
return false;
}
var x=document.forms["order"]["firstname"].value;
if (x==null || x=="")
{
alert("First name must be filled out");
return false;
}
var x=document.forms["order"]["address"].value;
if (x==null || x=="")
{
alert("Street address must be filled out");
return false;
}
var x=document.forms["order"]["city"].value;
if (x==null || x=="")
{
alert("City name must be filled out");
return false;
}
var x=document.forms["order"]["zip"].value;
if (x==null || x=="")
{
alert("Zip code must be filled out");
return false;
}
var x=document.forms["order"]["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.forms["order"]["cardnum"].value;
if (x==null || x=="")
{
alert("Credit card number must be filled out");
return false;
}
var x=document.forms["order"]["securitycode"].value;
if (x==null || x=="")
{
alert("Security must be filled out");
return false;
}
var x=document.forms["order"]["bzip"].value;
if (x==null || x=="")
{
alert("Billing zip code must be filled out");
return false;
}
}
</script>
</head>
<body>
<div id="container">
<p><img class="topbanner" src="kudlerbanner.jpg" alt="Kudler Fine Foods!"></p>
<h2>
HOME |
BAKERY |
MEAT & SEAFOOD |
PRODUCE |
CHEESE & 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 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="textfield" type="text" id="fname" maxlength="30" >
</p>
<p class="normal">
<label for="lname">*Last Name:</label>
<input name="textfield" type="text" id="lname" maxlength="30" >
</p>
<p class="multi_field">
<label for="address">*Street Address:</label>
<input name="textfield" type="text" id="street" maxlength="40" >
</p>
<p class="normal">
<label for="city">*City:</label>
<input name="textfield" 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="textfield" type="text" id="zip" maxlength="5" >
</p>
<p class="multi_field">
<label for="email">*Email Address:</label>
<input name="textfield" 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>
Qty: <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>
Qty: <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>
Qty: <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 & 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>
Qty: <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>
Qty: <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" type="text" size="20" ><br ><br >
<label>*Security Code: </label><input name="securitycode" type="text" size="6" ><br ><br >
<label>*Billing ZIP Code: </label><input name="bzip" type="text" size="10" ><br ><br>
<label>Your Order Total With Tax and Shipping:</label><input name="ordertotal" type="text" size="10" ><br ><br >
<p>
<input name="Submit" type="submit" value="Submit" >
<input name="Reset" type="reset" value="Reset" >
</p>
</div>
</div>
</form>
</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 |
BAKERY |
MEAT & SEAFOOD |
PRODUCE |
CHEESE & DAIRY |
WINE |
<a href="index.html">ORDERING</a> |
CONTACT US |
SITE MAP |
</h5>
<h6 style="text-align:right">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>