查看表格以计算项目的总成本

Question

所以我正在制作一个电子商务风格的网站，人们可以在其中购买智能手机。在这个网站上，我有一个结帐表格，用户可以在其中选择他们希望选择的手机，然后根据数量显示用户的总费用。但是，由于我使用的是下拉选项，我不确定如何获取手机的价值，将其乘以数量并在底部显示总成本。

div class="contact-wrap">
  <div class="title-box">
  <b>Check Out</b>
  </div>

  <div id="form1">

  <img id="phone" src="iphone6.jpg" width="294" height="320"/>
  <select id="phoneList">
    <option value="iphone1.jpg">Apple iPhone 11 Pro Max (2019) 512GB Silver</option>
    <option value="iphone2.jpg">Apple iPhone 11 (2019) 128GB Black</option>
    <option value="iphone3.jpg">Apple iPhone 11 (2019) 256GB White</option>
  </select>

  <select id="quantity">
    <p>Quantity</p>
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
    <option value="4">4</option>
    <option value="5">5</option>
  </select>
  </div>

  <div id="form2">
  <form name="myForm" action="/action_page.php" onsubmit="return validateForm()" method="post">
  <p>First name: </p><input type="text" name="fname">
  <p>Last name: </p><input type="text" name="lname">
  <p>Email address: </p><textarea id="email" rows = "1" cols = "40" name="email"></textarea>
  <p>Shipping address </p><textarea id="shipping" rows = "6" cols = "40" name="shipping"></textarea><br>
  <input style="float:bottom; margin-top:20px" type="submit" value="Order">
  </form>
  </div>

  </div>
  <script>
      function setPhone() {
    var img = document.getElementById("phone");
    img.src = this.value;
    return false;
}
document.getElementById("phoneList").onchange = setPhone;

      function validateForm() {
  var x = document.forms["myForm"]["fname"].value;
  var y = document.forms["myForm"]["lname"].value;
  var email = document.forms["myForm"]["email"].value;
  var shipping = document.forms["myForm"]["shipping"].value;

  if (x == "") {
    alert("First name must be filled out");
    return false;
  }
  else if (y == "") {
    alert("Last name must be filled out");
    return false;
  }
  else if (parseInt("0"+x, 10) > 0 || parseInt("0"+y, 10) > 0){
    alert("Numbers not permissable for name");
    return false;
  }
  else if (email == "") {
    alert("Email must be filled out");
    return false;
  }
  else if (shipping == "") {
    alert("Shipping address must be filled out");
    return false;
  }

}
  </script>

Answer 1

对您的选择进行一些细微的编辑以包含属性，使其如下所示：

<select id="phoneList">
    <option value="iphone1.jpg" data-cost="100">Apple iPhone 11 Pro Max (2019) 512GB Silver</option>
    <option value="iphone2.jpg" data-cost="200">Apple iPhone 11 (2019) 128GB Black</option>
    <option value="iphone3.jpg" data-cost="300">Apple iPhone 11 (2019) 256GB White</option>
</select>

然后通过使用

获取选定的索引和上面定义的数据成本

var i = phoneList.selectedIndex;
var phoneCost = document.getElementById("phoneList").getElementsByTagName("option")[i].getAttribute("data-cost");

您可以获得所选手机的费用。

然后只需将手机的成本乘以来自

的数量

document.getElementById("quantity").value;

并将其显示在页面的某个位置。

因此，当用户在下拉菜单中选择一个选项时，调用一个函数

<script>
function CalcCosts() {
    //Get user selected items
    var i = phoneList.selectedIndex;
    var phonecost = document.getElementById("phoneList").getElementsByTagName("option")[i].getAttribute("data-cost");
    var quantity = parseInt(document.getElementById("quantity").value);

    //Display on page
    document.getElementById("PLACETODISPLAY").innerHTML = phonecost * quantity;
}
</script>

您可以使用下拉菜单的 onclick 调用该函数，如下所示

<select id="quantity" onclick="CalcCosts()">
    <p>Quantity</p>
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
    <option value="4">4</option>
    <option value="5">5</option>
</select>

编辑： 包括来自 cmets 的建议。