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
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.
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?
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.
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?
I changed all the script fields to:
<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??
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:
}
return true;
}
</script>
Not sure if that’s your whole problem, but it’s a good start.
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
Here’s the whole blasted thing again just so you’re looking at what I’m looking at…
<!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 |
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:
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…
Roger that. Didn’t know. My apologies.
I’ll try that now.
<!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 |
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="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>
</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" 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 |
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>
I have it now. Thanks for pointing that out.