Подсчет суммы от количества продукта

Question

Я создаю веб-сайт для ресторана и хочу, чтобы пользователи могли выбирать, сколько еды они хотели бы заказать. Я очень плохо знаком с JavaScript и сейчас иду в школу, но пока мне нужна помощь с этим вопросом.

У меня так далеко, что он будет рассчитывать общее количество на основе количества и цены, проблема, с которой я сталкиваюсь, заключается в том, что клиент может изменить цену! Как я могу изменить это и не менять свой код слишком сильно, поскольку мне понадобилось целое время, чтобы заставить его работать.

Вот мой 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>

И мой простой скрипт:

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

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

Answer 1

"… Мне понадобилось целую вечность, чтобы заставить его работать"

Некоторые намеки:

Предположительно элементы управления находятся в форме, так что вы можете использовать это для более удобной ссылки на элементы. Начните с передачи ссылки из элемента, вызывающего слушателя:

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

Тогда в вашей функции вы можете более легко ссылаться на другие элементы управления. Не забудьте оставить переменные локальными с помощью var, а умножение неявно преобразует значения в Number:

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

Следуйте рекомендациям других пользователей, чтобы сделать общее чтение только для чтения, и примените проверку на сервере, чтобы убедиться, что вы получаете приемлемые данные (проверка на стороне клиента предназначена только для удобства, она не имеет значения для безопасности или очистки данных).

Для публикации ваш HTML может быть таким простым:

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

Answer 2

Вы можете добавить readonly или же disabled приписать поле цены.

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 3

Вы можете установить тип ввода скрытым, чтобы скрыть текстовое поле, вместо того, чтобы устанавливать атрибут readonly или отключенный атрибут, значение PPRICE также можно получить с помощью JavaScript:

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

Answer 4

Добавьте следующий атрибут к входу PPRICE, чтобы предотвратить изменение цены большинством пользователей:

disabled="disabled"

Важно не доверять этим данным, если они отправляются на сервер, хотя они по-прежнему доступны для редактирования, но не легко.