如何计算表格中的数学并使用javascript将数据插入文本输入?

时间:2016-09-27 06:31:16

标签: javascript html

我一直在寻找这个问题的解决方案大约3天无济于事。所以我决定发一个关于它的问题。

在这种形式中,我试图从两个表单元素中获取数据,找出一个百分比,并将该数据输入到文本输入和隐藏的输入元素中。

HTML

<head><script type="text/javascript" src="vali.js" async></script></head>
<body onload="hideTotal()">
<form class="form-horizontal" id="req_serv" name="req_serv" method="post" action="index.php">
<label>Order Total :</label>
<input class="form-control" id="ordertot" type="number" name="ordertot" placeholder="$0.00" onkeyup="calculateTotal()" />
<span class="error"><?php echo $ordertotError;?></span>
<label>Service & Fee</label>
<select class="form-control" id="servfee" name="servfee" onchange="calculateTotal()">
    <option value="none">Select Service</option>
    <option value="ref_thou_less">Refunds</option>
    <option value="ref_thou_more">Refunds++</option>
    <option value="rep_thou_less">Replacements</option>
    <option value="rep_thou_more">Replacements++</option>
    <option value="dbl_reprep_thou_less">Double Dip</option>
    <option value="dbl_reprep_thou_more">Double Dip++</option>
    <option value="dbl_repref_thou_less">Double Dip+++</option>
    <option value="dbl_repref_thou_more">Double Dip++++</option>
</select>
<br/>
<label>What You Pay: </label>
<input type="number" required="required" id="totalPrice" name="tp">
<input class="submit" type="submit" name="submit" value="Submit">
<span class="success"><?php echo $successMessage;?></span>
</form>
</body>

JS

 var service_fee=new Array();
 service_fee["none"]=0;
 service_fee["ref_thou_less"]=7.5;
 service_fee["ref_thou_more"]=12.5;
 service_fee["rep_thou_less"]=10;
 service_fee["rep_thou_more"]=15;
 service_fee["dbl_reprep_thou_less"]=17.5;
 service_fee["dbl_reprep_thou_more"]=27.5;
 service_fee["dbl_repref_thou_less"]=15;
 service_fee["dbl_repref_thou_more"]=25;

//This function finds the service type price based on the 
//drop down selection
function getServicePrice()
{
    var ServicePrice=0;
    //Get a reference to the form id="req_serv"
    var theForm = document.forms["req_serv"];
    //Get a reference to the select id="servfee"
    var selectedservtype = theForm.elements["servfee"];

    ServicePrice = service_fee[selectedservtype.value];

    //finally we return service price
    return ServicePrice;
}

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 reqservfee = getServicePrice() * 100 / getOrderTotal();

    //display the result
    var txtobj = document.getElementById('totalPrice');
    txtobj.style.display='block';
    txtobj.value = reqservfee;
}

function hideTotal()
{
    var txtobj = document.getElementById('totalPrice');
    txtobj.style.display='none';
}

1 个答案:

答案 0 :(得分:1)

您的getOrderTotal

中未定义

script

&#13;
&#13;
var service_fee = {};
service_fee["none"] = 0;
service_fee["ref_thou_less"] = 7.5;
service_fee["ref_thou_more"] = 12.5;
service_fee["rep_thou_less"] = 10;
service_fee["rep_thou_more"] = 15;
service_fee["dbl_reprep_thou_less"] = 17.5;
service_fee["dbl_reprep_thou_more"] = 27.5;
service_fee["dbl_repref_thou_less"] = 15;
service_fee["dbl_repref_thou_more"] = 25;

function getServicePrice() {
  var ServicePrice = 0;
  var theForm = document.forms["req_serv"];
  var selectedservtype = theForm.elements["servfee"];
  ServicePrice = service_fee[selectedservtype.value];
  return ServicePrice;
}

function getOrderTotal() {
  return document.getElementById('ordertot').value;
}

function calculateTotal() {
  var reqservfee = (getServicePrice() / 100) * getOrderTotal();
  var txtobj = document.getElementById('totalPrice');
  txtobj.style.display = 'block';
  txtobj.value = reqservfee;
}

function hideTotal() {
  var txtobj = document.getElementById('totalPrice');
  txtobj.style.display = 'none';
}
&#13;
<body onload="hideTotal()">
  <form class="form-horizontal" id="req_serv" name="req_serv" method="post" action="index.php">
    <label>Order Total :</label>
    <input class="form-control" id="ordertot" type="number" name="ordertot" placeholder="$0.00" onkeyup="calculateTotal()" />
    <span class="error"><?php echo $ordertotError;?></span>
    <label>Service & Fee</label>
    <select class="form-control" id="servfee" name="servfee" onchange="calculateTotal()">
      <option value="none">Select Service</option>
      <option value="ref_thou_less">Refunds</option>
      <option value="ref_thou_more">Refunds++</option>
      <option value="rep_thou_less">Replacements</option>
      <option value="rep_thou_more">Replacements++</option>
      <option value="dbl_reprep_thou_less">Double Dip</option>
      <option value="dbl_reprep_thou_more">Double Dip++</option>
      <option value="dbl_repref_thou_less">Double Dip+++</option>
      <option value="dbl_repref_thou_more">Double Dip++++</option>
    </select>
    <br/>
    <label>What You Pay:</label>
    <input type="number" required="required" id="totalPrice" name="tp">
    <input class="submit" type="submit" name="submit" value="Submit">
    <span class="success"><?php echo $successMessage;?></span>
  </form>
</body>
&#13;
&#13;
&#13;