Personal computing discussed

Moderators: SecretSquirrel, just brew it!

 
Trellot
Gerbil Team Leader
Topic Author
Posts: 298
Joined: Sat Dec 18, 2004 1:01 am
Location: California

JavaScript and Text Fields

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
-ASRock Z68 Extreme3 Gen3 LGA 1155 Intel Z68 / Intel Core i5-2500K
-XFX Radeon HD 7970 3072MB, GDDR5, PCI-Express 3.0
-Corsair Enthusiast Series TX850 V2 PSU / Corsair 600T case
-G.SKILL Ripjaws X Series 16GB / Hitachi Deskstar 750GB
 
steelcity_ballin
Gerbilus Supremus
Posts: 11969
Joined: Mon May 26, 2003 5:55 am
Location: Pittsburgh PA

Re: JavaScript and Text Fields

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.
Corsair 600T | ASUS P8P67 PRO | Intel 2500k @ 4.4Ghz | Asus 970GTX | G.SKILL Ripjaws Series 8GB | Corsair HX650 650W | Asus ROG Swift Gsync 27"
 
Trellot
Gerbil Team Leader
Topic Author
Posts: 298
Joined: Sat Dec 18, 2004 1:01 am
Location: California

Re: JavaScript and Text Fields

Wed Apr 01, 2009 1:40 pm

steelcity_ballin wrote:
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.

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
-ASRock Z68 Extreme3 Gen3 LGA 1155 Intel Z68 / Intel Core i5-2500K
-XFX Radeon HD 7970 3072MB, GDDR5, PCI-Express 3.0
-Corsair Enthusiast Series TX850 V2 PSU / Corsair 600T case
-G.SKILL Ripjaws X Series 16GB / Hitachi Deskstar 750GB
 
lordT
Darth Gerbil
Posts: 7429
Joined: Fri Nov 25, 2005 2:11 pm
Location: Writing
Contact:

Re: JavaScript and Text Fields

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
Gerbil Team Leader
Topic Author
Posts: 298
Joined: Sat Dec 18, 2004 1:01 am
Location: California

Re: JavaScript and Text Fields

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
-ASRock Z68 Extreme3 Gen3 LGA 1155 Intel Z68 / Intel Core i5-2500K
-XFX Radeon HD 7970 3072MB, GDDR5, PCI-Express 3.0
-Corsair Enthusiast Series TX850 V2 PSU / Corsair 600T case
-G.SKILL Ripjaws X Series 16GB / Hitachi Deskstar 750GB
 
steelcity_ballin
Gerbilus Supremus
Posts: 11969
Joined: Mon May 26, 2003 5:55 am
Location: Pittsburgh PA

Re: JavaScript and Text Fields

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">
Corsair 600T | ASUS P8P67 PRO | Intel 2500k @ 4.4Ghz | Asus 970GTX | G.SKILL Ripjaws Series 8GB | Corsair HX650 650W | Asus ROG Swift Gsync 27"
 
Trellot
Gerbil Team Leader
Topic Author
Posts: 298
Joined: Sat Dec 18, 2004 1:01 am
Location: California

Re: JavaScript and Text Fields

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
-ASRock Z68 Extreme3 Gen3 LGA 1155 Intel Z68 / Intel Core i5-2500K
-XFX Radeon HD 7970 3072MB, GDDR5, PCI-Express 3.0
-Corsair Enthusiast Series TX850 V2 PSU / Corsair 600T case
-G.SKILL Ripjaws X Series 16GB / Hitachi Deskstar 750GB

Who is online

Users browsing this forum: No registered users and 1 guest