We help IT Professionals succeed at work.

form price quantity tax total

hummer5963
hummer5963 asked
on
370 Views
Last Modified: 2012-05-08
Hello

I have a simple form that when a customer clicks on a checkbox it enables a textfield where they can enter a quantity.   At the bottom of the page where they send the order is a text box that has there total including taxes.  

There are several problems with the code and I'm not sure how to correct them.  For starts the code works with safari but not i.e.  

Also  I am using Matt's formmail as a generic process to the form.   Because it's generic it wants to print all inputs with a name.  I thought using the checkbox as a way of enabling the textfield would be a good work around....which it is in Safari

Below is the code and the relevent fields.   The input fields in the form.  any help would be appreciated
<SCRIPT LANGUAGE="JavaScript">
<!--
 
function Monify(value)
{
  var str = "" + Math.round(value*100);
  var len = str.length;
  return (str=="0")?"0.00":(str.substring(0,len-2)+"."+str.substring(len-2,len));
}
 
var taxRate = 5.0; // percent...easier for human to understand
 
function updateTotal( )
{
    var form = document.Products;
    var subtotal = 0.00;
    for ( item = 1; item < 999999; ++item )
    {
        var pricefld = form.elements["price"+item];
		 pricefld = Monify (pricefld);
        if ( pricefld == null ) break; // after end of all prices
        var price = parseFloat( pricefld.value );
        var qtyfld = form.elements["qty"+item];
        var qty = parseInt( "0" + qtyfld.value, 10 ); 
        if ( isNaN(qty) )
        {
             alert("Invalid quantity for item " + item);
             qty = 0;
             qtyfld.value = 0; // reset that quantity to zero
        }
        subtotal += qty * price;
    }
    var taxamt = subtotal * ( taxRate / 100 );
    var total = subtotal + taxamt;
 
    form.subTotal.value = Monify (subtotal);
    form.salesTax.value = Monify (taxamt);
    form.total.value = Monify (total);
}
 
//-->
</SCRIPT>
 
 
<form name="Products" method="post" action="/cgi-bin/FormMail.cgi">
 
<li id="foli13" 		class="    ">
	<label class="desc" id="title13" for="Field13">
		Soup
			</label>
	<div class="col">
		<span>
	<input id="Field13" 		name="Soup" 		type="checkbox" 		class="field checkbox" 		value="Cup of the Soup of the Day $4" 		tabindex="13" 		
	/>
	<label class="choice" for="Field13">Cup of the Soup of the Day $4 </label><label>Qty<input type=hidden name="" value=""/>
    <input type=hidden name="price1" value="4.00"/>
	<input type=text name=qty1 value="" size=2 maxlength=10 onChange="updateTotal();"/></label>
	</span>
 
	</span>
		<span>
	<input id="Field14" 		name="Soup" 		type="checkbox" 		class="field checkbox" 		value="Bowl and Bread $ 8" 		tabindex="14" 	
	onclick="this.form.qty2.disabled = !this.checked;this.form.price2.disabled = !this.checked;"			/>
	<label class="choice" for="Field14">Bowl and Bread $ 8  </label><label>Qty
	<input type=hidden name="product2" value=""/>
    <input type=hidden name="price2" disabled="disabled" value="8.00" readonly/>
	<input type=text name=qty2 value="" size=2 maxlength=10 disabled="disabled" onChange="updateTotal();"/></label>
	</span>
		<span>
	<input id="Field15" 		name="Soup" 		type="checkbox" 		class="field checkbox" 		value="Dad&#039;s Chili $8" 		tabindex="15" 	onclick="this.form.qty3.disabled = !this.checked;this.form.price3.disabled = !this.checked;"				/>
	<label class="choice" for="Field15">Dad's Chili $8 </label><label> Qty
	
	<input type=hidden name="product3" value=""/>
    <input type=hidden name="price3" disabled="disabled" value="8.00"/>
	<input type=text name=qty3 value="" size=2 maxlength=10 disabled="disabled" onChange="updateTotal();"/></label>
	</span>
		</div>
		<p class="instruct" id="instruct13"><small>Check the front of our web page for today's soup choices.</small></p>
	</li>
 
<li 
		class="    ">
	
		
	<label class="desc">
		Total Price
			</label>
	
	<div>
				<Input Type="hidden" NAME="subTotal" VALUE="" />
				<Input Type="hidden" NAME="salesTax" VALUE="" />
				<INPUT TYPE="text" NAME="total"  id="total" VALUE="" SIZE=10 />
			
			</div>
	
		
		
	</li>
 
	
		
	<li class="buttons">
						<input id="saveForm" name="saveForm" class="btTxt submit" type="submit" value="Submit" />
							
				
			</li>

Open in new window

Comment
Watch Question

CERTIFIED EXPERT

Commented:
Hello Hummer

The reason it wasnt working on other browsers was because you have overlapping tags <label><input></label>. Also you had bad use of id and name, in some places these said different.

I redid you code using document.getElementById() it seems to work for me.

Easynow
<html><head>
<SCRIPT LANGUAGE="JavaScript">
<!--
 
function Monify(value)
{
  var str = "" + Math.round(value*100);
  var len = str.length;
  return (str=="0")?"0.00":(str.substring(0,len-2)+"."+str.substring(len-2,len));
}
 
var taxRate = 5.0; // percent...easier for human to understand
  
function updateTotal()
{
    var subtotal = 0.00;
    var form = document.Products;
    for ( item = 1; item < 4; ++item )
    {
        var price = document.getElementById("price"+item).value;
        var qty = document.getElementById("qty"+item).value;
        subtotal += qty * price;
    }
    var taxamt = subtotal * ( taxRate / 100 );
    var total = subtotal + taxamt;
 
    form.subTotal.value = Monify (subtotal);
    form.salesTax.value = Monify (taxamt);
    form.total.value = Monify (total);
 
}
 
//-->
</SCRIPT>
 </head><body>
 
<form name="Products" method="post" action="/cgi-bin/FormMail.cgi">
 
<li id="foli13"                 class="    ">
        <label class="desc" id="title13" for="Field13">
                Soup
                        </label>
        <div class="col">
                <span>
        		<input id="Field13" type="checkbox" value="Cup of the Soup of the Day $4" tabindex="13"  />
        		<label for="Field13">Cup of the Soup of the Day $4 </label><label>Qty</label><input type=hidden name="" value=""/>
    			<input type=hidden id="price1" name="price1" value="4.00"/>
        		<input type=text id="qty1" name="qty1" size="2" maxlength="10" onChange="updateTotal();"/>
        	</span>
                
<span>
        <input id="Field14" type="checkbox"  class="field checkbox" value="Bowl and Bread $ 8"  tabindex="14"   >
        <label class="choice" for="Field14">Bowl and Bread $ 8  </label><label>Qty</label>
        <input type=hidden name="product2" id="product2" value=""/>
    <input type=hidden id="price2" name="price2" disabled="disabled" value="8.00" readonly/>
        <input type=text id=qty2 name=qty2 value="" size=2 maxlength=10 onChange="updateTotal();"/>
        </span>
                <span>
        <input id="Field15"  name="Field15"                type="checkbox"                 class="field checkbox"          value="Dad&#039;s Chili $8"             tabindex="15"                             />
        <label class="choice" for="Field15">Dad's Chili $8 </label><label> Qty</label>
        
        <input type=hidden id="product3" name="product3" value=""/>
    <input type=hidden id="price3" name="price3" value="8.00"/>
        <input type=text id=qty3 name=qty3 value="" size=2 maxlength=10  onChange="updateTotal();"/>
       
</span>
                </div>
                <p class="instruct" id="instruct13"><small>Check the front of our web page for today's soup choices.</small></p>
        </li>
 
<li 
                class="    ">
        
                
        <label class="desc">
                Total Price
                        </label>
        
        <div>
                                <Input Type="hidden" NAME="subTotal" VALUE="" />
                                <Input Type="hidden" NAME="salesTax" VALUE="" />
                                <INPUT TYPE="text" NAME="total"  id="total" VALUE="" SIZE=10 />
                        
                        </div>
        
                
                
        </li>
 
        
                
        <li class="buttons">
                                                <input id="saveForm" name="saveForm" class="btTxt submit" type="submit" value="Submit" />
                                                        
                                
                        </li>
</body></html>

Open in new window

CERTIFIED EXPERT

Commented:
p.s. i removed alot of the check button code when trying to find problem, u can probs add that straight back in.

Author

Commented:
hi easynow

thanks for your reply....I appreciate your help.  I cut and pasted your code just as it is to see how it works and I'm still getting an error in my ie8 browser.  It says  

Webpage error details

User Agent: Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 5.1; Trident/4.0; .NET CLR 2.0.50727; .NET CLR 3.0.04506.648; .NET CLR 3.5.21022; .NET CLR 3.0.4506.2152; .NET CLR 3.5.30729)
Timestamp: Sun, 15 Nov 2009 20:20:48 UTC
Message: Object doesn't support this action
Line: 18
Char: 11
Code: 0

not sure why that is.....hummer

CERTIFIED EXPERT
Commented:
This one is on us!
(Get your first solution completely free - no credit card required)
UNLOCK SOLUTION

Author

Commented:
thanks that's got it....

hummer
Unlock the solution to this question.
Join our community and discover your potential

Experts Exchange is the only place where you can interact directly with leading experts in the technology field. Become a member today and access the collective knowledge of thousands of technology experts.

*This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.

OR

Please enter a first name

Please enter a last name

8+ characters (letters, numbers, and a symbol)

By clicking, you agree to the Terms of Use and Privacy Policy.