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

• javascript
• html
• cumulative-sum
• quantify

• 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 Commented Apr 17, 2015 at 2:59
• what do you want Precisely ? – user4790427 Commented Apr 17, 2015 at 3:03
• 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. – zed Commented Apr 17, 2015 at 3: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 Commented Apr 17, 2015 at 3:04
• you can use disabled or readonly html attribute and check data in server because Spambots can change it easy . – user4790427 Commented Apr 17, 2015 at 3:10

4 Answers 4

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

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>

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.

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>