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

时间:2016-03-30 05:57:11

标签: javascript html

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



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>
&#13;
&#13;
&#13;

我需要使用以下约束来计算订单总数

一个选择框,其中包含运输方式选择(值应为标准 - 免费; 3天 - 10美元;以及次日 - 25美元)

为任何订单添加7%的销售税。

小工具1价值5美元

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

1 个答案:

答案 0 :(得分:0)

检查以下答案。

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>