JavaScript and Text Fields

From Visual Basic to GNU C, this is the place to talk programming.

Moderators: SecretSquirrel, just brew it!

JavaScript and Text Fields

Postposted on 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.

Code: Select all
 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:
Code: Select all
<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
Trellot
Gerbil Team Leader
 
Posts: 289
Joined: Sat Dec 18, 2004 1:01 am
Location: California

Re: JavaScript and Text Fields

Postposted on Wed Apr 01, 2009 1:20 pm

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.
Corsair 600T | ASUS P8P67 PRO | Intel 2500k @ 4.4Ghz | EVGA 560 TI | G.SKILL Ripjaws Series 8GB | Corsair HX650 650W
steelcity_ballin
Gerbilus Supremus
Silver subscriber
 
 
Posts: 11907
Joined: Mon May 26, 2003 5:55 am
Location: Pittsburgh PA

Re: JavaScript and Text Fields

Postposted on 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
-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
Trellot
Gerbil Team Leader
 
Posts: 289
Joined: Sat Dec 18, 2004 1:01 am
Location: California

Re: JavaScript and Text Fields

Postposted on 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.
lordT
Darth Gerbil
 
Posts: 7426
Joined: Fri Nov 25, 2005 2:11 pm
Location: Writing

Re: JavaScript and Text Fields

Postposted on 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
Trellot
Gerbil Team Leader
 
Posts: 289
Joined: Sat Dec 18, 2004 1:01 am
Location: California

Re: JavaScript and Text Fields

Postposted on 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.
Code: Select all
//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 | EVGA 560 TI | G.SKILL Ripjaws Series 8GB | Corsair HX650 650W
steelcity_ballin
Gerbilus Supremus
Silver subscriber
 
 
Posts: 11907
Joined: Mon May 26, 2003 5:55 am
Location: Pittsburgh PA

Re: JavaScript and Text Fields

Postposted on 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:
Code: Select all
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:
Code: Select all
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
Trellot
Gerbil Team Leader
 
Posts: 289
Joined: Sat Dec 18, 2004 1:01 am
Location: California


Return to Developer's Den

Who is online

Users browsing this forum: No registered users and 2 guests