javascript - 查看表格以计算项目的总成本
问题描述
所以我正在制作一个电子商务风格的网站,人们可以在其中购买智能手机。在这个网站上,我有一个结帐表格,用户可以在其中选择他们希望选择的手机,然后根据数量显示用户的总费用。但是,由于我使用的是下拉选项,我不确定如何获得手机的价值,将其乘以数量并在底部显示总成本。
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>
解决方案
对您的选择进行一些细微的编辑以包含属性,使其如下所示:
<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>
编辑:包括评论中的建议。
推荐阅读
- azure-cosmosdb - 具有多主配置的多个区域中的 CosmosDB 更改源
- c# - 在 Linq 中将 List 转换为 IQueryable 的问题
- python - 在一个图中绘制多个(2)seaborn联合图(重叠)
- webpack - Webpack 和 GLSL 着色器
- python - 停止 pytest 错误但不失败
- ruby-on-rails - Rails 5 按任务数量对用户进行排名
- jquery - jquery - 来自另一个函数的引用值
- javascript - 如何在 reactjs 中处理时间选择器选择
- java - Java MySQl - 过于频繁地打开和关闭连接?
- python - 如何在 keras CNN 中使用黑白图像?