Calculating a total from quantity of a product

Question

I am building a website for a restaurant and want users to be able to choose how much food they would like to order. I am very new to JavaScript and am going to school for it right now but in the meantime I need some help with this question.

I have it so far that it will calculate a total based on the quantity and the price, the problem that I am having is that the customer can change the price! How can I change this and not change my code too much since it has taken me forever to get it to work.

Here is my HTML:

<tr>
  <td>Bruschetta con Crema di Agliotoa</td>
  <td><input type="text" value="" name="QTY" id="QTY" onKeyUp="multiply()"/></td>
  <td><input type="text" name="PPRICE" id="PPRICE" value="8" /></td>
  <td><input type="text" name="TOTAL" id="TOTAL" /></td>
</tr>

And my simple script:

function multiply()
{
    a = Number(document.getElementById('QTY').value);
    b = Number(document.getElementById('PPRICE').value);
    c = a * b;

    document.getElementById('TOTAL').value = c;
}

I understand this is just an excercise, isn't it? You may replace your input PPRICE just with the price in plain html text; and then in javascript hardcode the price value. — zed, Apr 17 '15 at 02:59
If it must be an input, then you could make it disabled or readonly depending on what you need to do. Here is the [difference between them](http://stackoverflow.com/questions/7730695/whats-the-difference-between-disabled-disabled-and-readonly-readonly-for-ht). — zed, Apr 17 '15 at 03:04
Yes, this is an exercise/final assignment. The course is intro to HTML and we get bonus points for Javascript, so I am very very new at HTML and have like no knowledge of JS, just been fiddling around to figure it out. — Jenn Oliver, Apr 17 '15 at 03:04
you can use `disabled` or `readonly` html attribute and check data in server because Spambots can change it easy . — , Apr 17 '15 at 03:10
You probably also don't want the total to be editable since it's calculated. In fact it's probably best if your server receives only the quantity, and food identity and does the pricing and multiplying itself. It's fine to still show that data to the user but there's no need to send it via the form. — Always Learning, Apr 17 '15 at 03:14

score 1 · Answer 1 · answered Apr 17 '15 at 03:08

You can add a readonly or disabled attribute to the price field.

function multiply() {
  a = Number(document.getElementById('QTY').value);
  b = Number(document.getElementById('PPRICE').value);
  c = a * b;

  document.getElementById('TOTAL').value = c;
}

<tr>
  <td>Bruschetta con Crema di Agliotoa</td>
  <td>
    <input type="text" value="" name="QTY" id="QTY" onKeyUp="multiply()" />
  </td>
  <td>
    <input type="text" name="PPRICE" id="PPRICE" value="8" readonly/>
  </td>
  <td>
    <input type="text" name="TOTAL" id="TOTAL" />
  </td>
</tr>

Hey, I have been trying out this code, and it works great for 1 menu item, but when I add it to all of my menu items nothing works. Would you have a suggestion to make it work for all??? Thank you for you help! — Jenn Oliver, Apr 19 '15 at 16:31

score 1 · Accepted Answer · answered Apr 17 '15 at 03:14

1

"…it has taken me forever to get it to work"

Some hints:

Presumably the controls are in a form, so you can use that to more easily reference elements. Start by passing a reference from the element calling the listener:

<input name="QTY" onKeyUp="multiply(this)">

Then in your function, you can more easily reference other controls. Remember to keep variables local with var, and multiplication implicitly converts values to Number:

function multiply(element) {
    var form = element.form;
    form.TOTAL.value = element.value * form.PPRICE.value;
}

Follow other's suggestions regarding making the total readonly, and apply validation at the server to ensure you get acceptable data (client side validation is for convenience only, it has no value for security or data cleansing).

For posting, your HTML can be as simple as:

<form>
  <input name="QTY" onKeyUp="multiply(this)"><br>
  <input name="PPRICE" value="8"><br>
  <input name="TOTAL" readonly>
</form>

answered Apr 17 '15 at 03:14

RobG

142,382
31
172
209

So I am trying this out right now and it is not working, is it because, though I have everything in a form, it's a table within the form and it won't call to the table tag? – Jenn Oliver Apr 17 '15 at 04:10
Okay, I figured it out! I put each menu item into a form tag and it multiplies it beautifully! Thank you so much for showing me this, I really appreciate it! – Jenn Oliver Apr 17 '15 at 04:22
Okay, so I had to change my code so this is not a table anymore...I was told that putting each item into a form tag is not proper, is there a way to make it work for all menu items?? – Jenn Oliver Apr 19 '15 at 19:07
You can structure your menu in a table, then put that inside a form. Using a form for user input is absolutely "proper", though you may want to use span or div elements for display of calculated values. If you want help with that, ask another question. There should be plenty of resources around to help you with it though. – RobG Apr 20 '15 at 02:46

score 0 · Answer 3 · answered Apr 17 '15 at 03:03

0

Add the following attribute to the PPRICE input to prevent most users changing the price:

disabled="disabled"

It is important to not trust this data if it is being sent to a server though, it is still editable, just not easily.

answered Apr 17 '15 at 03:03

meiamsome

2,876
1
17
19

score 0 · Answer 4 · answered Apr 17 '15 at 03:24

You can set input type to hidden to hide the text box instead of setting readonly or disabled attribute, the value of PPRICE can be retrieve by JavaScript as well:

<tr>
  <td>Bruschetta con Crema di Agliotoa</td>
  <td>
    <input type="text" value="" name="QTY" id="QTY" onKeyUp="multiply()" />
  </td>
  <td>
    <input type="hidden" name="PPRICE" id="PPRICE" value="8"/>
    8
  </td>
  <td>
    <input type="text" name="TOTAL" id="TOTAL" />
  </td>
</tr>

Calculating a total from quantity of a product

4 Answers4