How to dynamically calculate discount html/js - javascript

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>

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.

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>

Related

How do I remove the input typed in by user in an input tag after form submission through vanilla javascript?

<input type="number" class="setter" id="day-set" name="day-set" value="day"max="30" min="0" placeholder="00"onkeyup="if(parseInt(this.value)>30){ this.value =30; return false;}">
How do I make it so that the input typed in by the user in the input field is cleared when a submit button is pressed (the one which does not refreshes the page)
you can add this to the onclick function of your button and replace the myForm with the id of your form element
document.getElementById("myForm").reset();
<html>
<body>
<p>Clear the input field when you click on the button:</p>
<button onclick="document.getElementById('myInput').value = ''">Clear input
field</button>
<input type="text" value="Blabla" id="myInput">
</body>
</html>
You can also write the javaScript in-between the script tag in a Function or any other way that you want.
You can create a function and add it into the onSubmit event of your form (assuming that you have a form) and then inside of that function you only need to clear the value using something like this:
document.getElementById('day-set').value = ''
Example:
<form onsubmit="myFunction()">
<input type="number" class="setter" id="day-set" name="day-set" value="day"max="30" min="0" placeholder="00"onkeyup="if(parseInt(this.value)>30){ this.value =30; return false;}">
<input type="submit">
</form>
<script>
function myFunction(){
document.getElementById('day-set').value = ''
}
</script>

Clear submitted form using JavaScript

I know this is continuously asked anew, and I've checked out different answers and tried different solutions but to no avail.
I just have to build a form that takes as input the cylinder ray and it height and then find the volume when we click a button.After finding it, shuold be cleared all fields with another button .The function to calculate volume it is working fine, but not the function that clear inputs.
Here is the code:
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<html>
<head>
<script type="text/javascript">
function llogarit() {
var rreze = parseInt(document.getElementById("val1").value);
var lartesi = parseInt(document.getElementById("val2").value);
var rez = document.getElementById("llogarit");
rez.value = (Math.PI * Math.pow(rreze, 2) * lartesi);
}
function fshij() {
document.getElementById("val1").value.clear();
document.getElementById("val2").value.clear();
document.getElementById("llogarit").value.clear();
}
</script>
</head>
<body>
<form>
<p>Vendos 2 vlera</p>
<p>rreze
<input type="text" name="rreze" id="val1" value="2" /></p>
<p> lartesi
<input type="text" name="lartesi" id="val2" value="2" /></p>
<p> Vellimi
<input type="text" name="vellimi" id="llogarit" value="" /></p>
<input type="button" onclick="llogarit()" value="llogarit" />
<input type="reset" value="fshij" onclick="fshij()" />
</body>
</html>
https://developer.mozilla.org/en-US/docs/Web/API/HTMLFormElement/reset
You can reset all form controls in one form with reset method.
// <form name="FORM_NAME">
document.forms["FORM_NAME"].reset();
Try the following:
document.getElementById('myInput').value = ''
Try the follow and add a div tag to the code
<div class="yourClass">
<button onclick="cdClear();" class="yourClass">Clear</button>
</div>
Note: In HTM, you can replace the class with id if you have already coded.
<script type="text/javascript">
function cdClear(){var a=document.getElementById("codes");a.value="",a.focus(),</script>

Javascript, div on click multiple numbers in input field

I'm trying to create a JavaScript to modify the number in my input field.
Example:
<input value="0">
And then a simple button or div with a JavasSript click function.
<button>Add +10</button>
After clicking on the button:
<input value="10">
Does someone have a place I can read and learn to create this, or any tips to get me started. I know very little JavaScript, but I wish to learn.
Try this or fiddleLink.
ParseInt helps in converting the string value to numbers and add them instead of concatenating. Let me know if you still have some trouble.
var tag1Elem = document.getElementById("tag1");
// The callback function to increse the value.
function clickFN() {
tag1Elem.value = parseInt(tag1Elem.value, 10) + 10;
}
// Reset the value back to 0
function resetFN() {
tag1Elem.value = 0;
}
// Callbacks can be attached dynamically using addEventListener
document.getElementById("btn").addEventListener("click", clickFN);
document.getElementById("reset").addEventListener("click", resetFN);
#wrapper {
margin: 20px;
}
<p>This is a basic tag input:
<input id="tag1" value="0" />
<button type="button" id="btn">Add +10</button>
<button type="button" id="reset">Reset</button>
</p>
You can try this
<input value="0" id="id">
give a id to input field
on button click call a function
<button onclick="myFunction()">Add +10</button>
<script>
function myFunction() {
document.getElementById("id").value = parseInt(document.getElementById("id").value) +10;
}
</script>
You can use a click counter like this
and edit it replacing += 1 with += 10.
Here my code,
var input = document.getElementById("valor"),
button = document.getElementById("buttonvalue");
var clicks = 0;
button.addEventListener("click", function()
{
clicks += 10;
input.value = clicks;
});
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Script</title>
</head>
<body>
<input id="valor" value="0">
<button id="buttonvalue">10</button>
</body>
</html>

How to move a text from an input field to another by pressing a button in javascript

Hi I'm new in javascript so I'm sorry if I my question is silly
I am suppodsed to make a dive where there would be two input fields and a button. When you press the button the text that is written in first field must move to the second one. This is what I have done:
<script>
function myfunction(){
var fp= document.forms["fora"];
fp.elements[1].innerHTML=fp.element[0].value;
fp.elements[0].value="";
}
</script>
<!DOCTYPE html>
<html>
<head>
<title>Project 2 </title>
</head>
<body>
<div>
<form id=fora>
First phrase:<br>
<input type="text" name="first phrase" >
<br>
Second phase:<br>
<input type="text" name="second phrase">
</form>
<button type="button" onclick="myfunction()">push me
</button>
<buttom>
</button>
</div>
<p id="intro"></p>
</body>
</html>
Has anyone any idea what i am doing wrong??
You need to change innerHTML to value. And there is a typo fp.element (missing s , should be fp.elements)
var fp= document.forms["fora"];
fp.elements[1].value=fp.elements[0].value;
fp.elements[0].value="";
Change your javascript to read and set the values of the inputs based on the names:
function myfunction(){
document.getElementsByName("second phrase")[0].value = document.getElementsByName("first phrase")[0].value;
document.getElementsByName("first phrase")[0].value = "";
}
Change
fp.elements[1].innerHTML=fp.element[0].value;
to
fp.elements[1].value = fp.elements[0].value;
function myfunction(){
var fp= document.forms["fora"];
fp.elements[1].value = fp.elements[0].value;
fp.elements[0].value = "";
}
<form name="fora">
First phrase:<br>
<input type="text" name="firstPhrase" ><br>
Second phase:<br>
<input type="text" name="secondPhrase">
</form>
<button type="button" onclick="myfunction()">push me</button>

how to write a result in a text box in html computed by the java script?

I am new to HTML and Javascript. I am trying to experiment on invoking C++ method from Javascript using QT. However, this question is not related to QT.
I have a form with two number inputs. I want to add a third box where the results will be displayed. How can I do so? here is my html file. I don't want all the items to be gone. I want the user to see the multilicant A, mulitplicant B, and the result to be displayed in third text box the form. Also, a reset button to reset the form.
<html>
<head>
<script>
function Multiply()
{
var result = myoperations.sumOfNumbers(document.forms["DEMO_FORM"]["Multiplicant_A"].value, document.forms["DEMO_FORM"]["Multiplicant_B"].value);
document.write(result);
}
</script>
</head>
<body>
<form name="DEMO_FORM">
Multiplicant A: <input type="number" name="Multiplicant_A"><br>
Multiplicant B: <input type="number" name="Multiplicant_B"><br>
<input type="button" value="Multiplication_compute_on_C++" onclick="Multiply()">
</form>
</body>
</html>
This is a way to start:
Demo: http://jsfiddle.net/Q3YV9/
<html>
<head>
<script>
function Multiply()
{
var res = parseFloat(document.getElementById("anr").value) * parseFloat(document.getElementById("bnr").value)
document.getElementById("cnr").value = res;
}
</script>
</head>
<body>
<form name="DEMO_FORM">
Multiplicant A: <input type="number" id="anr" name="Multiplicant_A"><br>
Multiplicant B: <input type="number" id="bnr" name="Multiplicant_B"><br>
Result C: <input type="number" id="cnr" name="Multiplicant_C"><br>
<input type="button" value="Multiplication_compute_on_C++" onclick="Multiply()">
</form>
</body>
</html>
If you don't want the result box predefined, use document.createElement('input') to add it to the DOM.
Sample:
function Multiply()
{
var res = parseFloat(document.getElementById("anr").value) * parseFloat(document.getElementById("bnr").value)
//document.getElementById("cnr").value = res;
var newinput = document.createElement('input');
newinput.setAttribute('value', res);
document.forms["DEMO_FORM"].appendChild(newinput);
}
And this demo shows how to add the input result anywhere in the document:
http://jsfiddle.net/Q3YV9/3/
Simplest is to put in an answer box using a div tag
<html>
<head>
<script>
function Multiply()
{
var result = myoperations.sumOfNumbers(document.forms["DEMO_FORM"]["Multiplicant_A"].value, document.forms["DEMO_FORM"]["Multiplicant_B"].value);
document.getElementById('answerbox').innerHTML=result;
}
</script>
</head>
<body>
<form name="DEMO_FORM">
Multiplicant A: <input type="number" name="Multiplicant_A"><br>
Multiplicant B: <input type="number" name="Multiplicant_B"><br>
<input type="button" value="Multiplication_compute_on_C++" onclick="Multiply()">
</form>
<div id='answerbox'><div>
</body>
</html>
By the way type="number" is new in HTML5 for previous versions use type="text" and then do a parseInt on the value for an integer and parseFloat on the value for a decimal number.

Categories

Resources