Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 5 of 5
  1. #1
    New to the CF scene
    Join Date
    May 2012
    Posts
    5
    Thanks
    1
    Thanked 0 Times in 0 Posts

    document.forms[0 undefined]

    Hi

    I am banging my head against a wall at this point. An assignment I am doing is nearly complete but I keep getting this one error from the Firefox console and Firebug:

    document.forms[0].price is undefined
    [Break On This Error]

    price = document.forms[0].price.iNum;

    Please find below the JS code copied in ()I know its a pain to copy it all, but the last forum I was on they asked for it all. The problem is located within the calcCost function. After this code, I will copy the HTML code.

    Code:
    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();
    	document.forms[0].qty1.focus();
    	document.forms[0].qty1.onblur = calcCost;
        document.forms[0].qty2.onblur = calcCost;
        document.forms[0].qty3.onblur = calcCost;
        document.forms[0].qty4.onblur = calcCost;
        document.forms[0].qty5.onblur = calcCost;
        document.forms[0].qty6.onblur = calcCost;
    	
    	
    	document.forms[0].shipping.onchange = calcShipping;
    }
    
    function productCosts()	{
    	pc1 = parseFloat(document.forms[0].cost1.value);
    	pc2 = parseFloat(document.forms[0].cost2.value);
    	pc3 = parseFloat(document.forms[0].cost3.value);
    	pc4 = parseFloat(document.forms[0].cost4.value);
    	pc5 = parseFloat(document.forms[0].cost5.value);
    	pc6 = parseFloat(document.forms[0].cost6.value);
    
    	return sum(pc1 + pc2 + pc3 + pc4 + pc5 + pc6);
    }
    
    function shipExpense() {
    	sindex = document.forms[0].shipping.selectedIndex;
    	return parseFloat(document.forms[0].shipping[sindex].value);
    }
    
    function calcTotal() {
    	ordercost = productCosts();
    	ordertax = 0.05 * ordercost;
    	ordership = shipExpense();
    	ordertotal = (ordercost + ordertax + ordership);
    	
    	document.forms[0].tax.value = ordertax.toFixed(2);
    	document.forms[0].total.value = ordertotal.toFixed(2);
    }
    
    function calcShipping() {
    	document.forms[0].shipcost.value = shipExpense();
    	
    	calcTotal();
    }
    
    function calcCost() {
    	iNum = this.id.slice(0,3);
    	price = document.forms[0].price.iNum.value;
    	qty = document.forms[0].qty.iNum.value;
    	cost = document.forms[0].cost.iNum.value; //this function is killing me
    	
    	reqty = /\d{1,}$|[^a-zA-Z]$/;
    	if (reqty.test == 0) {
    		cost = (price*qty).toFixed(2);
    		calcTotal();
    		} else
    	    alert("Please enter a digit greater than or equal to 0");
    		qty = 0;
    	    document.forms[0].qty[iNum].focus();
    }	
    
    function validateForm() {
    	if (sIndex == 0) {
            alert("You must select a shipping option.");
            return false;
    	    } else return true;
    }
    
    function resetForm() {
    	location.reload();
    }
    The HTML code:

    Code:
    <title>GPS-ware Order Form</title>
       <link href="gps.css" rel="stylesheet" type="text/css" />
       <script type="text/javascript" src="form.js"></script>
    
    </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>
    Again, I am sorry for the endless code. If this is not required on this forum in future, please let me know, I do not want to waste your time.

    Many thanks for any help.

    John!

  • #2
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    26,014
    Thanks
    79
    Thanked 4,436 Times in 4,401 Posts
    Wrong:
    Code:
    price = document.forms[0].price.iNum;
    Probably right:
    Code:
    price = Number( document.forms[0]["price" + iNum].value );
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #3
    New to the CF scene
    Join Date
    May 2012
    Posts
    5
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Not Right.

  • #4
    Senior Coder xelawho's Avatar
    Join Date
    Nov 2010
    Posts
    2,981
    Thanks
    56
    Thanked 557 Times in 554 Posts
    I think Old Pedant is right, but your additional problem is that your slice is getting all but the first 3 letters of the id, when (if I understand it) you really want just the last one (the number):

    Code:
    iNum = this.id.slice(-1);
    	
    	price = Number(document.forms[0]["price"+iNum].value);
    	qty = Number(document.forms[0]["qty"+iNum].value);
    	cost = Number(document.forms[0]["cost"+iNum].value);
    but then your number validation seems messed up to me, but anyway that may be a start...
    Last edited by xelawho; 05-27-2012 at 11:31 PM.

  • #5
    Senior Coder xelawho's Avatar
    Join Date
    Nov 2010
    Posts
    2,981
    Thanks
    56
    Thanked 557 Times in 554 Posts
    there were a couple of other things, but this seems to work better:

    Code:
    <script type = "text/javascript">
    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();
    	document.forms[0].qty1.focus();
    	document.forms[0].qty1.onblur = calcCost;
        document.forms[0].qty2.onblur = calcCost;
        document.forms[0].qty3.onblur = calcCost;
        document.forms[0].qty4.onblur = calcCost;
        document.forms[0].qty5.onblur = calcCost;
        document.forms[0].qty6.onblur = calcCost;
    	
    	
    	document.forms[0].shipping.onchange = calcShipping;
    }
    
    function productCosts()	{
    	pc1 = parseFloat(document.forms[0].cost1.value);
    	pc2 = parseFloat(document.forms[0].cost2.value);
    	pc3 = parseFloat(document.forms[0].cost3.value);
    	pc4 = parseFloat(document.forms[0].cost4.value);
    	pc5 = parseFloat(document.forms[0].cost5.value);
    	pc6 = parseFloat(document.forms[0].cost6.value);
    
    	return (pc1 + pc2 + pc3 + pc4 + pc5 + pc6);
    }
    
    function shipExpense() {
    	sindex = document.forms[0].shipping.selectedIndex;
    	return parseFloat(document.forms[0].shipping[sindex].value);
    }
    
    function calcTotal() {
    	ordercost = productCosts();
    	ordertax = 0.05 * ordercost;
    	ordership = shipExpense();
    	ordertotal = (ordercost + ordertax + ordership);
    	
    	document.forms[0].tax.value = ordertax.toFixed(2);
    	document.forms[0].total.value = ordertotal.toFixed(2);
    }
    
    function calcShipping() {
    	document.forms[0].shipcost.value = shipExpense();
    	
    	calcTotal();
    }
    
    function calcCost() {
    	iNum = this.id.slice(-1);
    	
    	price = Number(document.forms[0]["price"+iNum].value);
    	qty = Number(document.forms[0]["qty"+iNum].value);
    	cost = Number(document.forms[0]["cost"+iNum].value); //this function is killing me
    	
    		if (qty>=0) {
    		document.forms[0]["cost"+iNum].value = (price*qty).toFixed(2);
    		calcTotal();
    		} else{
    	    alert("Please enter a digit greater than or equal to 0");
    		document.forms[0]["qty"+iNum].value = 0;
    	    document.forms[0]["qty"+iNum].focus();
    		}
    }	
    
    function validateForm() {
    	if (sIndex == 0) {
            alert("You must select a shipping option.");
            return false;
    	    } else return true;
    }
    
    function resetForm() {
    	location.reload();
    }
    </script>
    Last edited by xelawho; 05-27-2012 at 11:31 PM.

  • Users who have thanked xelawho for this post:

    johnmac81 (05-30-2012)


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •