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

How do you use a select box input for a calculation? HTML and JS

本文关键字：计算 HTML JS 何使用 选择 输入      更新时间：2023-09-26

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

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或2的现金值，并将其乘以所选的数量，在这种情况下，我们只说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>

相关文章：