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

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

Answer 2

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.

Answer 3

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>

Answer 4

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>