如何使用選擇框輸入進行計算？ HTML和JS

Question

如何從選定的下拉框中獲取金額？ 例如

 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>

Answer 1

檢查以下答案。

 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>

如何使用選擇框輸入進行計算？ HTML和JS

問題描述

1 個解決方案

解決方案1
0 已采納 2016-03-30 06:09:27

如何使用選擇框輸入進行計算？ HTML和JS

問題描述

1 個解決方案

解決方案1 0 已采納 2016-03-30 06:09:27

解決方案1
0 已采納 2016-03-30 06:09:27