Hi everyone,
I inherited a piece of AJAX code, which works in Firefox, Opera, and Safari, but not in IE. Unfortunately, I'm not fluent enough in AJAX to be able to effectively troubleshoot the problem. Could someone please take a look at my code and help me get it working? I would greatly appreciate any assistance.
I'm dealing with a basic "energy calculator," which reads in values from a textbox (average_usage) and outputs them in the region.
A stripped down version of the code is as follows:
Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Calc</title>
<script type="text/javascript" charset="utf-8" src="js/prototype.js"></script>
<script type="text/javascript" charset="utf-8" src="js/prototype.helpers.js"></script>
<script type="text/javascript" charset="utf-8" src="js/calc.js"></script>
</head>
<body>
<form name="average_usage" id="purchaseForm" method="POST" action="#">
<table>
<tr><td>Enter your monthly kWh consumption below:</td><td>Total</td></tr>
<tr><td><input type="text" name="average_usage" id="average_usage" value="" /></td><td><span id="totalBill">Enter kWh usage</span></td></tr>
<tr><td colspan="2">
<input type="radio" name="billing_type" id="billingType1" value="monthly-custom" /> Monthly
<input type="radio" name="billing_type" id="billingType2" value="yearly" checked="checked" /> Yearly (1 Free Month!) </td></tr>
<tr><td><span id="quoteMessage"> </span></td></tr>
<tr><td><input type='submit' name='submit' value='Submit' /></td></tr>
</table>
<script type="text/javascript" charset="utf-8">
Event.observe('average_usage', 'keyup', signup.averageBusinessUsageUpdate);
Event.observe('average_usage', 'keyup', signup.printQuoteMessage);
Event.observe('billingType1', 'click', signup.averageBusinessUsageUpdate);
Event.observe('billingType2', 'click', signup.averageBusinessUsageUpdate);
signup.averageBusinessUsageUpdate();
signup.printQuoteMessage();
</script>
</form>
</body>
</html>
The three files in the js folder are as follows:
calc.js:
Code:
var Signup = Class.create();
Signup.prototype = {
initialize: function() {
},
submit: function(e) {
Event.stop(e);
if(Form.check('purchaseForm'))
$('purchaseForm').submit();
},
averageUsageUpdate: function() {
var multiplier = (Form.getRadioValue('purchaseForm', 'billing_type') == 'monthly-custom') ? $F('kwh_multiplier') : 11 * $F('kwh_multiplier');
if(!parseInt($F('average_usage')))
$('totalBill').update('Enter kWh usage');
else
{
var value = Math.round($F('average_usage') * multiplier * 100)/100;
$('totalBill').update('$ ' + value);
}
},
discountAverageUsageUpdate: function() {
var multiplier = (Form.getRadioValue('purchaseForm', 'billing_type') == 'yearly-custom') ? 11 * $F('kwh_multiplier') : $F('kwh_multiplier');
if(!parseInt($F('average_usage')))
$('totalBill').update('Enter Custom kWh Usage');
else
{
var value = Math.round($F('average_usage') * multiplier * 0.8 * 100)/100;
$('totalBill').update('$ ' + value);
}
},
scaleMultiplierUpdate: function() {
var avekwh = $F('average_usage')
if(avekwh <= 2000) {
var scalemultiplier = 0.02;
}
else {
var scalemultiplier = 0.018;
}
$('scale-multiplier').value = scalemultiplier;
},
averageBusinessUsageUpdate: function() {
var avekwh = $F('average_usage')
if(avekwh <= 2000) {
var multiplier = 0.02;
}
else {
var multiplier = 0.018;
}
if(!parseInt($F('average_usage'))) {
$('totalBill').update('Enter kWh usage');
}
else
{
var value = (Form.getRadioValue('purchaseForm', 'billing_type') == 'yearly') ? Math.round($F('average_usage') * multiplier * 11 * 100)/100 : Math.round($F('average_usage') * multiplier * 100)/100;
$('totalBill').update('$ ' + value);
}
},
printQuoteMessage: function () {
var avekwh = $F('average_usage')
if(avekwh > 7499) {
$('quoteMessage').update('Your consumption is fairly high, please get in contact with us directly.');
}
else {
$('quoteMessage').update('Click Submit to proceed.');
}
},
changeRadioValue: function () {
if(parseInt($F('average_usage'))) {
document.purchaseForm.billing_type[4].checked = true;
}
},
showLogin: function() {
new Effect.BlindDown('loginContainer', {duration:0.4});
}
};
var signup = new Signup();
var Calculator = Class.create();
Calculator.prototype = {
initialize: function() {
},
submit: function(e) {
if((Form.getRadioValue('purchaseForm', 'billing_type') == 'yearly-custom')) {
Event.stop(e);
if(Form.checkTwo('purchaseForm'))
$('purchaseForm').submit();
} else if ((Form.getRadioValue('purchaseForm', 'billing_type') == 'monthly-custom')) {
Event.stop(e);
if(Form.checkTwo('purchaseForm'))
$('purchaseForm').submit();
}
}
};
var calculator = new Calculator();
prototype.helpers.js
Code:
Form.checkTwo = function(form) {
var isValid = true;
var averageUsage = '';
$(form).getElements().each(function(e) {
if(e.name == 'average_usage')
averageUsage = $F(e);
});
if(!parseInt(averageUsage)) {
isValid = false;
new Effect.Shake($(form)['average_usage']);
}
return isValid;
};
Form.getRadioValue = function(formName, radioName) {
return Form.getInputs(formName,'radio',radioName).find(function(radio) { return radio.checked; }).value;
};
And finally, the prototype.js file is the latest version of the Prototype library (1.6.0.2 found
here).
If somebody could please help me get this to work in IE, I would be very thankful.