5 Replies - 1629 Views - Last Post: 20 July 2012 - 11:15 AM

#1 Griffinw29  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 7
  • Joined: 01-February 12

Help with Order form

Posted 28 February 2012 - 06:16 PM

Hello all!
I seem to be having trouble getting my homework correct. In this assignment i have to set an order form so that when a user opens the form a date should appear i the date field. When a new quantity is entered in the quantity column the cost should automatically update. Anything other than digits entered should result in an error and the value entered should reset to zero. When a shipping option is selected the total cost should automatically be updated to reflect the shipping price. And the form cannot be submitted unless a shipping option is chosen.

I am getting no errors in Firefox w/ firebug on, IE, or Chrome so that is what has me stumped thus far, i am not very experienced with JS so i have no idea where to look next.

Here is the HTML
<!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>
<!-- 
   New Perspectives on Javascript, 2nd Edition
   Tutorial 5
   Review Assignment

   GPS-ware Order Form
   Author:  Will Griffin
   Date:    2/27/12

   Filename:         order.htm
   Supporting files: gps.css, gpsware.jpg, form.js

-->
   <title>GPS-ware Order Form</title>
   <link href="gps.css" rel="stylesheet" type="text/css" />
   <script src="form.js" type="text/javascript"></script>
   <script type="javascript">

</head>

<body>
<form id="orders" method="post" action="done.htm">

   <div id="links">
      <a href="#" class="newgroup">Home Page</a>
      <a href="#">Product Catalog</a>
      <a href="#">Order Form</a>
      <a href="#">Maps Online</a>
      <a href="#">Contact Us</a>
      <a href="#" class="newgroup">Countries</a>
      <a href="#">States</a>
      <a href="#">National Parks</a>
      <a href="#">Hiking Trails</a>
      <a href="#">Cities</a>
      <a href="#">Astronomical</a>
      <a href="#">Natural</a>
      <a href="#" class="newgroup">GoMap 1.0</a>
      <a href="#">Drive Planner 2.0</a>
      <a href="#">Hiker 1.0</a>
      <a href="#">G-Receiver I</a>
      <a href="#">G-Receiver II</a>
      <a href="#">G-Receiver III</a>
      <a href="#" class="newgroup">Downloads</a>
      <a href="#">Tech Support</a>
      <a href="#">FAQs</a>
   </div>

   <div id="main">
      <p id="logo"><img src="gpsware.jpg" alt="GPS-ware" /></p>
      <h1>Order Form</h1>
      <p id="datep">
         <input class="text" id="date" name="date" size="11" value="mm-dd-yyyy" 
          tabindex="-1" readonly="readonly" />
      </p>

   <fieldset>
      <legend>Enter the quantity of each item and press the Tab key</legend>
      <table cellspacing="2">
         <tr><th class="label">Product</th><th>Price</th>
             <th>Quantity</th><th>Cost</th></tr>
         <tr>
             <td class="label">GoMap 1.0</td>
             <td><input name="price1" id="price1" size="8" value="19.95" 
                 tabindex="-1" readonly="readonly" />
             </td>
             <td><input name="qty1" id="qty1" size="8" value="0" />
             </td>
             <td><input name="cost1" id="cost1" size="12" value="0.00" 
              tabindex="-1" readonly="readonly" />
             </td>
         </tr>
         <tr>
             <td class="label">Drive Planner 2.0</td>
             <td><input name="price2" id="price2" size="8" value="29.95" 
              tabindex="-1" readonly="readonly" />
             </td>
             <td><input name="qty2" id="qty2" size="8" value="0" />
             </td>
             <td><input name="cost2" id="cost2" size="12" value="0.00" 
              tabindex="-1" readonly="readonly" />
             </td>
         </tr>
         <tr>
             <td class="label">Hiker 1.0</td>
             <td><input name="price3" id="price3" size="8" value="29.95" 
              tabindex="-1" readonly="readonly" /></td>
             <td><input name="qty3" id="qty3" size="8" value="0" />
             </td>
             <td><input name="cost3" id="cost3" size="12" value="0.00" 
              tabindex="-1" readonly="readonly" />
             </td>
         </tr>
         <tr>
             <td class="label">G-Receiver I</td>
             <td><input name="price4" id="price4" size="8" value="149.50" 
              tabindex="-1" readonly="readonly" /></td>
             <td><input name="qty4" id="qty4" size="8" value="0" />
             </td>
             <td><input name="cost4" id="cost4" size="12" value="0.00" 
              tabindex="-1" readonly="readonly" />
             </td>
         </tr>
         <tr>
            <td class="label">G-Receiver II</td>
            <td><input name="price5" id="price5" size="8" value="199.50" 
              tabindex="-1" readonly="readonly" /></td>
            <td><input name="qty5" id="qty5" size="8" value="0" />
            </td>
            <td><input name="cost5" id="cost5" size="12" value="0.00" 
              tabindex="-1" readonly="readonly" />
            </td>
         </tr>
         <tr>
            <td class="label">G-Receiver III</td>
            <td><input name="price6" id="price6" size="8" value="249.50" 
              tabindex="-1" readonly="readonly" /></td>
            <td><input name="qty6" id="qty6" size="8" value="0" />
            </td>
            <td><input name="cost6" id="cost6" size="12" value="0.00" 
              tabindex="-1" readonly="readonly" />
            </td>
         </tr>
         <tr><td class="col4" colspan="4">&nbsp;</td></tr>
         <tr>
            <td class="col3" colspan="3">Sales Tax (5%)</td>
            <td><input name="tax" id="tax" size="12" value="0.00" 
              tabindex="-1" readonly="readonly" />
            </td>
         </tr>
         <tr>
            <td class="col3" colspan="3">
                <select id="shipping" name="shipping">
                <option value="0">Choose a shipping option</option>
                <option value="4.95">Standard (4-6 business days) $4.95</option>
                <option value="8.95">Express (2 days) $8.95</option>
                <option value="12.95">Next Day (1 day) $12.95</option>
                </select>
            </td>
            <td><input name="shipcost" id="shipcost" value="0.00" size="12" 
              tabindex="-1" readonly="readonly" />
            </td>
         </tr>
         <tr>
            <td class="col3" colspan="3">TOTAL</td>
            <td><input name="total" id="total" size="12" value="0.00" 
              tabindex="-1" readonly="readonly" />
            </td>
         </tr>
      </table>
      </fieldset>
  
      <p id="pbuttons">
         <input type="reset" value="Reset" />
         <input type="submit" value="Submit Order" />
      </p>

   </div>

   </form>

</body>
</html>


The Javascript file:
/*
   New Perspectives on Javascript, 2nd Edition
   Tutorial 5
   Review Assignment

   Author:   Will Griffin
   Date:     2/27/12

   Filename: form.js



   Functions List:

   todayTxt()
      Returns the current date in the format mm-dd-yyyy

   initForm()
      Sets up and initializes the Web form.

   productCosts()
      Returns the total product costs

   shipExpense()
      Stores the value of the selected shipping option

   calcTotal()
      Calculates the total cost of the order

   calcShipping()
      Calculates the total cost of shipping and updates the
      total cost of the order

   calcCost()
      Calculates the cost of each order and updates the total 
      cost

   validateForm()
      Validates the form prior to submission

   resetForm()
      Resets the Web form and Web page


*/
window.onload=initForm;

function todayTxt() {
   var Today=new Date();
   return Today.getMonth()+1+"-"+Today.getDate()+"-"+Today.getFullYear();
}

function initForm() {
   document.forms[0].date.value = todayTxt();
   formObject.element.focus(qty1);
   
   formObject.element.blur(qty1);
   formObject.element.blur(qty2);
   formObject.element.blur(qty3);
   formObject.element.blur(qty4);
   formObject.element.blur(qty5);
   formObject.element.blur(qty6);
   
   document.forms[0].onchange = calcShipping();
   }
   
function productCosts() {
   var pc1 = parseFloat(document.forms[0].cost1);
   var pc2 = parseFloat(document.forms[0].cost2);
   var pc3 = parseFloat(document.forms[0].cost3);
   var pc4 = parseFloat(document.forms[0].cost4);
   var pc5 = parseFloat(document.forms[0].cost5);
   var pc6 = parseFloat(document.forms[0].cost6);
   
   var sum= pc1+pc2+pc3+pc4+pc5+pc6;
   return sum;
   }// end of the productionCosts function
   
function shipExpense() {
   var sindex = document.forms[0].ship.value = selectedIndex;
   var shipPrice = parseFloat(sindex);
   return shipPrice;
   }//end of the shipExpense function
   
function calcTotal() {
   var orderCost = productCosts():
   var orderTax = orderCost*.05;
   var orderShip = shipExpense();
   var orderTotal = orderCost+orderTax+orderShip;
   
   document.form[0].tax.value = orderTax.toFixed(2);
   document.form[0].total.value  = orderTotal.toFixed(2);
   }//end of the calcTotal function
   
function calcShipping() {
   document.form[0].shipcost.value = shipExpense();
   calctotal();
   }//end of the calcShipping function
   
function calcCost() { 
   var iNum = document.getElementById();
   var price = document.form[0].elements["price"+iNum].value;
   var qty = document.form[0].elements["qty"+iNum].value;
   var cost = document.form[0].elements["cost"+iNum];
   
   reqty = /[0-9]/g;
   if (reqty.test(qty)) {
        cost.value = (price*qty).toFixed(2);
        calcTotal();
        }else{
            alert("Please enter a digit greater than or equal to 0");
            qty=0;
            document.getElementById("qty"+1).focus();
            document.getElementById("qty"+1).focus();
            
            }
        }//end the caclCost function
        
function validateForm() {
   if (document.forms[0].shipping.selectedIndex ==0);
        alert("You must select a shipping option");
       { return false;}
        else {return true;}
        }//end of the validateForm function
        
function resetForm() {
   

I know i have yet to do the resetForm function, but i thought i would post on here before i went any further.

And the CSS:
/*
   New Perspectives on Javascript, 2nd Edition
   Tutorial 5
   Review Assignment
   Filename: gps.css

   This file contains styles used in the order.htm file.

*/

body {background-image: url(border.jpg); background-position:left; 
      background-repeat: repeat-y; margin-top:0; padding-top:0}

#links {position: absolute; top: 5px; left: 0px; width: 90px;  
        font-family:Arial, Helvetica, sans-serif; font-size:8pt}

#links a {color:black; text-decoration:none; display: block; margin-left: 10px}
#links a.newgroup {margin-top: 10px}
#links a:hover {color:blue; background-color: white}

#main {position: absolute; top: 5px; left: 120px; width: 530px}
#logo {border-bottom: 2px solid rgb(222,179,126); margin-bottom: 0px}
#main h1 {font-family: Arial, Helvetica, sans-serif; letter-spacing: 7;
          margin-top: 0px; margin-bottom: 0px}
#datep {text-align: right; color: brown; font-size: 8pt; margin: 0px;
        font-family: Arial, Helvetica, sans-serif}
#datep input {text-align: center}

table {width: 520px; font-size: 9pt; margin: 5px}
th {font-family: Arial, Helvetica, sans-serif; text-align: right; padding: 3px;
    background-color: rgb(228,197,166); letter-spacing: 3; font-weight: normal}
th.label {text-align: left}
td {font-size:9pt; font-family: Arial, Helvetica, sans-serif;  
    text-align: right}
.label {text-align: left}
td.col3 {text-align: right; color: brown}
td.col4 {border-bottom: 1px solid rgb(102,102,102)}

legend {font-family: Arial, Helvetica, sans-serif; font-size: 8pt; color: brown}
input {text-align: right; font-size: 9pt}
select {font-size: 9pt}
#total {background-color: ivory}


#pbuttons {text-align: center; margin-top: 5px}
#pbuttons input {margin: 0px 10px; background-color: rgb(228,197,166);
                 letter-spacing: 2; width: 120px; text-align: center}


I know i am not very experienced and it may just be something small iam not seeing. I just need to be pointed in the right direction. Thanks in advance for all of your help and support!

Is This A Good Question/Topic? 0
  • +

Replies To: Help with Order form

#2 hiddenghost  Icon User is offline

  • D.I.C Addict
  • member icon

Reputation: 39
  • View blog
  • Posts: 621
  • Joined: 15-December 09

Re: Help with Order form

Posted 28 February 2012 - 11:04 PM

What's the problem exactly?

I'm not that experienced with js either, but I see no one else has replied yet so I can give it a try.


I can't see much yet, except you have a hanging function down at the bottom of your js called:
function resetForm() {

You may want to break the code down and do unit tests.
Start with the smallest or simplest functions and work your way up.

For instance test the todayTxt function first.
Then test the shipping expense.
Copy each function out and test it on some different html than what you have there.
Once you have some working functions compare them to what's in your broken script and change accordingly.
Divide and conquer that $#)!
Was This Post Helpful? 0
  • +
  • -

#3 Griffinw29  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 7
  • Joined: 01-February 12

Re: Help with Order form

Posted 28 February 2012 - 11:39 PM

Thanks for the reply! My original problem is that when i load the page onto the browser the order forms do not respond. Such as when you enter a number for the quantity the price is supposed to automatically update but it does not. It is like the changes i have made to the file are not registering at all.

And i tried loading the code onto an existing HTML file and nothing rendered, also i tried adding
alerts after each function and still nothing would happen.
Was This Post Helpful? 0
  • +
  • -

#4 hiddenghost  Icon User is offline

  • D.I.C Addict
  • member icon

Reputation: 39
  • View blog
  • Posts: 621
  • Joined: 15-December 09

Re: Help with Order form

Posted 29 February 2012 - 01:42 AM

What?

Oh you did say you have yet to do the reset function. Sorry.

Ok, one thing at a time.

selectedIndex is a property in the DOM.

It needs to be yourDomObject.selectedIndex;
not yourDomObject = selectedIndex;
Was This Post Helpful? 0
  • +
  • -

#5 hiddenghost  Icon User is offline

  • D.I.C Addict
  • member icon

Reputation: 39
  • View blog
  • Posts: 621
  • Joined: 15-December 09

Re: Help with Order form

Posted 29 February 2012 - 01:50 AM

You can't just put cost1 after another object.
You'll have to use document.getElementById('cost1'); to get the data or update it.

Try to comment out all the code that isn't working and test one function at a time.
Was This Post Helpful? 0
  • +
  • -

#6 damian29  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 1
  • Joined: 20-July 12

Re: Help with Order form

Posted 20 July 2012 - 11:15 AM

To the OP... did you ever get the full solution for this? I was hoping to see what you came up with as I am having issues and have it as part of my course as well.

Damian
Was This Post Helpful? 0
  • +
  • -

Page 1 of 1