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

您可以在价格字段中添加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 2

＆＃34; ...它让我永远工作＆＃34;

一些提示：

大概是控件是一种形式，所以你可以使用它来更容易地引用元素。首先从调用侦听器的元素传递引用：

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

然后在您的函数中，您可以更轻松地引用其他控件。请记住使用 var 保持变量本地，并且乘法隐式地将值转换为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 3

将以下属性添加到PPRICE输入，以防止大多数用户更改价格：

disabled="disabled"

如果将这些数据发送到服务器，那么重要的是不要相信这些数据，它仍然是可编辑的，只是不容易。

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>

根据产品数量计算总量

4 个答案: