TR Forums

Trellot · Wed Apr 01, 2009 1:11 pm

I posted this at the end of my Selection Lists post, but thought it probably would be better to separate them.

If I'm referencing just input fields, how is this different from selection lists and such? I'm trying to create this function to display the cost of the quantity of items ordered by a customer and to update the total cost of the order. It then tests whether the customer has correctly entered an integer in one of the quantity fields. The price of each item is stored in the price1, price2, etc. fields, the qty in the qty1, qty2 fields and the cost in the cost1, cost2, etc. fields respectively. My calcCost(item) function is giving me headaches at this point. The other functions seem to be fine.

 function calcCost(item){
  var price = document.orders.elements[item].value;               //            I'm having trouble referencing these
  var qty = document.orders.elements[item].value;                 //                      three
  var cost = document.orders.elements[item].value;               //                                elements
  var reqty = /[0-9]/g;
  if (reqty.test(qty)){
    cost = (price*qty).toFixed(2);
    calcTotal();
  }else{
    {alert("Please enter a digit greater than or equal to 0");}
    qty = 0;
    document.orders.qty.focus();
    document.orders.qty.select();
    calcCost(item);
  }
}

and I'm trying to reference this:

<html>
<head>

<title>GPS-ware Order Form</title>
<link href="gps.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="functions.js"></script>
<script type="text/javascript">
function setDate(){
  document.orders.date.value = todayTxt();
  document.orders.qty1.focus();
  document.orders.qty1.select();
}
function productCosts(){
  var pc1 = parseFloat(document.orders.cost1.value);
  var pc2 = parseFloat(document.orders.cost2.value);
  var pc3 = parseFloat(document.orders.cost3.value);
  var pc4 = parseFloat(document.orders.cost4.value);
  var pc5 = parseFloat(document.orders.cost5.value);
  var pc6 = parseFloat(document.orders.cost6.value);
  return pc1+pc2+pc3+pc4+pc5+pc6;
}
function shipExpense(){
  var sindex = document.orders.shipping.selectedIndex;
  return parseFloat(document.orders.shipping.options[sindex].value);
}
function calcTotal(){
  var ordercost = productCosts();
  var ordertax = 0.05*(ordercost);
  var ordership = shipExpense();
  var ordertotal = ordercost+ordertax+ordership;
  document.orders.tax.value = ordertax.toFixed(2);
  document.orders.total.value = ordertotal.toFixed(2);
}
function calcShipping(){
  document.orders.shipcost.value = shipExpense();
  calcTotal();
}
function calcCost(item){
  var price = document.orders.elements[item.selectedIndex].value;
  var qty = document.orders.elements[item.selected].value;
  var cost = document.orders.elements[item.selected].value;
  var reqty = /[0-9]/g;
  if (reqty.test(qty)){
    cost = (price*qty).toFixed(2);
    calcTotal();
  }else{
    {alert("Please enter a digit greater than or equal to 0");}
    qty = 0;
    document.orders.qty.focus();
    document.orders.qty.select();
    calcCost(item);
  }
}
function validateForm(){
  if (document.orders.shipping.selectedIndex == 0)
    {alert("You must select a shipping option"); return false;}
    else return true;
}
</script>
</head>

<body onload="setDate()">
<form name="orders" id="orders" method="post" action="done.htm" onsubmit="return validateForm()"
      onreset="location.reload()">

<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 order 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" onblur="calcCost(1)" />
   </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" onblur="calcCost(2)" />
   </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" onblur="calcCost(3)" />
   </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" onblur="calcCost(4)" />
   </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" onblur="calcCost(5)" />
   </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" onblur="calcCost(6)" />
   </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" onchange="calcShipping()">
          <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>

</form>
</body>
</html>

Trellot

steelcity_ballin · Wed Apr 01, 2009 1:20 pm

Use this isntead, document.form.element.value is antiquated:

document.getElementById("element_ID_Name").value

Obviously use your real id name, but that will let you set or get the value of a textbox.

Trellot · Wed Apr 01, 2009 1:40 pm

steelcity_ballin wrote:
Use this isntead, document.form.element.value is antiquated:
Code: Select all
document.getElementById("element_ID_Name").value
Obviously use your real id name, but that will let you set or get the value of a textbox.

If I do it like this:

var price = document.getElementById("price1").value;
var qty = document.getElementById("qty1").value;
var cost = document.getElementById("cost1").value;

I'm getting an "Object doesn't support this property or method" error. Am I passing the wrong id...what about my item variable, does it get passed in somewhere? Thanks for the assistance, btw.

Trellot

lordT · Wed Apr 01, 2009 1:45 pm

If at all possible, try using a JavaScript framework. I recommend jQuery. $('#id').val(); is so much easier to read and debug.

Trellot · Wed Apr 01, 2009 2:26 pm

lordtottuu wrote:
If at all possible, try using a JavaScript framework. I recommend jQuery. $('#id').val(); is so much easier to read and debug.

Well, I don't think we are at that point in this course. Right now, we're referencing form elements. For this particular function, I'm supposed to use this format: document.form.elements[].value.
I'm having trouble referencing these input fields using said format. I have a variable named "item" that I think I need to pass into the function.

Trellot

steelcity_ballin · Thu Apr 02, 2009 5:59 am

Ok, simple example time. Make a very barebones page, get this to work. Add a button to call a function that runs the javascript.

//alert my textbox value, I purposely named the element different from it's id.
alert(document.getElementById("tb1").value)

<input type="text" name="textbbox1" id="tb1" value="TEST">

Trellot · Fri Apr 03, 2009 1:35 pm

Thanks for all the replies, everyone. Here's the fix for my function:

The bad function that I had initially:

function calcCost(item){
  var price = document.orders.elements[item].value;
  var qty = document.orders.elements[item].value;
  var cost = document.orders.elements[item].value;
  var reqty = /[0-9]/g;
  if (reqty.test(qty)){
    cost = (price*qty).toFixed(2);
    calcTotal();
  }else{
    {alert("Please enter a digit greater than or equal to 0");}
    qty = 0;
    document.orders.qty.focus();
    document.orders.qty.select();
    calcCost(item);
  }
}

The corrected code:

function calcCost(item) {
  oform=document.orders;
  price=oform.elements["price"+item];
  qty=oform.elements["qty"+item];
  cost=oform.elements["cost"+item];

  var reqty = /^\d+$/;
  if (reqty.test(qty.value)){
    cost.value = (price.value*qty.value).toFixed(2);
    calcTotal();
  }else{
    alert("Please enter a digit greater than or equal to 0");
    qty.value = 0;
    qty.focus();
    qty.select();
    calcCost(item);
  }
}

Now my page is working.

Trellot

TR Forums

JavaScript and Text Fields

JavaScript and Text Fields

Re: JavaScript and Text Fields

Re: JavaScript and Text Fields

Re: JavaScript and Text Fields

Re: JavaScript and Text Fields

Re: JavaScript and Text Fields

Re: JavaScript and Text Fields

Who is online