如何使用选择框输入进行计算？ HTML 和 JS答案

【问题标题】：How do you use a select box input for a calculation? HTML and JS如何使用选择框输入进行计算？ HTML 和 JS
【发布时间】：2016-03-30 05:57:10
【问题描述】：

如何从选定的下拉框中获取金额？比如

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% 的销售税。

小部件 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>

【问题讨论】：

parseInt() ?论据在哪里？
我看到了另一个以前的线程，但仍然不确定它是如何运作的。生病添加我试图实现这个逻辑的代码。我还会添加一张我的目标图片以获得最终结果。给我一秒钟将其添加到帖子中

标签： javascript html

【解决方案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>

【讨论】：