c0d3x1337 c0d3x1337 - 2 months ago 9
Javascript Question

How to calculate math in form and insert data into text input with javascript?

I have been looking for a solution to this problem for about 3 days with no avail. So I have decided to post a question regarding it.

In this form I am trying to grab data from two form elements figure out a percentage and input that data into a text input and a hidden input element.

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';
}

Answer

getOrderTotal is not defined in your script

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';
}
<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>