I have this function that seems not to be working. If I click on the send order button and the first name field is not filled, it should say first name not entered. But it's not. I put comment in the javascript where I'm tring to fix.
Thanks in advance.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script type="text/javascript">
function formValidator(){
/// this var is not working and don't know why
var firstName = document.getElementById('firstname').value;
if (firstName == "") {
document.getElementById('firstAl').innerHTML = "first name not entered";
}
else {
document.getElementById('firstAl').innerHTML = "";
}
//pay no attention to script below//
var lastName = document.getElementById('lastname').value;
if (lastName == ""){
alert("last name not entered");
}
var streetNumber = document.getElementById('streetnumber').value;
if (streetNumber == ""){
alert("street number not entered");
}
var streetname = document.getElementById('streetname').value;
if (streetNamme == ""){
alert("street name not entered");
}
var city = document.getElementById('city').value;
if (city == ""){
alert("city name not entered");
}
var postalCode = document.getElementById('postalcode').value;
if (postalCode == ""){
alert("postal code not entered");
}
var phoneNumbera = document.getElementById('phonenumbera').value;
if (phoneNumbera == ""){
alert("phone number not entered");
}
var phoneNumberb = document.getElementById('phonenumberb').value;
if (phoneNumberb == ""){
alert("phone number not entered");
}
var email = document.getElementById('email').value;
if (email == ""){
alert("email not entered");
}
var submit = document.getElementById('submit').value;
}
function comments()
{
(document.getElementById("comments").value);
}
//// next step of javascript to work on after
function addTotal() {
document.getElementById("hamSub").value = 2.99 * document.getElementById("hamQuant").value;
}
function howtoget(){
var pickup = document.getElementById("pickup").checked==true
if (pickup == "")
alert("Your food will be delivered in 20 minutes");
}
function sendOrder() {
alert('You have not ordered anything yet');
formValidator();
document.getElementById('send').reset();
}
</script>
</head>
<body>
<form>
<center>
<B>The JavaScript Eatery
</center>
<form>
<table align="center" border="1">
<tbody>
<tr>
<td><center>
<b>vital information</b>
</center>
<table>
<tbody>
<tr>
<td width="121">first name</td>
<td width="289"><input type="text" size="15" maxlength="50" id="firstname"><br /><div id="firstAl"></div></td>
</tr>
<tr>
<td>last name</td>
<td><input type="text" size="15" maxlength="50" id="lastname"></td>
</tr>
<tr>
<td>street number</td>
<td><input type="text" size="40" maxlength="35" id="streetnumber"></td>
</tr>
<tr>
<td>street name</td>
<td><input type="text" size="40" maxlength="35" id="streetname"></td>
</tr>
<tr>
<td>city</td>
<td><input type="text" size="25" maxlength="21" id="city"></td>
</tr>
<tr>
<td>postal code</td>
<td><input type="text" size="25" maxlength="21" id="postalcode"></td>
</tr>
<tr>
<td>phone number</td>
<td><input id="phonenumbera" size="4" />
-
<input id="phonenumberb" size="5" /></td>
</tr>
<tr>
<td>email address</td>
<td><input type="text" size="15" id="email"></td>
</tr>
</tbody>
</table></td>
<td width="266" valign="top"><p> </p>
<p> </p>
<p><b>comments / special request</b><br />
<textarea rows="10" cols="35"id="comments" ></textarea>
</td>
</tr>
</tbody>
</table>
<hr />
<table width="90%">
<tbody>
<tr>
<td><table>
<tbody>
<tr>
<th>item</th>
<th>price</th>
<th>quantity</th>
<th>sub-total</th>
</tr>
<tr align="middle">
<td align="left">Hamberger</td>
<td><input id="hamburger" size="7" value="$2.99" /></td>
<td><input id="hamQuant" size="3" /></td>
<td><input id="hamSub" size="6" /></td>
</tr>
<tr align="middle">
<td align="left">Cheeseburger</td>
<td><input size="7" value="$3.99" /></td>
<td><input size="3" /></td>
<td><input size="6" /></td>
</tr>
<tr align="middle">
<td align="left">Chicken Burger</td>
<td><input size="7" value="$4.99" /></td>
<td><input size="3" /></td>
<td><input size="6" /></td>
</tr>
</tbody>
</table></td>
<td align="right"><table>
<tbody>
<tr>
<th>item</th>
<th>price</th>
<th>quantity</th>
<th>sub-total</th>
</tr>
<tr align="middle">
<td align="left">French Fries</td>
<td><input size="7" value="$2.99" /></td>
<td><input size="3" /></td>
<td><input size="6" /></td>
</tr>
<tr align="middle">
<td align="left"><input type="checkbox" />
gravy</td>
<td><input size="7" value="$0.50" /></td>
<td><input size="3" /></td>
<td><input size="6" /></td>
</tr>
<tr align="middle">
<td align="left"><input type="checkbox" />
chilli</td>
<td><input size="7" value="$1.99" /></td>
<td><input size="3" /></td>
<td><input size="6" /></td>
</tr>
</tbody>
</table></td>
</tr>
<tr>
<td colspan="2"><table align="center">
<tbody>
<tr>
<td>subtotal</td>
<td><input size="6" /></td>
</tr>
<tr>
<td>pst 7%</td>
<td><input size="6" /></td>
</tr>
<tr>
<td>gst 5%</td>
<td><input size="6" /></td>
</tr>
<tr>
<td>total</td>
<td><input size="6" /></td>
</tr>
<tr>
<td colspan="2"><input type="button" value="total up order" onclick="addTotal()" />
</td>
</tr>
</tbody>
</table></td>
</tr>
</tbody>
</table>
<hr />
<table width="80%" align="center">
<tbody>
<tr>
<td><table>
<tbody>
<tr align="middle">
<td>Payment</td>
<td>card number</td>
<td>expiration mm/yy</td>
</tr>
<tr align="middle">
<td><select>
<option selected="selected">cash</option>
<option>master card</option>
<option>visa</option>
</select>
</td>
<td><input />
</td>
<td><select>
<option selected="selected">01</option>
<option>02</option>
<option>03</option>
<option>04</option>
<option>05</option>
<option>06</option>
<option>07</option>
<option>08</option>
<option>09</option>
<option>10</option>
<option>11</option>
<option>12</option>
</select>
<select>
<option selected="selected">03</option>
<option>04</option>
<option>05</option>
<option>06</option>
<option>07</option>
<option>08</option>
<option>09</option>
</select>
</td>
</tr>
</tbody>
</table></td>
<td align="middle"><table>
<tbody>
<tr>
<td><input type="radio" NAME="radio" value="Your food will be ready for pickup in 10 minutes" id="pickup" onClick="alert(value)"></td>
<td>pickup</td>
</tr>
<tr>
<td><input type="radio" NAME="radio" value="Your food will be ready for delivery in 20 minutes" id="delivery" onClick="alert(value)"></td>
<td>delivery</td>
</tr>
<tr>
<td><input type="radio" NAME="radio" value="Your table will be ready in 5 minutes" id="eatin" onClick="alert(value)"></td>
<td>eat in</td>
</tr>
</tbody>
</table></td>
</tr>
</tbody>
</table>
<center>
<input type="reset" id="cancel" name="clear" value="clear order"/>
<input type="button" id="send" value="send order" onclick="sendOrder()" />
</center>
</form>
<p> </p>
<p><asp:Content ID="Content1" ContentPlaceHolderID="ContentPlaceHolder1" Runat="Server"></asp:Content></p>
<p> </p>
</form>
</body>
</html>