![](/img/trans.png)
[英]How to get input box values and the select box values to store it in array and do calculation
[英]How do you use a select box input for a calculation? HTML and JS
如何从选定的下拉框中获取金额? 例如
var alertMessage = 'Thanks for the order ' + field1 + ' ' + field2 + '. Your total is $' + String(parseInt() * parseInt()) + '.00.'; alert(alertMessage);
Select a product: <br> <select id="productselection"> <option value="blank"></option> <option value="5">Widget 1</option> <option value="10">Widget 2</option> </select> <br>Select a quantitiy: <br> <select id="quantityselection"> <option value="blank"></option> <option value="5">5</option> <option value="10">10</option> </select> <br>Select a Shipping Method: <br> <select id="shippingselection"> <option value="blank"></option> <option value="0">Standard - Free</option> <option value="10">3 day - $10</option> <option value="25">Next Day - $25</option> </select>
我需要计算具有以下约束的订单总数
一个包含运输方式选择的选择框(值应为Standard-免费; 3天-$ 10;次日-$ 25)
向任何订单增加7%的营业税。
Widget 1价值$ 5
小部件2价值10美元
我需要它获取小部件1或2s的现金价值,并将其乘以所选的数量,在这种情况下,请说5或10。然后它将为所选的运输成本添加另一个金额。 这样,它将增加7%的税,然后向您发送警告消息和最终成本。 我已经从其他代码开始了最后一条消息的一部分。 在下面的代码字段1和字段2中是客户的名字和姓氏。
这就是我正在尝试实现的目的
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="styles.css"> <!-- links stylesheet -->
<h1>JS Order Form</h1> <!-- Heading -->
</head>
<body>
<script src="script.js"> <!--links js -->
</script>
<div align="center">
<form id="myForm">
<fieldset>
<legend>Personal Information:</legend> <!-- first Form with first and last name-->
First Name: <input type="text" id="field1" name="fname"><br><br>
Last Name: <input type="text" id="field2" name="lname"><br>
</fieldset>
</form>
</div>
<br>
<div align="center">
<form id="myForm1"> <!-- form 2-->
<fieldset>
<legend>Order Info:</legend>
<table style="width:100%">
<table align="left"> <!-- Setting table constraints-->
<table border="1">
<tr>
<td>Product</td>
<td>Price</td>
</tr>
<tr>
<td>Widget 1</td> <!-- table contents-->
<td>$5</td>
</tr>
<tr>
<td>Widget 2</td>
<td>$10</td>
</tr>
</table>
<br>
<!-- form 2 with price and quanitity-->
<!--Price : <input type="text" id="field3" name="pname"><br><br>
Quantity: <input type="text" id="field4" name="qname"><br> -->
Select a product:<br>
<select id="productselection">
<option value="blank"></option>
<option value="5">Widget 1</option>
<option value="10">Widget 2</option>
</select>
<br>
Select a quantitiy:<br>
<select id="quantityselection">
<option value="blank"></option>
<option value="5">5</option>
<option value="10">10</option>
</select>
<br>
Select a Shipping Method:<br>
<select id="shippingselection">
<option value="blank"></option>
<option value="0">Standard - Free</option>
<option value="10">3 day - $10</option>
<option value="25">Next Day - $25 2</option>
</select>
</div>
</fieldset>
</form>
<div align="center">
<input type="button" onclick="myFunction();myFunction2() ;blankElement('productselection') ;blankElement('shippingselection') ;blankElement('quantityselection');" value="Clear"> <!-- submit and clear buttons-->
<input type="button" onclick="myFunction1()" value="Order">
</div>
function myFunction() {
document.getElementById("myForm").reset(); //grabs form and clears entrys
}
function myFunction2() {
document.getElementById("myForm1").reset(); // clears bottom form
}
function blankElement(id)
{
var element = document.getElementById(id);
element.value = blank;
}
function myFunction1()
{
var field1 = document.getElementById("field1").value.trim();
var field1Valid= true;
var field2 = document.getElementById("field2").value.trim(); // checks to see that a value is inputed
var field2Valid= true;
if ( field1.length == 0)
{
field1Valid= false;
} // the following checks to see if anything is inputed and returns a true or false/yes or no
if ( field2.length == 0)
{
field2Valid= false;
}
var formValid= field1Valid && field2Valid && field3Valid && field4Valid; //true if all fields are valid else false
if( !formValid){
var alertMessage= 'Please fill in the following '; //sets a var alert message if it meets criteria
if( !field1Valid){ alertMessage+= '[First Name] '; }
if( !field2Valid){ alertMessage+= '[Last Name] '; } // adds the following fields to the alert if they did not meet criteria of being full
alert(alertMessage);
return false;
}
else{
var alertMessage= 'Thanks for the order '+ field1+ ' '+ field2+ '. Your total is $'+ String(parseInt() * parseInt() )+ '.00.';
alert(alertMessage);
return true; // pushes out alert message by using field1 and field 2 and then multipling field 3 and 4 together to get a total
}
}
</body>
</html>
检查以下答案。
function Calculate() { var f1 = document.getElementById("productselection"); var field1 = parseInt(f1.options[f1.selectedIndex].value); var f2 = document.getElementById("quantityselection"); var field2 = parseInt(f2.options[f2.selectedIndex].value); var alertMessage = 'Thanks for the order ' + field1 + ' x ' + field2 + '. Your total is $' + (field1 * field2).toFixed(2); alert(alertMessage); }
Select a product: <br> <select id="productselection"> <option value="blank"></option> <option value="5">Widget 1</option> <option value="10">Widget 2</option> </select> <br>Select a quantitiy: <br> <select id="quantityselection"> <option value="blank"></option> <option value="5">5</option> <option value="10">10</option> </select> <br>Select a Shipping Method: <br> <select id="shippingselection"> <option value="blank"></option> <option value="0">Standard - Free</option> <option value="10">3 day - $10</option> <option value="25">Next Day - $25</option> </select> <br> <br> <button type="button" onClick="Calculate()">Calculate</button>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.