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

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

Затем в функции, вы можете легко ссылаться на другие элементы управления. Не забудьте сохранить локальные переменные с варом и умножение неявно преобразует значения Number:

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

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

Для размещения, ваш HTML может быть столь же просто, как:

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

Answer 2

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

disabled="disabled" 

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

Answer 3

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

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

Вы можете установить тип входа, чтобы скрыть, чтобы скрыть текстовое поле вместо установки только для чтения или отключить атрибут, значение 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>