jQuery calculation plugin
ik probeer op een gemiddelde te bereken m.b.v de calculation plugin (http://www.pengoworks.com/workshop/jquery/calculation/calculation.plugin.htm).
Wat ik graag wil is select fields én select fields op tellen.
De volgende code gebruik ik nu:
Code (php)
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
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
<script type="text/javascript">
var bIsFirebugReady = (!!window.console && !!window.console.log);
$(document).ready(
function (){
// update the plug-in version
$("#idPluginVersion").text($.Calculation.version);
$("input[id^=calced]").avg({
bind:"keyup"
, selector: "#totalAvg"
// if an invalid character is found, change the background color
, onParseError: function(){
this.css("backgroundColor", "#cc0000")
}
// if the error has been cleared, reset the bgcolor
, onParseClear: function (){
this.css("backgroundColor", "");
}
});
}
);
</script>
Met de volgende HTML code:
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<p id="ex-avg">
Numbers:
<select name="avg" id="calced">
<option value="10">10</option>
<option value="100">100</option>
</select>
<input name="avg" value="0" size="2" type="text" id="calced">
<input name="avg" value="80" size="2" type="text" id="calced">
<input name="avg" value="60" size="2" type="text" id="calced">
<input name="avg_alt" value="40" size="2" type="text" id="calced">
Average:
<input name="totalAvg" id="totalAvg" value="45" size="2" readonly="readonly" type="text">
</p>
Numbers:
<select name="avg" id="calced">
<option value="10">10</option>
<option value="100">100</option>
</select>
<input name="avg" value="0" size="2" type="text" id="calced">
<input name="avg" value="80" size="2" type="text" id="calced">
<input name="avg" value="60" size="2" type="text" id="calced">
<input name="avg_alt" value="40" size="2" type="text" id="calced">
Average:
<input name="totalAvg" id="totalAvg" value="45" size="2" readonly="readonly" type="text">
</p>
Wat ik heb geprobeerd is een zelfde functie te maken met "select.name" en i.p.v keyup "change" maar dit werkt helaas niet. Waarschijnlijk is er een losse functie nodig die beide waarden optelt en deelt door het aantal waarden. Misschien kan het korter, wie kan me op weg helpen?
Gewijzigd op 11/10/2011 15:42:49 door Gammele vraal
Code (php)
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
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
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html><head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>jQuery Calculation Plug-in</title>
<!---// LaadjQuery v1.3.1 from the GoogleAPIs CDN //--->
<script type="text/javascript" src="calculation.plugin_bestanden/jquery.js"></script>
<script type="text/javascript" src="calculation.plugin_bestanden/jquery_002.js"></script>
<script type="text/javascript" src="calculation.plugin_bestanden/jquery_003.js"></script>
<!---// LaadjQuery v1.3.1 from the GoogleAPIs CDN //--->
<script type="text/javascript" src="js/jquery.progressbar.js"></script>
<script type="text/javascript">
var bIsFirebugReady = (!!window.console && !!window.console.log);
$(document).ready(
function (){
// update the plug-in version
$("#idPluginVersion").text($.Calculation.version);
$("select[id^=calced]").avg({
bind:"change"
, selector: "#pb1"
// if an invalid character is found, change the background color
, onParseError: function(){
this.css("backgroundColor", "#cc0000")
}
// if the error has been cleared, reset the bgcolor
, onParseClear: function (){
this.css("backgroundColor", "");
}
});
}
);
</script>
<style type="text/css">
table tr { vertical-align: top; }
table td { padding: 3px; }
div.contentblock { padding-bottom: 25px; }
#uploadprogressbar { display: none; }
</style>
</head>
<body>
<p>
<div class="contentblock">
<table>
<tr><td>Auditscore</td><td><span class="progressBar" id="pb1">75%</span></td></tr>
</table>
<strong>Controls: </strong>
<a href="#" onclick="$('#pb1').progressBar(20);">20</a> |
<a href="#" onclick="$('#pb1').progressBar(40);">40</a> |
<a href="#" onclick="$('#pb1').progressBar(60);">60</a> |
<a href="#" onclick="$('#pb1').progressBar(80);">80</a> |
<a href="#" onclick="$('#pb1').progressBar(100);">100</a>
</div>
</p>
<p id="ex-avg">
Criteria:
<select name="avg1" id="calced" class="styleselectbutton">
<option value="10">10</option>
<option value="20">20</option>
</select>
<select name="avg2" id="calced" class="styleselectbutton">
<option value="10">10</option>
<option value="20">20</option>
</select>
<select name="avg3" id="calced" class="styleselectbutton">
<option value="10">10</option>
<option value="20">20</option>
</select>
<select name="avg4" id="calced" class="styleselectbutton">
<option value="10">10</option>
<option value="20">20</option>
</select>
<!-- <input name="totalAvg" id="totalAvg" value="45" size="2" readonly="readonly" type="text"> -->
</p>
</body></html>
<html><head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>jQuery Calculation Plug-in</title>
<!---// LaadjQuery v1.3.1 from the GoogleAPIs CDN //--->
<script type="text/javascript" src="calculation.plugin_bestanden/jquery.js"></script>
<script type="text/javascript" src="calculation.plugin_bestanden/jquery_002.js"></script>
<script type="text/javascript" src="calculation.plugin_bestanden/jquery_003.js"></script>
<!---// LaadjQuery v1.3.1 from the GoogleAPIs CDN //--->
<script type="text/javascript" src="js/jquery.progressbar.js"></script>
<script type="text/javascript">
var bIsFirebugReady = (!!window.console && !!window.console.log);
$(document).ready(
function (){
// update the plug-in version
$("#idPluginVersion").text($.Calculation.version);
$("select[id^=calced]").avg({
bind:"change"
, selector: "#pb1"
// if an invalid character is found, change the background color
, onParseError: function(){
this.css("backgroundColor", "#cc0000")
}
// if the error has been cleared, reset the bgcolor
, onParseClear: function (){
this.css("backgroundColor", "");
}
});
}
);
</script>
<style type="text/css">
table tr { vertical-align: top; }
table td { padding: 3px; }
div.contentblock { padding-bottom: 25px; }
#uploadprogressbar { display: none; }
</style>
</head>
<body>
<p>
<div class="contentblock">
<table>
<tr><td>Auditscore</td><td><span class="progressBar" id="pb1">75%</span></td></tr>
</table>
<strong>Controls: </strong>
<a href="#" onclick="$('#pb1').progressBar(20);">20</a> |
<a href="#" onclick="$('#pb1').progressBar(40);">40</a> |
<a href="#" onclick="$('#pb1').progressBar(60);">60</a> |
<a href="#" onclick="$('#pb1').progressBar(80);">80</a> |
<a href="#" onclick="$('#pb1').progressBar(100);">100</a>
</div>
</p>
<p id="ex-avg">
Criteria:
<select name="avg1" id="calced" class="styleselectbutton">
<option value="10">10</option>
<option value="20">20</option>
</select>
<select name="avg2" id="calced" class="styleselectbutton">
<option value="10">10</option>
<option value="20">20</option>
</select>
<select name="avg3" id="calced" class="styleselectbutton">
<option value="10">10</option>
<option value="20">20</option>
</select>
<select name="avg4" id="calced" class="styleselectbutton">
<option value="10">10</option>
<option value="20">20</option>
</select>
<!-- <input name="totalAvg" id="totalAvg" value="45" size="2" readonly="readonly" type="text"> -->
</p>
</body></html>
Toevoeging op 11/10/2011 16:13:08:
Opgelost:
Code (php)
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
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
<script type="text/javascript">
var bIsFirebugReady = (!!window.console && !!window.console.log);
$(document).ready(
function (){
// update the plug-in version
$("#idPluginVersion").text($.Calculation.version);
$("select[id^=calced]").avg({
bind:"change"
, oncalc: function (value, settings){
$("#pb1").progressBar(value);
}
});
}
);
</script>
var bIsFirebugReady = (!!window.console && !!window.console.log);
$(document).ready(
function (){
// update the plug-in version
$("#idPluginVersion").text($.Calculation.version);
$("select[id^=calced]").avg({
bind:"change"
, oncalc: function (value, settings){
$("#pb1").progressBar(value);
}
});
}
);
</script>
Toch bedankt!