Having a problem with HTML/Javascript - Forms and Expressions.

I am working on a practice assignment for a javascript course I am in.  This is a basic payroll submission form that I coded from finish to end.  I am having some issues with it.  When my tutor runs it, it hijacks his browser (he is using IE 7).  When I use it, I am able to enter information in the fields but it will not accept any input for costs.  My tutor has looked over the code but he is at a loss as to what is missing.  I have looked at it for hours and I now need an extra set of eyes to proof read what I have done.

Can someone take a look at this to see what I may have missed or entered incorrectly?

Thanks alot!
[code]
 
<title>Expense Report</title>
<link href="images/exp.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="functions.js"></script>
<script type="text/javascript">
 
function testLength(field) { // #2 to test whether text has been entered in the required field
   if (field.value.length == 0) {  // a. test whether the length of the field value is equal to 0
   field.style.backgroundColor="yellow";  // b. change the background to yellow and return value to false
   return false;
   }
   else {
   field.style.backgroundColor="white";  // c. change background to white and return value to true
   return true;
   }
}
function testPattern(field, reg) { // #3 compares the value of a field against a regular expression
     if (reg.test(field.value)== false) { // a. does it match?
   field.style.backgroundColor="yellow";  // b. if not change background of field to yellow, change field color to red, and return value to false
   field.style.color="red";
   return false;
   }
   else {
   field.style.backgroundColor="white";  // c. otherwise change background color of field to white, change field to black, and return value to true
   field.style.color="black";
   return true;
   }
}
 
function testDates() {  // #4 checks to make sure a date is entered for the day that employee has recorded an expense
 var dateExists = true;  // a. checks to see if an expense has been entered without a date
  for (i=1;i<=4;i++) {  // b. examines each of the four rows in the travel expenses table.
 if (document.expform.elements["sub"+i].value!=="0.00") {  // c. checks to make sure the subi value is not equal to 0.00
  rowDateExists = testLength(document.expform.elements["date"+i]);  // d. indicates that an expense has been entered
 if (rowDateExists==false) {
  dateExists = false;
 }
   }
   }
 return dateExists;
}
 
function validateForm() {  // #5 validates the form 
   var valid = true;  // a. test to see if the form is valid or not
   if (testLength(document.expform.lname)==false) {  
   valid = false;
   }
   else if (testLength(document.expform.fname)==false) { 
   valid = false;
   }
   else if (testLength(document.expform.address)==false) {
   valid = false;
   }
   else if (testLength(document.expform.summary)==false) {
   valid = false;
   }
   if (testPattern(document.expform.account,/^ACT\d{6}$/)==false) {  // c. calling ACT
   valid = false;
   }
   if (testPattern(document.expform.department,/^DEPT\d{6}$/)==false) {  // d. calling DEPT
   valid = false;
   }
   if (testPattern(document.expform.project,/^PROJ\d{6}$/)==false) {  // e. calling PROJ
   valid = false;
   }
   if (testPattern(document.expform.ssn,/^\d{9}|\d{3}-\d{3}-\d{3}$/)==false) {  // f. calling ssn 
   valid = false;
   }
   if (testDates()==false) {  // g. calling testDates
   valid = false;
   }
   if (valid == false) {
   alert("Please fill out all required fields in the proper format.");  // alert message is called if fields are not filled out
   }
   return valid;
}
 
function calcRow(row) {  // #7 purpose is to return the subtotal of expenses in a single row
   var travel = parseFloat(document.expform.elements["travel"+row].value); // a. row parameter
   var lodge = parseFloat(document.expform.elements["lodge"+row].value);  // .. 
   var meal = parseFloat(document.expform.elements["meal"+row].value);  // ..
   
   return (travel + lodge + meal);  // b. sum of the variables
}
 
function calcTotal() {  // #8 returns the total of all the expenses
   var totalexp = 0; // a. var totalexp created
   for (i=1;i<=4;i++) {
   totalexp += calcRow(i);
   }
   return totalexp;  // b. returns value of totalexp var
}
 
function update(expense) {  // #9 updates the expense values displayed in the table
   var numRegExp = /^\d*(\.\d{0,2})?$/;
   if (numRegExp.test(expense)!==false) {
   (expense.value).toFixed(2);
   for (i=1;i<=4;i++) {
   document.expform.elements["sub"+i].value=calcRow(i).toFixed(2);
   document.expform.total.value=calcTotal().toFixed(2);
   }
   } 
   else {
   alert("Invalid currency value");  // d. alert statement displays message if invalid number is entered
   (expense.value = "0.00");
   expense.focus();
   }
}
</script>
</head>
 
<body>
<div id="links"><img src="images/links.jpg" alt="" /></div>
<div id="main">
<p><img src="images/logo.jpg" alt="DeLong Enterprises" /></p>
<form name="expform" id="expform" method="post" action="done.htm" onsubmit="return validateForm()" > <!-- #6 added the onsubmit feature-->
 
<table cellspacing="2">
<tr>
   <th colspan="5" id="reporttitle">Travel Expense Report</th>
</tr>
<tr>
   <th>Name (Last)<span>*</span></th>
   <th>(First)<span>*</span></th>
   <th>(Initial)</th>
   <th>Account<span>*</span></th>
   <td><input name="account" id="account" /></td>
</tr>
<tr>
   <td><input name="lname" id="lname"/></td>
   <td><input name="fname" id="fname"/></td>
   <td><input name="init" id="init"/></td>
   <th>Department<span>*</span></th>
   <td><input name="department" id="department" /></td>
</tr>
<tr>
   <th>Social Security Number<span>*</span></th>
   <td colspan="2"><input name="ssn" id="ssn" /></td>
   <th>Project<span>*</span></th>
   <td><input name="project" id="project" /></td>
</tr>
</table>
 
<table cellspacing="2">
<tr>
   <th>Send Check to:<span>*</span></th>
   <th>Trip Summary<span>*</span></th>
</tr>
<tr>
   <td>
      <textarea id="address" name="address"></textarea>
   </td>
   <td>
      <textarea id="summary" name="summary"></textarea>
   </td>
</tr>
</table>
 
<table id="traveltable" cellspacing="2">
<tr>
   <th id="datehead">Travel Date<span>*</span></th>
   <th id="travelexphead">Travel Cost</th>
   <th id="traveltypehead">Type</th>
   <th id="lodgeexphead">Lodging</th>
   <th id="mealexphead">Meals</th>
   <th id="subhead">Total</th>
</tr>
<tr><!-- #10 added the onblur="update(this)" on travel 1-4, meal 1-4, lodge 1-4-->
   <td><input name="date1" id="date1" /></td>
   <td><input name="travel1" id="travel1" value="0.00" onblur="update(this)" /></td>
   <td><select name="traveltype1" id="traveltype1">
       <option>air</option>
       <option>auto</option>
       <option>taxi</option>
       <option>train</option>
       </select>
   </td>
   <td><input name="lodge1" id="lodge1" value="0.00" onblur="update(this)" /></td>
   <td><input name="meal1" id="meal1" value="0.00" onblur="update(this)"/></td>
   <td><input name="sub1" id="sub1" value="0.00" readonly="readonly" /></td>
</tr>
<tr>
   <td><input name="date2" id="date2" /></td>
   <td><input name="travel2" id="travel2" value="0.00" onblur="update(this)" /></td>
   <td><select name="traveltype2" id="traveltype2">
       <option>air</option>
       <option>auto</option>
       <option>taxi</option>
       <option>train</option>
       </select>
   </td>
   <td><input name="lodge2" id="lodge2" value="0.00" onblur="update(this)"/></td>
   <td><input name="meal2" id="meal2" value="0.00" onblur="update(this)"/></td>
   <td><input name="sub2" id="sub2" value="0.00" readonly="readonly" /></td>
</tr>
<tr>
   <td><input name="date3" id="date3" /></td>
   <td><input name="travel3" id="travel3" value="0.00" onblur="update(this)" /></td>
   <td><select name="traveltype3" id="traveltype3">
       <option>air</option>
       <option>auto</option>
       <option>taxi</option>
       <option>train</option>
       </select>
   </td>
   <td><input name="lodge3" id="lodge3" value="0.00" onblur="update(this)"/></td>
   <td><input name="meal3" id="meal3" value="0.00" onblur="update(this)"/></td>
   <td><input name="sub3" id="sub3" value="0.00" readonly="readonly" /></td>
</tr>
<tr>
   <td><input name="date4" id="date4" /></td>
   <td><input name="travel4" id="travel4" value="0.00" onblur="update(this)" /></td>
   <td><select name="traveltype4" id="traveltype4">
       <option>air</option>
       <option>auto</option>
       <option>taxi</option>
       <option>train</option>
       </select>
   </td>
   <td><input name="lodge4" id="lodge4" value="0.00" onblur="update(this)"/></td>
   <td><input name="meal4" id="meal4" value="0.00" onblur="update(this)"/></td>
   <td><input name="sub4" id="sub4" value="0.00" readonly="readonly" /></td>
</tr>
<tr>
   <th colspan="5" id="totalhead">TOTAL</th>
   <td><input id="total" name="total" readonly="readonly" value="0.00" /></td>
</tr>
<tr>
   <td colspan="6"><span>* - Indicates a required field</span></td>
</tr>
</table>
 
<p id="psub">
   <input type="submit" value="Submit Report"  />
</p>
 
</form>
</div>
</body>
</html>
 
[/code]

Open in new window

seeminglylostAsked:
Who is Participating?
 
Pawel WitkowskiConnect With a Mentor Senior Javascript DeveloperCommented:
After going trough code I found that:

97:   if (numRegExp.test(expense)!==false) {  

you are testing element, not its value so IE hangs :P

just do:
   if (numRegExp.test(expense.value)!==false) {

98: is not needed because it does nothing (you do not store value of this operation),

0
 
Spy6Commented:
Hi!

In the update function you have the following line :  if (numRegExp.test(expense)!==false) { . I think you need just one equals sign , making the operator != instead of !== . Try that and see if it makes a difference.
0
 
seeminglylostAuthor Commented:
Thanks!

That fixed the hijacking issue in IE!  And it also totals now like it is supposed to!
0
 
seeminglylostAuthor Commented:
Thanks so much!!
0
 
NellCCommented:
I'm having problems with the code below. I need to add the following items to the page but am having problems.  I added the code that you provided but need help with the initPage()

(1) insert the initPage()-purpose is to set up the initial conditions for the exp.htm page
a) declare an array variable named dataFields - points to the input elements in the expense report for daily expenses of travel, lodging, and meals
b)input elements for the daily travel, lodging, meal expenses all belong to the expenseEntry class; use a For loop to populate the contents of the dataFields array w/the object collection of all expenses belonging to the expenseEngry class
c)for each item in the dataFiels array, add an onblur event handler that runs the update()function whenever the focus leaves the dataFielda element
d)add an event handler to the Web form that runs the validateForm() function when the form is submitted to the browswer



[code]
 
 
function testLength(field) { // #2 to test whether text has been entered in the required field
   if (field.value.length == 0) {  // a. test whether the length of the field value is equal to 0
   field.style.backgroundColor="yellow";  // b. change the background to yellow and return value to false
   return false;
   }
   else {
   field.style.backgroundColor="white";  // c. change background to white and return value to true
   return true;
   }
}
function testPattern(field, reg) { // #3 compares the value of a field against a regular expression
     if (reg.test(field.value)== false) { // a. does it match?
   field.style.backgroundColor="yellow";  // b. if not change background of field to yellow, change field color to red, and return value to false
   field.style.color="red";
   return false;
   }
   else {
   field.style.backgroundColor="white";  // c. otherwise change background color of field to white, change field to black, and return value to true
   field.style.color="black";
   return true;
   }
}
 
function testDates() {  // #4 checks to make sure a date is entered for the day that employee has recorded an expense
 var dateExists = true;  // a. checks to see if an expense has been entered without a date
  for (i=1;i<=4;i++) {  // b. examines each of the four rows in the travel expenses table.
 if (document.expform.elements["sub"+i].value!=="0.00") {  // c. checks to make sure the subi value is not equal to 0.00
  rowDateExists = testLength(document.expform.elements["date"+i]);  // d. indicates that an expense has been entered
 if (rowDateExists==false) {
  dateExists = false;
 }
   }
   }
 return dateExists;
}
 
function validateForm() {  // #5 validates the form
   var valid = true;  // a. test to see if the form is valid or not
   if (testLength(document.expform.lname)==false) {  
   valid = false;
   }
   else if (testLength(document.expform.fname)==false) {
   valid = false;
   }
   else if (testLength(document.expform.address)==false) {
   valid = false;
   }
   else if (testLength(document.expform.summary)==false) {
   valid = false;
   }
   if (testPattern(document.expform.account,/^ACT\d{6}$/)==false) {  // c. calling ACT
   valid = false;
   }
   if (testPattern(document.expform.department,/^DEPT\d{6}$/)==false) {  // d. calling DEPT
   valid = false;
   }
   if (testPattern(document.expform.project,/^PROJ\d{6}$/)==false) {  // e. calling PROJ
   valid = false;
   }
   if (testPattern(document.expform.ssn,/^\d{9}|\d{3}-\d{3}-\d{3}$/)==false) {  // f. calling ssn
   valid = false;
   }
   if (testDates()==false) {  // g. calling testDates
   valid = false;
   }
   if (valid == false) {
   alert("Please fill out all required fields in the proper format.");  // alert message is called if fields are not filled out
   }
   return valid;
}
 
function calcRow(row) {  // #7 purpose is to return the subtotal of expenses in a single row
   var travel = parseFloat(document.expform.elements["travel"+row].value); // a. row parameter
   var lodge = parseFloat(document.expform.elements["lodge"+row].value);  // ..
   var meal = parseFloat(document.expform.elements["meal"+row].value);  // ..
   
   return (travel + lodge + meal);  // b. sum of the variables
}
 
function calcTotal() {  // #8 returns the total of all the expenses
   var totalexp = 0; // a. var totalexp created
   for (i=1;i<=4;i++) {
   totalexp += calcRow(i);
   }
   return totalexp;  // b. returns value of totalexp var
}
 
function update(expense) {  // #9 updates the expense values displayed in the table
   var numRegExp = /^\d*(\.\d{0,2})?$/;
   if (numRegExp.test(expense)!==false) {
   (expense.value).toFixed(2);
   for (i=1;i<=4;i++) {
   document.expform.elements["sub"+i].value=calcRow(i).toFixed(2);
   document.expform.total.value=calcTotal().toFixed(2);
   }
   }
   else {
   alert("Invalid currency value");  // d. alert statement displays message if invalid number is entered
   (expense.value = "0.00");
   expense.focus();
   }
}
</script>
</head>
 
<body>
<div id="links"><img src="images/links.jpg" alt="" /></div>
<div id="main">
<p><img src="images/logo.jpg" alt="DeLong Enterprises" /></p>
<form name="expform" id="expform" method="post" action="done.htm" onsubmit="return validateForm()" > <!-- #6 added the onsubmit feature-->
 
<table cellspacing="2">
<tr>
   <th colspan="5" id="reporttitle">Travel Expense Report</th>
</tr>
<tr>
   <th>Name (Last)<span>*</span></th>
   <th>(First)<span>*</span></th>
   <th>(Initial)</th>
   <th>Account<span>*</span></th>
   <td><input name="account" id="account" /></td>
</tr>
<tr>
   <td><input name="lname" id="lname"/></td>
   <td><input name="fname" id="fname"/></td>
   <td><input name="init" id="init"/></td>
   <th>Department<span>*</span></th>
   <td><input name="department" id="department" /></td>
</tr>
<tr>
   <th>Social Security Number<span>*</span></th>
   <td colspan="2"><input name="ssn" id="ssn" /></td>
   <th>Project<span>*</span></th>
   <td><input name="project" id="project" /></td>
</tr>
</table>
 
<table cellspacing="2">
<tr>
   <th>Send Check to:<span>*</span></th>
   <th>Trip Summary<span>*</span></th>
</tr>
<tr>
   <td>
      <textarea id="address" name="address"></textarea>
   </td>
   <td>
      <textarea id="summary" name="summary"></textarea>
   </td>
</tr>
</table>
 
<table id="traveltable" cellspacing="2">
<tr>
   <th id="datehead">Travel Date<span>*</span></th>
   <th id="travelexphead">Travel Cost</th>
   <th id="traveltypehead">Type</th>
   <th id="lodgeexphead">Lodging</th>
   <th id="mealexphead">Meals</th>
   <th id="subhead">Total</th>
</tr>
<tr><!-- #10 added the onblur="update(this)" on travel 1-4, meal 1-4, lodge 1-4-->
   <td><input name="date1" id="date1" /></td>
   <td><input name="travel1" id="travel1" value="0.00" onblur="update(this)" /></td>
   <td><select name="traveltype1" id="traveltype1">
       <option>air</option>
       <option>auto</option>
       <option>taxi</option>
       <option>train</option>
       </select>
   </td>
   <td><input name="lodge1" id="lodge1" value="0.00" onblur="update(this)" /></td>
   <td><input name="meal1" id="meal1" value="0.00" onblur="update(this)"/></td>
   <td><input name="sub1" id="sub1" value="0.00" readonly="readonly" /></td>
</tr>
<tr>
   <td><input name="date2" id="date2" /></td>
   <td><input name="travel2" id="travel2" value="0.00" onblur="update(this)" /></td>
   <td><select name="traveltype2" id="traveltype2">
       <option>air</option>
       <option>auto</option>
       <option>taxi</option>
       <option>train</option>
       </select>
   </td>
   <td><input name="lodge2" id="lodge2" value="0.00" onblur="update(this)"/></td>
   <td><input name="meal2" id="meal2" value="0.00" onblur="update(this)"/></td>
   <td><input name="sub2" id="sub2" value="0.00" readonly="readonly" /></td>
</tr>
<tr>
   <td><input name="date3" id="date3" /></td>
   <td><input name="travel3" id="travel3" value="0.00" onblur="update(this)" /></td>
   <td><select name="traveltype3" id="traveltype3">
       <option>air</option>
       <option>auto</option>
       <option>taxi</option>
       <option>train</option>
       </select>
   </td>
   <td><input name="lodge3" id="lodge3" value="0.00" onblur="update(this)"/></td>
   <td><input name="meal3" id="meal3" value="0.00" onblur="update(this)"/></td>
   <td><input name="sub3" id="sub3" value="0.00" readonly="readonly" /></td>
</tr>
<tr>
   <td><input name="date4" id="date4" /></td>
   <td><input name="travel4" id="travel4" value="0.00" onblur="update(this)" /></td>
   <td><select name="traveltype4" id="traveltype4">
       <option>air</option>
       <option>auto</option>
       <option>taxi</option>
       <option>train</option>
       </select>
   </td>
   <td><input name="lodge4" id="lodge4" value="0.00" onblur="update(this)"/></td>
   <td><input name="meal4" id="meal4" value="0.00" onblur="update(this)"/></td>
   <td><input name="sub4" id="sub4" value="0.00" readonly="readonly" /></td>
</tr>
<tr>
   <th colspan="5" id="totalhead">TOTAL</th>
   <td><input id="total" name="total" readonly="readonly" value="0.00" /></td>
</tr>
<tr>
   <td colspan="6"><span>* - Indicates a required field</span></td>
</tr>
</table>
 
<p id="psub">
   <input type="submit" value="Submit Report"  />
</p>
 
</form>
</div>
</body>
</html>
 
[/code]
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.