-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathcalcforjoomla.html
130 lines (102 loc) · 3.82 KB
/
calcforjoomla.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
<html>
<head>
<title>Savings Calculator</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script src="http://ajax.microsoft.com/ajax/jquery.validate/1.7/jquery.validate.min.js"></script>
<style type="text/css">
label { width: 15em; float: left; }
label.error { float: none; color: red; padding-left: .5em; vertical-align: top; }
</style>
</head>
<body>
<h2>Savings Calculator</h2>
<form id="roi-form">
<fieldset>
<legend>Please fill in the fields with the "*" and then click the button for the calculation</legend>
<p>
<label for="trucks">Number of Vehicles:</label>
<em>*</em><input name="trucks" id="trucks" size="20" class="required" />
</p>
<p>
<label for="salary">Hourly Driver Salary:</label>
<em>*</em><input name="salary" id="salary" size="20" class="required" />
</p>
<p>
<label for="cpm">Cost per Mile:</label>
<em>*</em><input name="cpm" id="cpm" size="20" class="required" />
</p>
<p>
<label for="currmiles">Total Miles Driven per Vehicle:</label>
<em>*</em><input name="currmiles" id="currmiles" size="20" class="required" />
</p>
<p>
<label for="list">Estimated Mileage Reduction:</label>
<em>*</em><select id="list" class="required">
<option value='0'>Select the Savings.....</option>
<option value='10'>10 %</option>
<option value='15'>15 %</option>
<option value='20'>20 %</option>
</select>
</p>
<input type="submit" id="roi-calc" value="Calculate Savings">
<br />
<h3>Daily Savings</h3>
<p>
<label for="milessaved">Daily Miles Saved:</label>
<em> </em><input type="text" name="milessaved" id="milessaved" size="20" class="roiAnswer" />
</p>
<p>
<label for="hourssaved">Daily Hours Saved:</label>
<em> </em><input type="text" name="hourssaved" id="hourssaved" size="20" class="roiAnswer" />
</p>
<p>
<label for="dailywages">Daily Wages Saved:</label>
$<input type="text" name="dailywages" id="dailywages" size="20" class="roiAnswer" />
</p>
<p>
<label for="vehcosts">Daily Vehicle Costs Saved:</label>
$<input type="text" name="vehcosts" id="vehcosts" size="20" class="roiAnswer" />
</p>
<h3>Long Term Savings</h3>
<p>
<label for="monthlysavings">Total Monthly Savings:</label>
$<input type="text" name="monthlysavings" id="monthlysavings" size="20" class="roiAnswer" />
</p>
<p>
<label for="annualsavings">Total Annual Savings:</label>
$<input type="text" name="annualsavings" id="annualsavings" size="20" class="roiAnswer" />
</p>
</fieldset>
</form>
<script type="text/javascript">
jQuery.noConflict();
jQuery(function() {
jQuery("#roi-form").validate();
jQuery("#roi-form").submit(function(e) {
e.preventDefault();
var trucks = parseInt(jQuery("#trucks").val());
var salary = parseFloat(jQuery("#salary").val());
var cpm = parseFloat(jQuery("#cpm").val());
var miles = parseInt(jQuery("#currmiles").val());
var reduction = parseInt(jQuery("#list").val())/100;
var milessavings = trucks * (miles * reduction);
var hourssavings = 1/(60 / milessavings);
var dailysavings = salary * hourssavings;
var vehiclesavings = cpm * milessavings;
var ttlmonthlysavings = 20 * (dailysavings + vehiclesavings);
var ttlannualsavings = 12 * ttlmonthlysavings;
if(!isNaN(milessavings)) {
jQuery("#milessaved").val(milessavings.toFixed(2));
jQuery("#hourssaved").val(hourssavings.toFixed(2));
jQuery("#dailywages").val(dailysavings.toFixed(2));
jQuery("#vehcosts").val(vehiclesavings.toFixed(2));
jQuery("#monthlysavings").val(ttlmonthlysavings.toFixed(2));
jQuery("#annualsavings").val(ttlannualsavings.toFixed(2));
} else {
jQuery("#milessaved").val('There was an error');
}
});
});
</script>
</body>
</html>