The Shed is going Social! Join us on FaceBook and Twitter and chime in on the conversation.
|
 |
|
Dev Shed Forums
> Web Design
> JavaScript Development
|
Calculating total with discount
Discuss Calculating total with discount in the JavaScript Development forum on Dev Shed. Calculating total with discount JavaScript Development forum discussing JavaScript and DHTML, AJAX, and issues such as coding cross-browser JavaScript.
|
|
 |
|
|
|
|

Dev Shed Forums Sponsor:
|
|
|

December 7th, 2012, 11:15 AM
|
|
Registered User
|
|
Join Date: Nov 2012
Posts: 5
Time spent in forums: 2 h 6 m
Reputation Power: 0
|
|
|
Calculating total with discount
Hello,
i have a simple form that calculates the total of some checkboxes which works fine. Now, I need to offer a flat rate when 2 or more boxes are checked.
Example: 1 box = 100, 2 boxes or more = 175.
Finally, certain checkboxes must be exempt from the discount.
I am new to JS and just to get the form i currently have to work, took me forever, so please be gentle!
Here is my code:
<script type="text/javascript">
function calculate() {
var elems = document.forms['form1'].elements;
var total = 0;
for(var i=0;i<elems.length;i++) {
if (elems[i].checked) {total += +(elems[i].value);}
}
elems['total'].value = total;
}
</script>
boxes where 2 or more must = 175:
<input type="checkbox" name="checkbox_group_1[]" onclick="calculate()" value="100" title="Check here" />
<input type="checkbox" name="checkbox_group_2[]" onclick="calculate()" value="100" title="Check here" />
<input type="checkbox" name="checkbox_group_3[]" onclick="calculate()" value="100" title="Check here" />
exempt boxes:
<input type="checkbox" name="checkbox_group_4[]" onclick="calculate()" value="20" title="Check here" />
<input type="checkbox" name="checkbox_group_5[]" onclick="calculate()" value="20" title="Check here" />
thanks!
|

December 7th, 2012, 02:53 PM
|
|
Registered User
|
|
Join Date: Dec 2012
Location: Atlanta, GA
Posts: 14
Time spent in forums: 3 h 22 m 47 sec
Reputation Power: 0
|
|
I think I understand your requirements. Try the following to see if it does what you're attempting. Be sure to read the comments carefully to understand what is going on.
javascript Code:
Original
- javascript Code |
|
|
|
// Provide an indexOf function if none exists if (!Array.prototype.indexOf) { Array.prototype.indexOf = function (needle) { for (var i = 0; i < this.length; i++) { if (this[i] === needle) return i; } return -1; }; } // Run our code when the window is finished loading window.onload = function () { // Reference to our form element, and other things var form = document.forms["form1"], total = checked = 0, exempt = ["checkbox_group_4[]", "checkbox_group_5[]"]; // Bind up our calculate method when our form changes if (form.addEventListener) { form.addEventListener("change", calculate, false); } else if (form.attachEvent) { form.attachEvent("onchange", calculate); } else { form.onchange = calculate; } // Define our Calculate function function calculate () { // Reset total and checked total = 0, checked = 0; // Cycle over each item in our form for (var i = 0; i < form.length; i++) { // Handle only those that are checked if (form[i].checked) { // Add their value to the total value total += parseInt(form[i].value, 10); // If they aren't extempt from flatrate if (exempt.indexOf(form[i].name) < 0) { // Increment the number of eligible items checked += 1; } } } // If more than one eligible item is checked if (checked > 1) { total = 175; // Else if only one eligible item is checked } else if (checked > 0) { total = 100; } // Show the user the estimated value form["total"].value = total; } };
Note that I've removed your `onclick` attributes and am instead listening for any change events on the form itself. Anytime an element within the form changes, that event bubbles up to the form itself and that is where we respond:
html Code:
Original
- html Code |
|
|
|
<form name="form1">
<input type="checkbox" name="checkbox_group_1[]" value="100" />
<input type="checkbox" name="checkbox_group_2[]" value="100" />
<input type="checkbox" name="checkbox_group_3[]" value="100" />
<input type="checkbox" name="checkbox_group_4[]" value="20" />
<input type="checkbox" name="checkbox_group_5[]" value="20" />
<br/>
<input type="text" name="total" />
</form>
View Online: jsfiddle.net/mX5qN/
|

December 10th, 2012, 09:18 AM
|
|
Registered User
|
|
Join Date: Nov 2012
Posts: 5
Time spent in forums: 2 h 6 m
Reputation Power: 0
|
|
|
hey,
thanks alot for your help, the first part about the flat rate works great.
However there is a slight problem with the exempted boxes:
what works:
-when only an exempted checkbox is checked, the value is added to total.
Not working:
-when 1 exempted and 1 eligible are checked, only the eligible is calculated, when a second eligible is checked, the flat rate kicks in but the exempted is still not added to total.
In other words the exempted need to add to the total no matter what.
Well, thanks again, i would never been able to get this far on my own.
|

December 10th, 2012, 09:33 AM
|
|
Registered User
|
|
Join Date: Dec 2012
Location: Atlanta, GA
Posts: 14
Time spent in forums: 3 h 22 m 47 sec
Reputation Power: 0
|
|
|
I'm a little confused about your requirements.
When should the user pay the cost associated with clicking any of the "exempt" checkboxes?
|

December 10th, 2012, 09:51 AM
|
|
Registered User
|
|
Join Date: Nov 2012
Posts: 5
Time spent in forums: 2 h 6 m
Reputation Power: 0
|
|
|
Hello,
sorry for being unclear.
The exempted box values need to be added to the total regardless of how many, or if any, of the eligible boxes are checked.
In other words they must not be affected by the flat rate discount.
So if 1 eligible box is checked and 1 exempted is checked, the total would be 120 (100+20)
If 2 eligible boxes are checked, the flat rate would make the total 175, but checking an exempted box would then add it's value (20) to the total making it 195.
Hope that makes more sense.
thanks
|
Developer Shed Advertisers and Affiliates
| Thread Tools |
Search this Thread |
|
|
|
| Display Modes |
Rate This Thread |
Linear Mode
|
|
Posting Rules
|
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts
HTML code is Off
|
|
|
|
|