Question

我正在尝试创建一个订单表单，该表单将从不同窗口小部件类型中选择的值相加，提交时没有输出。我不确定我是做对了还是走错了方向？是我尝试选择值的方法实际上是与if语句一起使用的方法，还是还有另一种选择值的方法？

var size = document.getElementById('pizzaSize').value;

if (document.getElementById('pepperoni').selected) {
  var pepperoni = 1.50;
}
if (document.getElementById('mushrooms').selected) {
  var mushrooms = 1.50;
}
if (document.getElementById('peppers').selected) {
  var peppers = 1.50;
}
if (document.getElementById('pesto').selected) {
  var pesto = 2.00;
}

function totalPizza() {

  var total = parseInt(size + pepperoni + mushrooms + peppers + pesto);

  var tax = parseInt(total * '.10');
  var totalPlusTax = parseInt(total + tax);

  document.getElementById("total").innerHTML = "Subtotal: " + total;
  document.getElementById("tax").innerHTML = "Sales Tax: " + tax;
  document.getElementById("totalTax").innerHTML = "Total: " + totalPlusTax;
}

<h2 id="heading">Pizza Order Form</h2>
<form id="pizzaOrder" action="#">
  <label for="name">Name</label><br>
  <input placeholder="First Last" type="text" name="name" id="name" minlength="5" maxlength="30"><br><br>
  <label id="pizzaSize" for="size">Pizza Size</label><br>
  <input name="size" type="radio" id="size" value="4">Personal<br>
  <input name="size" type="radio" id="size" value="6">Small<br>
  <input name="size" type="radio" id="size" value="8">Medium<br>
  <input name="size" type="radio" id="size" value="10">Large<br>
  <br>
  <label for="crust">Crust Type</label><br>
  <select id="crust" name="crust">
    <option value="thin">Thin</option>
    <option value="regular">Regular</option>
    <option value="pan">Pan</option>
    <option value="stuffed">Stuffed</option>
  </select>
  <br><br>
  <label for="toppings">Toppings:</label><br>
  <label for="pepperoni">Pepperoni</label>
  <input type="checkbox" id="pepperoni" name="toppings" value="1.50"><br>
  <label for="mushrooms">Mushrooms</label>
  <input type="checkbox" id="mushrooms" name="toppings" value="1.50"><br>
  <label for="peppers">Green Peppers</label>
  <input type="checkbox" id="peppers" name="toppings" value="1.50"><br>
  <label for="pesto">Pesto</label>
  <input type="checkbox" id="pesto" name="toppings" value="2"><br>
  <br><button type="submit" onsubmit="totalPizza();">Place Order</button>
</form>
<p id="total"></p>
<p id="tax"></p>
<p id="totalTax"></p>

谢谢您的任何建议。

Answer 1

使用onclick="totalPizza()"代替onsubmit。 onsubmit是torm标记的事件，不是button的事件。

Answer 2

您需要做几件事，以便您的代码可以按预期工作。

将onsubmit移至form（Read more）
您不希望提交表单，因此需要使用event.preventDefault停止提交
您有多个具有相同ID的元素。您应该避免使用它，而您实际上并不需要它。要获取单选按钮列表的值，请搜索:checked并获取其值（See that answer）
将所有逻辑移到函数中，以便每次点击都会计算所有输入。
税额计算也有小的变化。

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <title>Pizza</title>
</head>

<body>
  <h2 id="heading">Pizza Order Form</h2>
  <form id="pizzaOrder" action="#" onsubmit="totalPizza(event)">
    <label for="name">Name</label><br>
    <input placeholder="First Last" type="text" name="name" id="name" minlength="5" maxlength="30"><br><br>
    <label id="pizzaSize" for="size">Pizza Size</label><br>
    <input name="size" type="radio" value="4">Personal<br>
    <input name="size" type="radio" value="6">Small<br>
    <input name="size" type="radio" value="8">Medium<br>
    <input name="size" type="radio" value="10">Large<br>
    <br>
    <label for="crust">Crust Type</label><br>
    <select id="crust" name="crust">
      <option value="thin">Thin</option>
      <option value="regular">Regular</option>
      <option value="pan">Pan</option>
      <option value="stuffed">Stuffed</option>
    </select>
    <br><br>
    <label for="toppings">Toppings:</label><br>
    <label for="pepperoni">Pepperoni</label>
    <input type="checkbox" id="pepperoni" name="toppings" value="1.50"><br>
    <label for="mushrooms">Mushrooms</label>
    <input type="checkbox" id="mushrooms" name="toppings" value="1.50"><br>
    <label for="peppers">Green Peppers</label>
    <input type="checkbox" id="peppers" name="toppings" value="1.50"><br>
    <label for="pesto">Pesto</label>
    <input type="checkbox" id="pesto" name="toppings" value="2"><br>
    <br><button type="submit">Place Order</button>
  </form>
  <p id="total"></p>
  <p id="tax"></p>
  <p id="totalTax"></p>
  <script>
    function totalPizza(e) {
      e.preventDefault();
      var size = document.querySelector('input[name="size"]:checked').value;

      if (document.getElementById('pepperoni').selected) {
        var pepperoni = 1.50;
      }
      if (document.getElementById('mushrooms').selected) {
        var mushrooms = 1.50;
      }
      if (document.getElementById('peppers').selected) {
        var peppers = 1.50;
      }
      if (document.getElementById('pesto').selected) {
        var pesto = 2.00;
      }

      var total = parseInt(size + pepperoni + mushrooms + peppers + pesto);

      var tax = (total * 0.1).toFixed(2);
      var totalPlusTax = total + tax;

      document.getElementById("total").innerHTML = "Subtotal: " + total;
      document.getElementById("tax").innerHTML = "Sales Tax: " + tax;
      document.getElementById("totalTax").innerHTML = "Total: " + totalPlusTax;
    }
  </script>
</body>

</html>

让我知道是否不清楚。

Answer 3

请参考以下示例进行以下更改：

将onsubmit属性从按钮移动到表单元素
您不需要独立的if语句来设置值，只需遍历输入并寻找checked状态
使用event.preventDefault停留在页面上（并防止其离开/重新加载页面）
使用parseFloat而不是parseInt来捕获小数位
使用.toFixed格式化结果以解决浮点算法的问题-注意：这不是一个完整的解决方案，但是解决了该演示的简单情况。要解决/减轻潜在的浮点数学问题，将需要一个更复杂的库
使用“ $”表示货币价值

（有关其他更改，请参见底部）

function totalPizza() {
  event.preventDefault() // prevent form from switching pages

  let subtotal = 0
  let inputs = document.querySelectorAll('input,select')

  inputs.forEach(input => {
    if (input.checked)
      subtotal += parseFloat(input.value)
  })

  let tax = parseFloat(subtotal * '.10');
  let total = parseFloat(subtotal + tax);

  document.querySelector("#subtotal").innerHTML = "Subtotal: $"  + subtotal.toFixed(2);
  document.querySelector("#tax").innerHTML      = "Sales Tax: $" + tax.toFixed(2);
  document.querySelector("#totalTax").innerHTML = "Total: $"     + total.toFixed(2);
}

label {
  display: block;
}

.mt-1 {
  margin-top: 1rem;
}

.row {
  display: flex;
}

.col {
  margin: 0 2rem;
}

<h2 id="heading">Pizza Order Form</h2>
<div class="row">
  <div class="col">
    <form id="pizzaOrder" action="#" onsubmit="totalPizza()">

      <label for="name">Name</label>
      <input placeholder="First Last" type="text" name="name" id="name" minlength="5" maxlength="30">

      <label class="mt-1" id="pizzaSize">Pizza Size</label>
      <label><input name="size" type="radio" value="4"> Personal</label>
      <label><input name="size" type="radio" value="6"> Small</label>
      <label><input name="size" type="radio" value="8"> Medium</label>
      <label><input name="size" type="radio" value="10"> Large</label>

      <label class="mt-1" for="crust">Crust Type</label>
      <select id="crust" name="crust">
        <option value="thin">Thin</option>
        <option value="regular">Regular</option>
        <option value="pan">Pan</option>
        <option value="stuffed">Stuffed</option>
      </select>

      <label class="mt-1" for="toppings">Toppings:</label>
      <label for="pepperoni"><input type="checkbox" id="pepperoni" name="toppings" value="1.50"> Pepperoni</label>
      <label for="mushrooms"><input type="checkbox" id="mushrooms" name="toppings" value="1.50"> Mushrooms</label>
      <label for="peppers"><input type="checkbox" id="peppers" name="toppings" value="1.50"> Green Peppers</label>
      <label for="pesto"> <input type="checkbox" id="pesto" name="toppings" value="2"> Pesto</label>

      <button class="mt-1" type="submit">Place Order</button>
    </form>
  </div>
  <div class="col">
    <p id="subtotal"></p>
    <p id="tax"></p>
    <p id="totalTax"></p>
  </div>
</div>

布局更改

还添加了一些行/列div用于布局
将输入放置在label内以改善UI（单击标签以选择输入）
删除了br元素，并添加了CSS间距
删除了重复的id属性（只能有一个唯一的属性）

总计订单表

3 个答案:

布局更改