making a calculator

[mossawi]

hi,

can someone please help me do this, its a calculator for a site, this is how it works:

Item Pice: "you put the price here"
Item Shipping Charge: "you put the shipping charge here"
Item Tax Group: "a drop down box comes here, you choose the tax group of the item, each tax group has a price i will set for"
Total: "Calculates Total"

***Calculator Total--> it would basically be Item Price + Shipping Charge = Price Before Tax. ................ Price Before Tax + (Price Before Tax * Tax Price)

id really appreciate help on this. and thanks a lot for taking the time.

[mossawi]

please anyone

[Twey]

<script type="text/javascript">
function calculate() {
var before = parseFloat(document.getElementById("price").value) + parseFloat(document.getElementById("shipping").value);
var after = before + (before * parseFloat(document.getElementById("tax").value));
document.getElementById("before").value = before;
document.getElementById("after").value = after;
}
</script>
Price: <input type="text" id="price"/><br/>
Shipping: <input type="text" id="shipping"/><br/>
Tax Group: <select id="tax"><br/>
<option value="10.51">Group 1</option>
<option value="12.46">Group 2</option>
</select><br/>
Total Before Tax: <input type="text" id="before" disabled="true"/><br/>
Total After Tax: <input type="text" id="after" disabled="true"/><br/>
<button onclick="calculate();">Calculate</button>

[mwinter]

Hopefully, this is just something for users to play with. You should certainly not trust what it produces if you're calculating real order prices. That invites tampering from an unscrupulous user, so only the server should be involved in such things.

You don't say how the Tax Group control is structured. What are the values of each option element? From your description, I'd guess that they are numbers between 0 and 1. For instance, VAT (value-added tax) in the UK is 17.5%, so the value I'd expect is "0.175".

<form action="">
  <label>Item price: <input type="text" name="price"></label>
  <label>Shipping charge: <input type="text" name="shipping"></label>
  <label>Tax group:
  <select name="tax" size="1">
    <!-- VAT:  <option value="0.175">...</option> -->
  </select></label>
  <label>Total: <input type="text" name="total"></label>
  <input type="button" value="Calculate" onclick="calculate(this.form);">
</form>

function calculate(f) {
  var e = f.elements,
      p = e.price.value,
      s = e.shipping.value,
      t = e.tax,
      m = ['The following fields are invalid:\n'];

  if(!Number.isReal(p)) {m.push('Item price');}
  if(!Number.isReal(s)) {m.push('Shipping charge');}
  if(-1 == t.selectedIndex) {m.push('Tax group');}
  if(1 != m.length) {
    alert(m.join('\n'));
    return false;
  }
  e.total.value = ((+p + (+s)) * (1 + (+t.options[t.selectedIndex].value))
                               * 100).toCurrency('$');
}

if('function' != typeof Array.prototype.push) {
  Array.prototype.push = function(v) {
    var i = this.length >>> 0,
        j = 0,
        n = arguments.length;

    while(n > j) {this[i++] = arguments[j++];}
    return (this.length = i);
  };
}
Number.prototype.toCurrency = function(c, t, d) {
  var n = +this,
      s = (0 > n) ? '-' : '',
      m = String(Math.round(Math.abs(n))),
      i = '',
      j, f;
      c = c || '';
      t = t || '';
      d = d || '.';

  while (m.length < 3) {m = '0' + m;}
  f = m.substring((j = m.length - 2));
  while (j > 3) {i = t + m.substring(j - 3, j) + i; j -= 3;}
  i = m.substring(0, j) + i;
  return s + c + i + d + f;
};
Number.isReal = function(s) {
  return /^[+-]?(0|[1-9][0-9]*)(\.[0-9]+)?$/.test(s);
};

Hope that helps,
Mike


Damn you, Twey! I started writing this ages ago, and then you beat me to it.

Typical.

[Twey]

Lol. I daresay yours is better, though
I swear, it's almost as if you've actually read the JS (fine - ECMAScript) specifications
Also, I noticed a bug in that code last night, which I now can't remember - after, of course, I'd turned off the computer and was staring in a bored manner at the television.

[mwinter]

Lol.

It didn't take that long to write (toCurrency and push are prewritten), but I stopped for a few hours to do other things. Just before I was ready to post, you sent yours.

I swear, it's almost as if you've actually read the JS (fine - ECMAScript) specifications

Yes, I have. Several times, in fact.

Also, I noticed a bug in that code last night, which I now can't remember

That code? Mine or yours? I don't guarantee mine to be bug-free, but I don't see (or found in brief testing) anything particularly obvious.

Mike

[Twey]

Mine, I hadn't seen yours then.

[mossawi]

wow, thx guys, much much appreciated, thax a lot, ill test it n get back to u, thanks again.!!!!

[mossawi]

oh and mwinter how do i place the code? does it have to be bwtween <script> tags and can it be anyweher in the html code?

thx a gain

[mwinter]

[...] how do i place the code? does it have to be bwtween <script> tags

Yes, like in Twey's post.

and can it be anyweher in the html code?

It can be inserted anywhere, but I would place it in the head element.

Mike