CODEWITHSUNDEEP
javascripthtmlwordpresscalculation
Esme June
Esme June

Reputation: 67

How to dynamically calculate discount html/js

I am trying to display a percentage value from ((discount/product price) * 100) using the HTML widget of WordPress' WPForm plugin. The discount is triggered by a "Get Total" button currently but that stops the WordPress Submit button from functioning. How can I trigger the total to appear once the fields are filled in instead of using the button? Form in use here: http://testelementor.temp513.kinsta.cloud/calculator/

<head>
<title>HTML Calculator</title>

<script type="text/javascript">
function calc() {
  var p = document.getElementById("wpforms-1365-field_12").value;
  var d = document.getElementById("wpforms-1365-field_13").value;
  return (d/p)*100;
}

function GetTotal() {
   document.getElementById('answer_value').innerText = calc();
}
</script>
</head>
<form>
<input type="button" style="color:#000;" name="Get Total" value="Get Total" onclick="GetTotal()" />

<div id="answer" style="display:block;"> Percent Discount: <span id="answer_value"></span>% </div>


</form>
</body>
    
</html>

Upvotes: 0

Views: 1081

Answers (2)

Saif A. Ratul
Saif A. Ratul

Reputation: 106

Try oninput or onchange event listener.

function calc() {
  var p = document.getElementById("wpforms-1365-field_12").value;
  var d = document.getElementById("wpforms-1365-field_13").value;
  return (d/p)*100;
}

function GetTotal() {
   document.getElementById('answer_value').innerText = calc();
}
<head>
<title>HTML Calculator</title>
</head>
<form>

<input type="number" id="wpforms-1365-field_12">
<input type="number" id="wpforms-1365-field_13" oninput="GetTotal()">

<input type="button" style="color:#000;" name="Get Total" value="Get Total" />

<div id="answer" style="display:block;"> Percent Discount: <span id="answer_value"></span>% </div>


</form>
</body>
    
</html>

If you can't add oninput() attribute directly to the input element, you can easily add that via JavaScript.

document.getElementById("wpforms-1365-field_13").oninput = GetTotal();

or you can also use the onchange event listener.

document.getElementById("wpforms-1365-field_13").onchange = GetTotal();

The difference is:

oninput will trigger every time someone inserts a character in the input field, while onchange will only occur when the input field loses focus. So, use whichever applies to your application.

Upvotes: 1

Praneet Dixit
Praneet Dixit

Reputation: 1425

Use onchange eventlistener for both you input fields. For convenience, I have added two input fields and removed the button and set the initial values of input as 0 so that we don't get NaN.

function calc() {
  var p = parseInt(document.getElementById("wpforms-1365-field_12").value);
  var d = parseInt(document.getElementById("wpforms-1365-field_13").value);
  return (d/p)*100;
}

function GetTotal() {
   document.getElementById('answer_value').innerText = calc();
}
<form>
  p - <input type="text" value="0" id="wpforms-1365-field_12" onchange="GetTotal()">
  <br>
  d - <input type="text" value="0" id="wpforms-1365-field_13" onchange="GetTotal()">
<div id="answer" style="display:block;"> Percent Discount: <span id="answer_value"></span>% </div>
</form>

Upvotes: 1

Related Questions