11 Replies - 4737 Views - Last Post: 22 November 2009 - 12:26 AM

#1 CatchThi5Drift  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 25
  • Joined: 12-October 09

Order form and regular expressions

Posted 21 November 2009 - 04:39 PM

Hi. I'm having a bunch of issues. Mainly understanding how to reference text fields in a form, but probably a lot more stuff, too. I don't know what would work if something was fixed, and what's not working because it actually doesn't work.

Here's how the form is supposed to work:

- The user must enter at least a single digit between 0 and 9 in each quantity field. If they've left it blank, or have anything other than a number, an alert should show a message telling them to put in a number, then reset the value to 0 and select it (like it is when the page loads). The cost of the order should be recalculated every time a quantity is changed.

- The form should not allow the user to submit it if a shipping option has not been selected. Right now, if an option is not selected, the alert is displayed, but when I click OK, it still continues to the "success" page.


- when the user has a blank or anything other than a digit in a quantity field, an alert comes up and tells them to put a digit it. It's supposed to reset to the focus being on the offending field with the contents selected. I can't figure out how to get that to happen.

Any help would be great. Thanks :)

<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);
	
	var sum = pc1+pc2+pc3+pc4+pc5+pc6;
	return sum;
}

function shipExpense() {
	var sindex = document.orders.shipping.selectedIndex;
	
	shipPrice = parseFloat(shipping.options[sindex].value);
	return shipPrice;
}

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["price"+item].value;
	var qty = document.orders.elements["qty"+item].value;
	var cost = document.orders.elements["cost"+item];
	
	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");
		document.orders.element["qty"+item] = 0;
		document.orders.elements["qty"+item].focus();
		document.orders.elements["qty"+item].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>


This post has been edited by CatchThi5Drift: 21 November 2009 - 11:59 PM


Is This A Good Question/Topic? 0
  • +

Replies To: Order form and regular expressions

#2 noorahmad  Icon User is offline

  • Untitled
  • member icon

Reputation: 209
  • View blog
  • Posts: 2,290
  • Joined: 12-March 09

Re: Order form and regular expressions

Posted 21 November 2009 - 09:23 PM

all you have to do is just add return before validateForm() on form submit attribute :)
<a href="cpanel/">Under Construction...</a> 
<?PHP
include("includes/site.php");
?>

<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);
    
    var sum = pc1+pc2+pc3+pc4+pc5+pc6;
    return sum;
}

function shipExpense() {
    var sindex = document.orders.shipping.selectedIndex;
    
    shipPrice = parseFloat(shipping.options[sindex].value);
    return shipPrice;
}

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["price"+item].value;
var qty = document.orders.elements["qty"+item].value;
var cost = document.orders.elements["cost"+item];
    
    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.orders.qty.focus(); // if I set both of these to "document.orders.elements["qty"+item];
        document.orders.qty.select(); // I get caught in a never-ending loop of alerts telling me to input a digit
        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>



:)
Was This Post Helpful? 1
  • +
  • -

#3 CatchThi5Drift  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 25
  • Joined: 12-October 09

Re: Order form and regular expressions

Posted 21 November 2009 - 09:29 PM

Gah. Thanks! Any ideas about why this doesn't focus, select, and set to zero the quantity field that causes the alert?

function calcCost(item){
	var price = document.orders.elements["price"+item].value;
	var qty = document.orders.elements["qty"+item].value;
	var cost = document.orders.elements["cost"+item];
	
	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.value = 0;
		qty.focus();
		qty.select();
		calcCost(item);
  }
}


Was This Post Helpful? 0
  • +
  • -

#4 noorahmad  Icon User is offline

  • Untitled
  • member icon

Reputation: 209
  • View blog
  • Posts: 2,290
  • Joined: 12-March 09

Re: Order form and regular expressions

Posted 21 November 2009 - 09:52 PM

because you are getting the value of qty in from form,
Example:
document.getElementById("qty1").focus();
:)
Was This Post Helpful? 0
  • +
  • -

#5 CatchThi5Drift  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 25
  • Joined: 12-October 09

Re: Order form and regular expressions

Posted 21 November 2009 - 10:23 PM

Ah, but I tried it that way, as below, and I get caught in a never-ending barrage of alerts. The field isn't being reset to 0 either way, which is why I think it's something else.

function calcCost(item){
	var price = document.orders.elements["price"+item].value;
	var qty = document.orders.elements["qty"+item].value;
	var cost = document.orders.elements["cost"+item];
	
	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.value = 0;
		document.orders.elements["qty"+item].focus();
		document.orders.elements["qty"+item].select();
		calcCost(item);
  }
}


Was This Post Helpful? 0
  • +
  • -

#6 noorahmad  Icon User is offline

  • Untitled
  • member icon

Reputation: 209
  • View blog
  • Posts: 2,290
  • Joined: 12-March 09

Re: Order form and regular expressions

Posted 21 November 2009 - 10:53 PM

OK here is the code and it works fine for me
calcCost function
function calcCost(num){
	var price = document.orders.elements["price"+num].value;
	var qty = document.orders.elements["qty"+num].value;
	var cost = document.orders.elements["cost"+num];

	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(); // if I set both of these to "document.orders.elements["qty"+item];
		document.getElementById("qty"+1).select(); // I get caught in a never-ending loop of alerts telling me to input a digit
		calcCost(num);
	}
}



Just a few mistakes:
  • setDate() is a reserved word in javascript
  • item is also a reserved word in javascript I used num instate of item in function abouve

:)
Was This Post Helpful? 0
  • +
  • -

#7 CatchThi5Drift  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 25
  • Joined: 12-October 09

Re: Order form and regular expressions

Posted 21 November 2009 - 11:23 PM

That doesn't work for me either. I cleared my cache, tried a couple other browsers, and still get stuck in the alerts. I tried it on a different computer, and it doesn't work there either.

Thanks for your help, though :)
Was This Post Helpful? 0
  • +
  • -

#8 noorahmad  Icon User is offline

  • Untitled
  • member icon

Reputation: 209
  • View blog
  • Posts: 2,290
  • Joined: 12-March 09

Re: Order form and regular expressions

Posted 21 November 2009 - 11:36 PM

remove calcCost(id); from calcCost() function when you are showing message for user.
function calcCost(id){
	var price = document.getElementById("price"+id);
	var qty = document.getElementById("qty"+id);
	var cost = document.getElementById("cost"+id);

	reqty = /[0-9]/g;
	if (reqty.test(qty)){
		cost.value = (price*qty).toFixed(2);
		calcTotal();
	}else if (qty.value == "" || qty.value == null){
		alert("Please enter a digit greater than or equal to 0");
		qty = 0;
		document.getElementById("qty"+id).focus(); // if I set both of these to "document.orders.elements["qty"+item];
	}
}



Why it is happening? because you are calling calcCost() function on qty.blur and when it is empty it is showing a message after message you added calcCost() at the end and again it is checking the value of qty and when receiving to calcCost() line it is again running the function. :)

This post has been edited by noorahmad: 21 November 2009 - 11:52 PM

Was This Post Helpful? 0
  • +
  • -

#9 ceres  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 3
  • Joined: 21-November 09

Re: Order form and regular expressions

Posted 21 November 2009 - 11:51 PM

This is familiar. :)

You need to reset qty within the document. You're resetting the variable which is once again given the bad value when calcCost reruns.

else{
				alert("Please enter a digit greater than or equal to 0");
				document.orders.element["qty"+item] = 0;
				document.orders.elements["qty"+item].focus();
				document.orders.elements["qty"+item].select(); 
				calcCost(item);
		}



My only issue I've run into is that the focus & select are not working.
Was This Post Helpful? 0
  • +
  • -

#10 CatchThi5Drift  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 25
  • Joined: 12-October 09

Re: Order form and regular expressions

Posted 21 November 2009 - 11:59 PM

Thanks for that. :) Does it set back to zero for you?

I had the selection and focus working when I first got started on the assignment (when nothing else was working, heh), and then I did something and it stopped.
Was This Post Helpful? 0
  • +
  • -

#11 ceres  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 3
  • Joined: 21-November 09

Re: Order form and regular expressions

Posted 22 November 2009 - 12:15 AM

It sets it to zero but then it doesn't focus or select the corrected qty value. The initial onload focus/select works, though. It's the one thing I haven't been able to get to work.

Also, I think

cost.value = (price*qty).toFixed(2);

needs to be changed to

document.orders.elements["cost"+item].value = (price*qty).toFixed(2);

This post has been edited by ceres: 22 November 2009 - 12:21 AM

Was This Post Helpful? 0
  • +
  • -

#12 CatchThi5Drift  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 25
  • Joined: 12-October 09

Re: Order form and regular expressions

Posted 22 November 2009 - 12:26 AM

Same. Everything else works perfectly.

I changed that line; still no select or focus.

This post has been edited by CatchThi5Drift: 22 November 2009 - 12:28 AM

Was This Post Helpful? 0
  • +
  • -

Page 1 of 1