making a calculator

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.

please anyone

HTML Code:

---

<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>

---

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".

HTML Code:

---

<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>

---

Code:

---

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! :mad: I started writing this ages ago, and then you beat me to it. :p

Typical. :rolleyes:

Lol. :) I daresay yours is better, though :(
I swear, it's almost as if you've actually read the JS (fine - ECMAScript) specifications :p
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.

Quote:

---

Originally Posted by Twey

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.

Quote:

---

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

---

Yes, I have. Several times, in fact. :D

Quote:

---

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

Mine, I hadn't seen yours then.

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

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

Quote:

---

Originally Posted by mossawi

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

---

Yes, like in Twey's post.

Quote:

---

and can it be anyweher in the html code?

---

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

Mike

thx both of u, really appreciating this, thx again

oh n sory 1 last request in urs mwinter :P

can you put the price before tax and after tax to show, jsut like tweys? thanks man

Code:

---

<form action="">
  <label>Item price: <input type="text" name="price"></label>
  <label>Shipping charge: <input type="text" name="shipping"></label>
  <label>Subtotal: <input type="text" name="subtotal"></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>

---

Code:

---

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('$');
  e.subtotal.value = (+p + (+s)).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);
};

---

Haven't got a clue what the difference between (s) and (+s) is, I just included it because Mike did :p

thx bro

Im setting up a website that needs to have a calculator similiar to this link:
https://www.101incorporate.com/incorporation-order.htm

The user need to be able to click on things and the calculator need to change according to the different packages and items they select. And the calculator will total it out.

Can anyone help me? Please. Thanks! :)

Perhaps DD can help move this post. But this question really belongs in the requesting script thread

I know this can be done in PHP and JS, it just depends on what you want/need/are able to use