Forums: » Register « |  Free Tools |  User CP |  Games |  Calendar |  Members |  FAQs |  Sitemap |  Support |

New Free Tools on Dev Shed!

#1
December 7th, 2012, 12:15 PM
 billybeaver
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!

#2
December 7th, 2012, 03:53 PM
 jonathansampson
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 existsif (!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 loadingwindow.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/

#3
December 10th, 2012, 10:18 AM
 billybeaver
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.

#4
December 10th, 2012, 10:33 AM
 jonathansampson
Registered User

Join Date: Dec 2012
Location: Atlanta, GA
Posts: 14
Time spent in forums: 3 h 22 m 47 sec
Reputation Power: 0

When should the user pay the cost associated with clicking any of the "exempt" checkboxes?

#5
December 10th, 2012, 10:51 AM
 billybeaver
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

 Viewing: Dev Shed Forums > Web Design > JavaScript Development > Calculating total with discount