签出表单以计算项目的总成本

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>

编辑：包括来自评论的建议。