使用HTML和Java将两个不同的值分配给一个选择变量

时间：2018-07-29 20:22:02

标签： java html forms calculation

我正处于创建计算表的初期，向用户显示旅行费用。

当用户从下拉菜单中选择“包裹”时，我需要他们在两个单独的列中同时查看“每次”费用和“总计费用”。这些已经预先确定，类似于以下内容。

Package drop down and results

我看过其他类似的帖子，但没有找到解决方法。

作为示例，在下面的代码中，我将需要“ Gold52在每个coluln中具有2425，在总计列中具有4850。

//Set up an associative array 
//The keys represent the filling type
//The value represents the cost of the filling i.e. Lemon filling is $5,Dobash filling is $9
//We use this this array when the user selects a filling from the form
var filling_prices = new Array();
filling_prices["None"] = 0;
filling_prices["silver31"] = 5;
filling_prices["silver32"] = 7;
filling_prices["silver33"] = 8;
filling_prices["silver34"] = 10;
filling_prices["silver41"] = 5;
filling_prices["silver42"] = 9;
filling_prices["silver43"] = 5;
filling_prices["silver44"] = 5;
filling_prices["silver51"] = 8;
filling_prices["silver52"] = 7;
filling_prices["silver53"] = 12;
filling_prices["silver54"] = 12;
filling_prices["gold31"] = 5;
filling_prices["gold32"] = 7;
filling_prices["gold33"] = 8;
filling_prices["gold34"] = 10;
filling_prices["gold41"] = 5;
filling_prices["gold42"] = 9;
filling_prices["gold43"] = 5;
filling_prices["gold44"] = 5;
filling_prices["gold51"] = 8;
filling_prices["gold52"] = 7;
filling_prices["gold53"] = 12;
filling_prices["gold54"] = 12;
filling_prices["platinum31"] = 5;
filling_prices["platinum32"] = 7;
filling_prices["platinum33"] = 8;
filling_prices["platinum34"] = 10;
filling_prices["platinum41"] = 5;
filling_prices["platinum42"] = 9;
filling_prices["platinum43"] = 5;
filling_prices["platinum44"] = 5;
filling_prices["platinum51"] = 8;
filling_prices["platinum52"] = 7;
filling_prices["platinum53"] = 12;
filling_prices["platinum54"] = 12;
filling_prices["vip31"] = 5;
filling_prices["vip32"] = 7;
filling_prices["vip33"] = 8;
filling_prices["vip34"] = 10;
filling_prices["vip41"] = 5;
filling_prices["vip42"] = 9;
filling_prices["vip43"] = 5;
filling_prices["vip44"] = 5;
filling_prices["vip51"] = 8;
filling_prices["vip52"] = 7;
filling_prices["vip53"] = 12;
filling_prices["vip54"] = 12;
filling_prices["sunshine41"] = 5;
filling_prices["sunshine42"] = 9;
filling_prices["sunshine43"] = 5;
filling_prices["sunshine44"] = 5;
filling_prices["sunshine51"] = 8;
filling_prices["sunshine52"] = 7;
filling_prices["sunshine53"] = 12;
filling_prices["sunshine54"] = 12;


//This function finds the filling price based on the 
//drop down selection
function getFillingPrice() {
  var cakeFillingPrice = 0;
  //Get a reference to the form id="cakeform"
  var theForm = document.forms["cakeform"];
  //Get a reference to the select id="filling"
  var selectedFilling = theForm.elements["filling"];

  //set cakeFilling Price equal to value user chose
  //For example filling_prices["Lemon".value] would be equal to 5
  cakeFillingPrice = filling_prices[selectedFilling.value];

  //finally we return cakeFillingPrice
  return cakeFillingPrice;
}

//candlesPrice() finds the candles price based on a check box selection
function candlesPrice() {
  var candlePrice = 0;
  //Get a reference to the form id="cakeform"
  var theForm = document.forms["cakeform"];
  //Get a reference to the checkbox id="includecandles"
  var includeCandles = theForm.elements["includecandles"];

  //If they checked the box set candlePrice to 5
  if (includeCandles.checked == true) {
    candlePrice = 5;
  }
  //finally we return the candlePrice
  return candlePrice;
}


function calculateTotal() {
  //Here we get the total price by calling our function
  //Each function returns a number so by calling them we add the values they return together
  var cakePrice = getFillingPrice() + candlesPrice();

  //display the result
  var divobj = document.getElementById('totalPrice');
  divobj.style.display = 'block';
  divobj.innerHTML = "Total Price For Your trip $" + cakePrice;

}

function hideTotal() {
  var divobj = document.getElementById('totalPrice');
  divobj.style.display = 'none';
}
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
  <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
  <title>Cake Form</title>
  <script type="text/javascript" src="js/formcalculations.js"></script>
  <link href="styles/cakeform.css" rel="stylesheet" type="text/css" />
</head>

<body onload='hideTotal()'>
  <div id="wrap">
    <form action="" id="cakeform" onsubmit="return false;">
      <div>
        <div class="cont_order">
          <fieldset>
            <legend>Calculate your Trip!</legend>
            <label>Package</label>
            <select id="filling" name='filling' onchange="calculateTotal()">
              <option value="None">Select Filling</option>
              <option value="silver31" pkg-each="1,575" pkg-each="1,575">Silver - 3-Night - 1 Person - ($1,575 Each / $1,575 Total)</option>
              <option value="silver32">Silver - 3-Night - 2 Person - ($1,175 Each / $2,350 Total)</option>
              <option value="silver33">Silver - 3-Night - 3 Person - ($1,050 Each / $3,150 Total)</option>
              <option value="silver34">Silver - 3-Night - 4 Person - ($950 Each / $3,800 Total)</option>
              <option value="silver31">Silver - 4-Night - 1 Person - ($1,975 Each / $1,975 Total)</option>
              <option value="silver32">Silver - 4-Night - 2 Person - ($1,575 Each / $3,150 Total)</option>
              <option value="silver33">Silver - 4-Night - 3 Person - ($1,375 Each / $4,125 Total)</option>
              <option value="silver34">Silver - 4-Night - 4 Person - ($1,250 Each / $5,000 Total)</option>
              <option value="silver31">Silver - 5-Night - 1 Person - ($2,375 Each / $2,375 Total)</option>
              <option value="silver32">Silver - 5-Night - 2 Person - ($1,775 Each / $3,350 Total)</option>
              <option value="silver33">Silver - 5-Night - 3 Person - ($1,475 Each / $4,425 Total)</option>
              <option value="silver34">Silver - 5-Night - 4 Person - ($1,375 Each / $5,500 Total)</option>
              <option value="gold31">Gold - 3-Night, 1 Person - ($1,950 Each / $1,950 Total)</option>
              <option value="gold32">Gold - 3-Night - 2 Person - ($1,500 Each / $3,000 Total)</option>
              <option value="gold33">Gold - 3-Night - 3 Person - ($1,375 Each / $4,125 Total)</option>
              <option value="gold34">Gold - 3-Night - 4 Person - ($1,275 Each / $5,100 Total)</option>
              <option value="gold41">Gold - 4-Night - 1 Person - ($2,475 Each / $$2,475 Total)</option>
              <option value="gold42">Gold - 4-Night - 2 Person - ($1,875 Each / $3,750 Total)</option>
              <option value="gold43">Gold - 4-Night - 3 Person - ($1,675 Each / $5,025 Total)</option>
              <option value="gold44">Gold - 4-Night - 4 Person - ($1,575 Each / $6,300 Total)</option>
              <option value="gold51">Gold - 5-Night - 1 Person - ($2,875 Each / $2,875 Total)</option>
              <option value="gold52">Gold - 5-Night - 2 Person - ($2,225 Each / $4,450 Total)</option>
              <option value="gold53">Gold - 5-Night - 3 Person - ($1,975 Each / $5,925 Total)</option>
              <option value="gold54">Gold - 5-Night - 4 Person - ($1,775 Each / $7,100 Total)</option>
              <option value="platinum31">Platinum - 3-Night - 1 Person - ($2,500 Each / $2,500 Total)</option>
              <option value="platinum32">Platinum - 3-Night - 2 Person - ($2,150 Each / $4,300 Total)</option>
              <option value="platinum33">Platinum - 3-Night - 3 Person - ($2,025 Each / $6,075 Total)</option>
              <option value="platinum34">Platinum - 3-Night - 4 Person - ($1,950 Each / $7,800 Total)</option>
              <option value="platinum41">Platinum - 4-Night - 1 Person - ($3,025 Each / $3,025 Total)</option>
              <option value="platinum42">Platinum - 4-Night - 2 Person - ($2,525 Each / $5,050 Total)</option>
              <option value="platinum43">Platinum - 4-Night - 3 Person - ($2,375 Each / $7,125 Total)</option>
              <option value="platinum44">Platinum - 4-Night - 4 Person - ($2,275 Each / $9,100 Total)</option>
              <option value="platinum51">Platinum - 5-Night - 1 Person - ($3,475 Each / $3,475 Total)</option>
              <option value="platinum52">Platinum - 5-Night - 2 Person - ($2,875 Each / $5,750 Total)</option>
              <option value="platinum53">Platinum - 5-Night - 3 Person - ($2,775 Each / $8,325 Total)</option>
              <option value="platinum54">Platinum - 5-Night - 4 Person - ($2,475 Each / $9,900 Total)</option>
              <option value="vip31">VIP - 3-Night - 1 Person - ($4,300 Each / $4,300 Total)</option>
              <option value="vip32">VIP - 3-Night - 2 Person - ($3,950 Each / $7,900 Total)</option>
              <option value="vip33">VIP - 3-Night - 3 Person - ($3,850 Each / $11,550 Total)</option>
              <option value="vip34">VIP - 3-Night - 4 Person - ($3,750 Each / $15,000 Total)</option>
              <option value="vip41">VIP - 4-Night - 1 Person - ($4,825 Each / $4,825 Total)</option>
              <option value="vip42">VIP - 4-Night - 2 Person - ($4,325 Each / $8,650 Total)</option>
              <option value="vip43">VIP - 4-Night - 3 Person - ($4,225 Each / $12,675 Total)</option>
              <option value="vip44">VIP - 4-Night - 4 Person - ($4,025 Each / $16,100 Total)</option>
              <option value="vip51">VIP - 5-Night - 1 Person - ($5,075 Each / $5,075 Total)</option>
              <option value="vip52">VIP - 5-Night - 2 Person - ($4,575 Each / $9,150 Total)</option>
              <option value="vip53">VIP - 5-Night - 3 Person - ($4,325 Each / $12,975 Total)</option>
              <option value="vip54">VIP - 5-Night - 4 Person - ($4,175 Each / $16,700 Total)</option>
              <option value="Sunshine41">Sunshine - 4-Night - 1 Person - ($6,650 Each / $6,650 Total)</option>
              <option value="Sunshine42">Sunshine - 4-Night - 2 Person - ($6,125 Each / $12,250 Total)</option>
              <option value="Sunshine43">Sunshine - 4-Night - 3 Person - ($6,000 Each / $18,000 Total)</option>
              <option value="Sunshine44">Sunshine - 4-Night - 4 Person - ($5,900 Each / $23,600 Total)</option>
              <option value="Sunshine51">Sunshine - 5-Night - 1 Person - ($7,375 Each / $7,375 Total)</option>
              <option value="Sunshine52">Sunshine - 5-Night - 2 Person - ($6,675 Each / $13,350 Total)</option>
              <option value="Sunshine53">Sunshine - 5-Night - 3 Person - ($6,575 Each / $19,725 Total)</option>
              <option value="Sunshine54">Sunshine - 5-Night - 4 Person - ($6,375 Each / $25,500 Total)</option>
            </select>
            <br/>

            <p>
              <input type="checkbox" id="includecandles" name='includecandles' onclick="calculateTotal()" />
            </p>

            </p>
            <div id="totalPrice"></div>

          </fieldset>
        </div>
        <input type='submit' id='submit' value='Submit' onclick="calculateTotal()" />
        <input type='reset' id='reset' value='Reset' />
      </div>
    </form>
  </div>
  <!--End of wrap-->

</body>

</html>
<style>
  #wrap {
    width: 800px;
    margin: 0 auto;
    text-align: left;
    margin-top: 8px;
    padding: 5px;
    background: #fff;
    font-family: AvenirLTStd, Arial, Helvetica, sans-serif;
    font-size: 13px;
    line-height: 16px;
  }
  
  #wrap .cont_details fieldset,
  .cont_order fieldset {
    margin: 10px;
    padding: 20px;
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    -khtml-border-radius: 10px;
    border-radius: 10px;
  }
  
  #wrap legend {
    font-size: 16px;
    font-family: Georgia, "Times New Roman", Times, serif;
    color: #000;
    font-weight: bold;
    font-style: italic;
    padding-bottom: 10px;
  }
  
  #wrap .cont_details input {
    margin-bottom: 10px;
    color: #000;
  }
  
  #wrap .input1:hover,
  .input1:active {}
  
  #wrap label {
    display: block;
    font-size: 12px;
    color: #000;
    font-weight: bold;
  }
  
  #wrap label.inlinelabel {
    display: inline;
  }
  
  #wrap .cont_order input {
    margin-bottom: 5px;
  }
  
  #wrap .cont_order p {
    padding-top: 5px;
  }
  
  #wrap input[type="radio"] {
    margin-top: 8px;
    margin-bottom: 8px;
  }
  
  #wrap input[type="text"]:hover,
  #wrap input[type="text"]:active {
    background-color: #FAF398;
  }
  
  #wrap input#submit {
    margin: 10px;
    padding-left: 20px;
    padding-right: 20px;
    padding-top: 10px;
    padding-bottom: 10px;
  }
  
  #wrap input#reset {
    margin: 10px;
    padding-left: 20px;
    padding-right: 20px;
    padding-top: 10px;
    padding-bottom: 10px;
  }
  
  #wrap div#totalPrice {
    padding: 10px;
    font-weight: bold;
    background-color: #ff0;
  }
  
  #wrap label.radiolabel {
    font-weight: normal;
    display: inline;
  }
</style>

0 个答案:

没有答案
相关问题
最新问题