?
Solved

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

Posted on 2009-04-26
5
Medium Priority
?
2,623 Views
Last Modified: 2013-11-19
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

0
Comment
Question by:seeminglylost
5 Comments
 
LVL 4

Expert Comment

by:Spy6
ID: 24239658
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
 
LVL 18

Accepted Solution

by:
Pawel Witkowski earned 1000 total points
ID: 24239740
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
 

Author Comment

by:seeminglylost
ID: 24246665
Thanks!

That fixed the hijacking issue in IE!  And it also totals now like it is supposed to!
0
 

Author Closing Comment

by:seeminglylost
ID: 31574815
Thanks so much!!
0
 

Expert Comment

by:NellC
ID: 33900144
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

Featured Post

Free Tool: Subnet Calculator

The subnet calculator helps you design networks by taking an IP address and network mask and returning information such as network, broadcast address, and host range.

One of a set of tools we're offering as a way of saying thank you for being a part of the community.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Styling your websites can become very complex. Here I'll show how SASS can help you better organize, maintain and reuse your CSS code.
Originally, this post was published on Monitis Blog, you can check it here . In business circles, we sometimes hear that today is the “age of the customer.” And so it is. Thanks to the enormous advances over the past few years in consumer techno…
The viewer will learn how to create and use a small PHP class to apply a watermark to an image. This video shows the viewer the setup for the PHP watermark as well as important coding language. Continue to Part 2 to learn the core code used in creat…
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…
Suggested Courses

864 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question