0
如何從選定的下拉框中獲取金額？例如如何使用選擇框輸入進行計算？ HTML和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>我需要計算的順序總有以下限制
一個選擇框，其包含一個運送方法的選擇（值應標準 - 免費; 3天 - $ 10;第二天 - $ 25）
將7％的銷售稅添加到任何訂單。
的Widget 1價值$ 5
的Widget 2價值$ 10
我需要它採取小部件1或2秒的現金價值和選擇的quanitity相乘，對於這種情況下讓只說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>
'parseInt函數（）'？爭論在哪裏？ – Rayon
我看到了以前的其他線程，但仍不確定它是如何工作的。我添加我試圖實現這個邏輯的代碼。生病也爲我的目標添加一張最終結果的照片。給我一秒鐘後添加到帖子 –