Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Register Log in
  • Congratulations strongm on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

Javascript working in Firefox, Chrome, not IE8

Status
Not open for further replies.
longarm

longarm

Technical User
Aug 11, 2011
1
US
This code works in Firefox, Chrome but the calculating fields do not calculate in IE8. For instance when the Height and the Width are entered, the calculation for size does not work. See code below.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "<html>
<head>
<title>Quilting Order Form :~ </title>
<meta name="Generator" content="EditPlus">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">

<script type="text/javascript" src="js/jquery-1.4.4.min.js"></script>
<script type="text/javascript" src="js/jquery.validate.js"></script>

<script language="javascript">
<!--

function recalculate()
{

size = $("#size").val();
height = parseFloat($("#height").val());
width = parseFloat($("#width").val());
less=width;
linear=height+width+height+width;
if(height>width)
less=height;

s = size;

//calculate quilting cost
v = 0;
if($("#services1").attr("checked")) { v = s*0.01; $("#q1").val(v.toFixed(2)); }
else if($("#services2").attr("checked")) { v = s*0.015; $("#q2").val(v.toFixed(2)); }
else if($("#services3").attr("checked")) { v = s*0.025; $("#q3").val(v.toFixed(2)); }
else if($("#services4").attr("checked")) { v = s*0.035; $("#q4").val(v.toFixed(2)); }
else if($("#services5").attr("checked")) { v = s*0.06; $("#q5").val(v.toFixed(2)); }
if(v>50) subtotal = v; else subtotal = 50;
$("#subtotal").val(subtotal.toFixed(2));

//calculate batting cost
v = 0;
if($("#batting1").attr("checked")) { v = less*0.30; }
else if($("#batting2").attr("checked")) { v = less*0.42; }
$("#totalBatting").val(v.toFixed(2));

//calculate binding cost
v = 0;
if($("#binding1").attr("checked")) { v = linear*0.30; }
else if($("#binding2").attr("checked")) { v = linear*0.15; }
else if($("#binding3").attr("checked")) { v = 0; }
$("#totalBind").val(v.toFixed(2));

//calculate shipping
shipping = 0;
if (size>14000) shipping = 25;
else if (size>9700) shipping = 20;
else if (size>7500) shipping = 18;
else if (size>6000) shipping = 15;
else shipping = 12.5;
$("#ship").val(shipping.toFixed(2));
subtotal = parseFloat($("#subtotal").val());
batting = parseFloat($("#totalBatting").val());
binding = parseFloat($("#totalBind").val());
threadtotal = parseFloat($("#totalThread").val());

subtotal2 = subtotal + batting + binding + threadtotal + parseFloat(shipping);
$("#subtotal2").val(subtotal2.toFixed(2));
tax = 0;
if ($("#state").val()=="Texas")
tax = subtotal2 * 0.0725;
total = parseFloat(subtotal2) + parseFloat(tax);

$("#tax").val(tax.toFixed(2));
$("#total").val(total.toFixed(2));


}

$('document').ready(function(){

recalculate();

$("#width,#height").keyup(function() {

//calculate size (width x height)
w = $("#width").val();
h = $("#height").val();
s = w*h;
$("#size").val(s.toFixed(2));

recalculate();
});

$("#thread_quantity").keyup(function() {
t = parseInt($("#thread_quantity").val());
if (t==0)
{
t = 1;
$("#thread_quantity").val(1);
}
t = t*8;
$("#totalThread").val(t.toFixed(2));
recalculate();
});

$("#state,#batting1,#batting2,#binding1,#binding2,#binding3").change(function() {
recalculate();
});

$("#services1,#services2,#services3,#services4,#services5").change(function() {
$("#q1").val(0); $("#q2").val(0); $("#q3").val(0); $("#q4").val(0); $("#q5").val(0);
$("#d1").val(""); $("#d2").val(""); $("#d3").val("");
recalculate();
});

jQuery.fn.ForceNumericOnly =
function()
{
return this.each(function()
{
$(this).keydown(function(e)
{
var key = e.charCode || e.keyCode || 0;
// allow backspace, tab, delete, arrows, numbers and keypad numbers ONLY
return (
key == 8 ||
key == 9 ||
key == 46 ||
key == 190 ||
(key >= 37 && key <= 40) ||
(key >= 48 && key <= 57) ||
(key >= 96 && key <= 105));
})
})
};

$("#width").ForceNumericOnly();
$("#height").ForceNumericOnly();
$("#thread_quantity").ForceNumericOnly();

$("#form").validate({
submitHandler: function() {
$('input').removeAttr('disabled');
width = $("#width").val();
$("#width").val(width.toFixed(2));
document.form.submit();
},
rules: {
name: "required",
shippingAddress: "required",
city: "required",
state: "required",
zipcode: "required",
phone: "required",
description: "required",
},
messages: {
name: "<font color=red>Please enter your name</font>",
shippingAddress: "<font color=red>Please enter your shipping address</font>",
city: "<font color=red>Please enter your city</font>",
state: "<font color=red>Please enter your state</font>",
zipcode: "<font color=red>Please enter your zipcode</font>",
phone: "<font color=red>Please enter your phone number</font>",
description: "<font color=red>Please describe your requirement</font>",
}
});



});

-->
</script>

<style>

#content {width:900px; margin:auto; padding:10px; border:2px solid #ccc; }
label {float:left; width:140px; font-weight:bold; padding-top:5px;}
input, textarea, select {float:left; width:400px; padding:5px; margin-right:5px; }
textarea {height:90px;}
#state {width:140px;}
#footer {width:900px; margin:auto;}
#main div, #footer div {clear:both; margin-top:20px; padding:5px;}
body {font-family:arial; font-size:12px;}
.w100 {width:120px;}
input.w20 {width:10px; clear:both;}
label.w100 {width:70px; margin-left:10px;}

#quilt {width:800px;}
#quilt div {margin-top:10px;}
#quilt div.i {width:200px; background-color:#eee; margin-left:200px; float:left;}
#quilt div input {width:30px; height:10px; padding: 0}
#quilt div input.w5, #shipping div input.w5, #bind div input.w5, #bat div input.w5, #thread div input.w5 {width:70px; padding:5px; float:right; text-align:right;}

#quilt .quilt-services input.w2, #bat .batting-services input.w2, #thread .thread-services input.w2 {width:150px; padding:5px;}

.quilt-services, .thread-services, .shipping-class {clear:both;}

.qf1, .qf2, .qf3, .qf4 {float:left;}
.qf1 {width:200px; font-weight:bold;}
.qf2 {width:300px;}
.qf3 {width:200px;}
.qf4 {width:100px;}
.text
{
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
color: #000000;
background-color: #F5F5F5;
border: 1px #CCCCCC solid;
}
a:link {
text-decoration: none;
}
a:visited {
text-decoration: none;
}
a:hover {
text-decoration: none;
}
a:active {
text-decoration: none;
}
</style>

</head>

<body>

<form name="form" id="form" method="post" action="form.php">
<div id="content">

<b>Payment Terms - We will email you an invoice and through PayPal's secure web site, payment can be made by credit card by simply clicking on the PayPal link in the email OR checks are to be made payable to <u>Longarm Quilting of Texas LLC</u>.</b>

<center><h1>Quilting Order Form</h1></center>


<div id="main">
<div>
<label for="name">Name</label><input type="text" name="name" id="name" value="" />
</div>
<div>
<label for="shipingAddress">Shipping Address</label>
<textarea name="shippingAddress" id="shippingAddress"></textarea> </div>
<div>
<label for="city">City</label><input type="text" name="city" id="city" value="" />
</div>
<div>
<label for="state">State</label>
<select name="state" id="state">
<option value="" selected="selected">= Select State =</option>
<option value="Alabama" >Alabama</option>
<option value="Alaska" >Alaska</option>
<option value="Arizona" >Arizona</option>
<option value="Arkansas" >Arkansas</option>
<option value="California" >California</option>
<option value="Colorado" >Colorado</option>
<option value="Connecticut" >Connecticut</option>
<option value="Delaware" >Delaware</option>
<option value="District of Columbia" >District of Columbia</option>
<option value="Florida" >Florida</option>
<option value="Georgia" >Georgia</option>
<option value="Hawaii" >Hawaii</option>
<option value="Idaho" >Idaho</option>
<option value="Illinois" >Illinois</option>
<option value="Indiana" >Indiana</option>
<option value="Iowa" >Iowa</option>
<option value="Kansas" >Kansas</option>
<option value="Kentucky" >Kentucky</option>
<option value="Louisiana" >Louisiana</option>
<option value="Maine" >Maine</option>
<option value="Maryland" >Maryland</option>
<option value="Massachusetts" >Massachusetts</option>
<option value="Michigan" >Michigan</option>
<option value="Minnesota" >Minnesota</option>
<option value="Mississippi" >Mississippi</option>
<option value="Missouri" >Missouri</option>
<option value="Montana" >Montana</option>
<option value="Nebraska" >Nebraska</option>
<option value="Nevada" >Nevada</option>
<option value="New Hampshire" >New Hampshire</option>
<option value="New Jersey" >New Jersey</option>
<option value="New Mexico" >New Mexico</option>
<option value="New York" >New York</option>
<option value="North Carolina" >North Carolina</option>
<option value="North Dakota" >North Dakota</option>
<option value="Ohio" >Ohio</option>
<option value="Oklahoma" >Oklahoma</option>
<option value="Oregon" >Oregon</option>
<option value="Pennsylvania" >Pennsylvania</option>
<option value="Rhode Island" >Rhode Island</option>
<option value="South Carolina" >South Carolina</option>
<option value="South Dakota" >South Dakota</option>
<option value="Tennessee" >Tennessee</option>
<option value="Texas" >Texas</option>
<option value="Utah" >Utah</option>
<option value="Vermont" >Vermont</option>
<option value="Virginia" >Virginia</option>
<option value="Washington" >Washington</option>
<option value="West Virginia" >West Virginia</option>
<option value="Wisconsin" >Wisconsin</option>
<option value="Wyoming" >Wyoming</option>
</select>
<label for="zipcode" class="w100">Zip Code</label><input type="text" name="zipcode" id="zipcode" value="" class="w100" />
</div>
<div>
<label for="email">Email</label><input type="text" name="email" id="email" value="" />
</div>
<div>
<label for="phone">Phone</label><input type="text" name="phone" id="phone" value="" />
</div>
<div>
<label for="description">Describe your Quilt</label>
<textarea name="description" id="description"></textarea>
</div>
<div>
<label>Quilt Size</label>
<label for="width" class="w100">Width <br /> in inches</label><input type="text" name="width" id="width" class="w100" value="0" maxlength="9" />
<label for="height" class="w100">Length <br /> in inches</label><input type="text" name="height" id="height" class="w100" value="0" maxlength="9" />
<label for="size" class="w100">Width X Length <br /> in sq inches</label><input type="text" name="size" value="0" id="size" class="w100" disabled="true" /> </div>
</div>

<br /><br />
<hr style="clear:both; margin-top:20px;" />

<div id="quilt">
<h2>Quilting Services <span style="font-size:12px; font-weight:normal;">(choose one of the following 5 services)</span></h2>


<div class="quilt-services">
<div class="qf1"><input type="radio" class="w20" name="services" id="services1" value="basting" checked /> Basting</div>
<div class="qf2">Vertical Basting at 4" spacing</div>
<div class="qf3">($0.01 per square inch)</div>
<div class="qf4"><input type="text" name="q1" id="q1" value="0" class="w5" disabled="true" /></div>
</div>
<div class="quilt-services">
<div class="qf1"><input type="radio" class="w20" name="services" id="services2" value="edgetoedge" rel="0.015" /> Edge to Edge</div>
<div class="qf2">Enter Design Number: <br /><input type="text" class="w2" name="d1" id="d1" /></div>
<div class="qf3">($0.015 per square inch)</div>
<div class="qf4"><input type="text" name="q2" id="q2" value="0" class="w5" disabled="true" /></div>
</div>
<div class="quilt-services">
<div class="qf1"><input type="radio" class="w20" name="services" id="services3" value="edgetoedgeborder" rel="0.02" /> Edge to Edge Border</div>
<div class="qf2">Enter Design # for Main Area<br /><input type="text" class="w2" name="d2" id="d2" />
<br /><br />Enter Design # for Border<br /><input type="text" class="w2" name="d3" id="d3" />
</div>
<div class="qf3">($0.025 per square inch)</div>
<div class="qf4"><input type="text" name="q3" id="q3" value="0" class="w5" disabled="true" /></div>
</div>
<div class="quilt-services">
<div class="qf1"><input type="radio" class="w20" name="services" id="services4" value="custom" rel="0.03" /> Custom</div>
<div class="qf2">Specific instructions on a separate page will be required for placement of individual designs</div>
<div class="qf3">($0.035 per square inch)</div>
<div class="qf4"><input type="text" name="q4" id="q4" value="0" class="w5" disabled="true" /></div>
</div>
<div class="quilt-services">
<div class="qf1"><input type="radio" class="w20" name="services" id="services5" value="heirloom" rel="0.04" /> Heirloom</div>
<div class="qf2">Specific instructions on a separate page will be required for placement of individual designs</div>
<div class="qf3">($0.06 per square inch)</div>
<div class="qf4"><input type="text" name="q5" id="q5" value="0" class="w5" disabled="true" /></div>
</div>
<div class="quilt-services">
<div class="qf1" style="width:400px;"><b>Quilting Services Subtotal ($50 minimum)</b></div>
<div class="qf2">&nbsp;</div>
<div class="qf4"><input type="text" name="subtotal" id="subtotal" value="0" class="w5" disabled="true" /></div>
</div>
</div>

<br /><br />
<hr style="clear:both; margin-top:20px;" />

<div id="bat">
<div class="batting-services">
<div class="qf1"><h2>Batting</h2></div>
<div class="qf2">
<input type="radio" class="w20" name="batting" id="batting1" value="Heirloom Blend 80/20" checked /> Heirloom Blend 80/20 <!--90"--> <br />
<input type="radio" class="w20" name="batting" id="batting2" value="100% Dream Cotton" /> 100% Dream Cotton <br />
</div>
<div class="qf3">
($.30 per inch)<br />($.42 per inch)</div> <div class="qf4"><input type="text" name="totalBatting" id="totalBatting" value="0" class="w5" disabled="true" /></div>
</div>
</div>

<br /><br />
<hr style="clear:both; margin-top:20px;" />

<div id="bind">
<div class="binding-services">
<div class="qf1"><h2>Binding</h2></div>
<div class="qf2">
<input type="radio" class="w20" name="binding" id="binding1" value="Binding will be applied to the top and hand-stitched to the back." rel="0.30" checked /> Binding will be applied to the top and hand-stitched to the back. <br />
<input type="radio" class="w20" name="binding" id="binding2" value="Binding will be applied to the top only; Customer will finish." rel="0.15" /> Binding will be applied to the top only; Customer will finish. <br />
<input type="radio" class="w20" name="binding" id="binding3" value="Not Required" rel="0" /> Not required <br />
</div>
<div class="qf3">
($.30 per linear inch)<br /><br />($.15 per linear inch)</div>
<div class="qf4"><input type="text" name="totalBind" id="totalBind" value="0" class="w5" disabled="true" /></div>
</div>
</div>

<br /><br />
<hr style="clear:both; margin-top:20px;" />

<div id="thread">
<div class="thread-services">
<div class="qf1">Thread Charge per Color <br />*****Specify color(s) in Note Section below******</div>
<div class="qf2">
Quantity <br />
<input type="text" class="w2" name="thread_quantity" id="thread_quantity" value="1" style="width:30px;" maxlength="2" />
</div>
<div class="qf3">
($8.00 per color)</div>
<div class="qf4"><input type="text" name="totalThread" id="totalThread" value="8.00" class="w5" disabled="true" /></div>
</div>
</div>

<br /><br />
<hr style="clear:both; margin-top:20px;" />

<div id="shipping">
<div class="shipping-class">
<div class="qf1">Shipping & Insurance</div>
<div class="qf2">&nbsp;</div>
<div class="qf3">&nbsp;</div>
<div class="qf4"><input type="text" name="ship" id="ship" value="0" class="w5" disabled="true" /></div>
</div>
<div class="shipping-class">
<div class="qf1">Sub Total</div>
<div class="qf2">&nbsp;</div>
<div class="qf3">&nbsp;</div>
<div class="qf4"><input type="text" name="subtotal2" id="subtotal2" value="0" class="w5" disabled="true" /></div>
</div>
<div class="shipping-class">
<div class="qf1">Sales Tax: Texas residents only</div>
<div class="qf2">&nbsp;</div>
<div class="qf3">&nbsp;</div>
<div class="qf4"><input type="text" name="tax" id="tax" value="0" class="w5" disabled="true" /></div>
</div>
<div class="shipping-class">
<div class="qf1">Total Order</div>
<div class="qf2">&nbsp;</div>
<div class="qf3">&nbsp;</div>
<div class="qf4"><input type="text" name="total" id="total" value="0" class="w5" disabled="true" /></div>
</div>
</div>

<br /><br />
<hr style="clear:both; margin-top:20px;" />

<div id="footer">

<div>
<label for="notes">Your Special Notes:</label>
<textarea name="notes" id="notes" /></textarea>
</div>

<div>
<pre style="font-family:arial;">
Ship Quilt Top to: Diane Selman
226 Whitney Run
Buda, TX 78610

Turn around time: 2 weeks. If you have any questions, please call me at 512-295-0151.
We will notify you upon receipt of your quilt. All prices are subject to change
without notice. - Thank you.

</pre>
<p align="center"><a href="#" onclick="window.print(); return false;" class="text"> PRINT </a></p> <br /><br />
</div>
</div>

</div>
<p align="center"><a href=" class="text">BACK TO MAIN WEBSITE</a></p>
</form>

</body>
</html>
 
Status
Not open for further replies.

Similar threads

lexer
  • Locked
  • Question
Passing fields from (html-JavaScript) table to JavaScript Function
Replies
0
Views
313
lexer
lexer
Mike Lewis
  • Locked
  • Question
Anyone here got any experience of Grid.JS (a sortable Javascript grid) 1
Replies
5
Views
719
Mike Lewis
Mike Lewis
JScannell
  • Locked
  • Question
Google Chrome doesn't load my javascript files
Replies
1
Views
257
JScannell
JScannell
JScannell
  • Locked
  • Question
Javascript events
Replies
1
Views
164
Daniel K
Daniel K
JScannell
  • Locked
  • Question
Javascript issue on iPhone/iMac platforms
Replies
0
Views
291
JScannell
JScannell

Part and Inventory Search

Sponsor

Back
Top