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

Question

How do I go about getting an amount from a selected drop down box? 如何从选定的下拉框中获取金额？ For instance 例如

 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>

I need to calculate an order total with the following constraints 我需要计算具有以下约束的订单总数

a select box which incorporates a shipping method selection (values should be Standard - free; 3-day - $10; and Next Day - $25) 一个包含运输方式选择的选择框（值应为Standard-免费； 3天-$ 10；次日-$ 25）

add 7% sales tax to any order. 向任何订单增加7％的营业税。

Widget 1 is worth $5 Widget 1价值$ 5

Widget 2 is worth $10 小部件2价值10美元

I need it to take widget 1 or 2s cash value and multiply it by the quanitity selected, for this case lets just say 5, or 10. It then will add another amount for the shipping cost that is selected. 我需要它获取小部件1或2s的现金价值，并将其乘以所选的数量，在这种情况下，请说5或10。然后它将为所选的运输成本添加另一个金额。 With that it will add a tax of 7% and then sends you and alert message with final cost. 这样，它将增加7％的税，然后向您发送警告消息和最终成本。 I already have part of the final message started from my other code. 我已经从其他代码开始了最后一条消息的一部分。 In the below code field 1 and field 2 are the customers first and last name. 在下面的代码字段1和字段2中是客户的名字和姓氏。

This is what I am trying to implement this for 这就是我正在尝试实现的目的

<!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

Check the below answer. 检查以下答案。

 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