HTML-Javascript Input-Calculation-Output - javascript

I need just want to add some textboxes/form to input data from a user through HTML and take them into variables in a script that will run a calculation and then output the answer to the calculation. I have some code but its not working properly. It seems that when the submit button is clicked, the function isn't called. Any help would be great: here's the code.
<form id="frm1" action="form_action.asp">
Initial Displacement: <input type="number" name="x"><br>
Initial Velocity: <input type="number" name="v"><br>
Acceleration: <input type="number" name="a"><br>
Time Passed: <input type="number" name="t"><br>
<input type="button" onclick="calc()" value="Submit"/>
</form>
<script>
function calc()
{
var b=document.getElementById("frm1");
document.write(b.element[0].value+b.element[1].value*b.element[2].value+(1/2)*b.element[3].value*b.element[2].value*b.element[2].value);
}
</script>
https://jsfiddle.net/zytyf16q/#&togetherjs=qABKDyLpK2

There is a mistype in your code on the submit button. Your submit button should look like:
<!DOCTYPE html>
<html>
<body>
Initial Displacement:
<input type="number" id="x" name="x">
<br> Initial Velocity:
<input type="number" id="v" name="v">
<br> Acceleration:
<input type="number" id="a" name="a">
<br> Time Passed:
<input type="number" id="t" name="t">
<br>
<input type="button" onclick="calc('x','v','a','t')" value="Submit">
</body>
<script>
function calc(x, v, a, t) {
var Displace = parseInt(document.getElementById(x).value)
var Velocity = parseInt(document.getElementById(v).value)
var Acceleration = parseInt(document.getElementById(a).value)
var Time = parseInt(document.getElementById(t).value)
var calculations = Displace + (Velocity * Acceleration) + ((1 / 2) * Time * Acceleration * Time);
alert(calculations)
}
</script>
</html>

I added id's to the inputs, and then used document.getElementById to select them and save them to a variable with their respective name. Then I carried out the calculation.
<form id="frm1" action="form_action.asp">
Initial Displacement: <input type="number" name="x" id="x"><br>
Initial Velocity: <input type="number" name="v" id="v"><br>
Acceleration: <input type="number" name="a" id="a"><br>
Time Passed: <input type="number" name="t" id="t"><br>
<input type="button" onclick="calc()" value="Submit"/>
</form>
<script>
function calc()
{
var x = document.getElementById('x').value
var v = document.getElementById('v').value
var a = document.getElementById('a').value
var t = document.getElementById('t').value
document.write(x+v*a+(1/2)*t*a*a);
}
</script>

Related

Pure Js (3 input calculated in real time)?

Build a basic calculator.
<html>
<body>
<input class="numb1" type=number name="secondBox" value="">
<input class="numb2" type=number name="secondBox" value="">
<input class="numb3" type=number name="thirdBox" value="" readonly>
</body>
</html>
<html><input type='number' id='one' placeholder='00' onblur='calculate()'>
/
<input type='number' id='two' placeholder='00' oninput='calculate()'>
<input type='number' id='result' placeholder='Result' disabled>
<script>
function calculate(){
var one = document.querySelector('#one').value;
var two = document.querySelector('#two').value;
var result = document.querySelector('#result');
result.value = Math.floor(one/two);
}
</script>
</html>
Here is a working example:
var evN1 = document.getElementById("no1Box");
evN1.addEventListener("input", calculate, false);
var evN2 = document.getElementById("no2Box");
evN2.addEventListener("input", calculate, false);
function calculate() {
var n1 = document.getElementById("no1Box").value;
var n2 = document.getElementById("no2Box").value;
var r = n1/n2;
document.getElementById("result").innerHTML = "Result: " + r;
}
body {padding:0;margin:0;font-family:Arial,Helvetica,sans-serif;}
div {margin:15px;}
label {display:block;}
input {border:solid 1px #888;font-size:20px;border-radius:5px;padding:2px;outline:none;}
.myInput {box-shadow:0 0 4px green;}
<!DOCTYPE html>
<html>
<body>
<label for="input">Input 1</label>
<input class="myInput" id="no1Box" type=number name="firstBox" value="">
<label for="input">Input 2</label>
<input class="myInput" id="no2Box" type=number name="secondBox" value="">
<p id="result"/>
</body>
</html>
Through document.getElementById("no1Box"); you take the element with the uniquie id that you set on html see more about getElementById here and by using .value you get the value that you introduced in your input.
After taking the element var evN2 = document.getElementById("no2Box"); add a listener to him evN2.addEventListener("input", calculate, false); and tell what function should execute when the input is changed. more examples for eventListener here
If you have questions, feel free to ask.

javascript onblur onMouseOver calculate tax and autofill form input

After 2 days searching I give up. I have a form and need to add (autofill) taxes to the input total price but in a easy simple way:
<form name="form" action="go.php">
<input name="cost" type="text">
<input name="costplustax" type="text" value=" here we autofill cost +19%>
<input type="submit" value="ready to mysql">
I can nothing about javascript tested a lot of examples but all complicated. I just need to autofill the input costplustax with cost plus tax
example
cost 100.000
because tax is 19% then we autofilll the input with onblur or onMouseOver to
119.000
How to do this?
First add an ID to your elements (this makes referencing the elements with JS easier). Ex
<input name="cost" type="text">
becomes
<input name="cost" ID="cost" type="text">
You need to add a script tag to house the JS code like this
<script>
var taxPerc = .19;
document.getElementById("cost").onblur = function(){
document.getElementById("costplustax").value = parseFloat(document.getElementById("cost").value) * (1.00 + taxPerc)
}
</script>
<form name="form" action="go.php">
<input id='cost' name="cost" type="text">
<input id='costplustax' name="costplustax" type="text">
<input type="submit" value="ready to mysql">
</form>
<script type='text/javascript'>
var cost=document.getElementById('cost');
var cpt=document.getElementById('costplustax');
function prefill(event){
var cv=parseFloat( cost.value );
if( cv && !isNaN( cv ) ) cpt.value=cv + cv * 0.19;
}
cost.addEventListener('blur',prefill,false );
</script>

calculate two input field values in javascript

Hi i want to calculate two input field values and result will show in third input field so i want to write code in ajax page
<input id="a1" type="text" />
<input id="a2" type="text" onblur="Calculate();" />
<input id="a3" type="text" name="total_amt" value="" />
here javascript function
<script>
function Calculate()
{
var resources = document.getElementById('a1').value;
var minutes = document.getElementById('a2').value;
document.getElementById('a3').value=parseInt(resources) * parseInt(minutes);
document.form1.submit();
}
</script>
starting its working but nw its not working please help me
Thanks in Advance
Look this! Work it.
http://jsfiddle.net/op1u4ht7/2/
<input id="a1" type="text" />
<input id="a2" type="text" onblur="calculate()" />
<input id="a3" type="text" name="total_amt" />
calculate = function()
{
var resources = document.getElementById('a1').value;
var minutes = document.getElementById('a2').value;
document.getElementById('a3').value = parseInt(resources)*parseInt(minutes);
}
Try AutoCalculator https://github.com/JavscriptLab/autocalculate Calculate Inputs value and Output By using selector expressions
Just add an attribute for your output input like data-ac="(#firstinput+#secondinput)"
No Need of any initialization just add data-ac attribute only. It will find out dynamically added elements automatically
FOr add 'Rs' with Output just add inside curly bracket data-ac="{Rs}(#firstinput+#secondinput)"
My code is from an answer above. Special thank for you!
calculate = function (a, p, t) {
var amount = document.getElementById(a).value;
var price = document.getElementById(p).value;
document.getElementById(t).value = parseInt(amount)*parseInt(price);}
<input type="number" id="a0" onblur="calculate('a0', 'p0', 't0')">
<input type="number" id="p0" onblur="calculate('a0', 'p0', 't0')">
<input type="number" id="t0" >
<hr>
<input type="number" id="a1" onblur="calculate('a1', 'p1', 't1')">
<input type="number" id="p1" onblur="calculate('a1', 'p1', 't1')">
<input type="number" id="t1" >
put in you form id="form1"
the JavaScript is look like this.
calculate = function()
{
var resources = document.getElementById('a1').value;
var minutes = document.getElementById('a2').value;
document.getElementById('a3').value = parseInt(resources)*parseInt(minutes);
document.form1.submit();
}

Simple Gallon Calculator

I'm attempting to build a simple web form that takes 3 number inputs and outputs one number based on this formula: (a*b*c)/271).
This is the code I have but nothing is displayed in the output.
Clearly I have almost no clue what I'm doing.
I appreciate all help:
<body>
<img id="logo"src="images/a&l.png" alt="A&L Cesspool"/>
<h1>Grease Trap Gallon Calculator<h2>
<form name=calculator">
<input label="length" type="number" id="a">
<input label="width" type="number" id="b">
<input label="height" type="number" id="c">
<input type=Button value=Calculate onClick="gallons();">
<input name="OUTPUT" id="output" SIZE="4" maxlength="6" >
</form>
<script language="JavaScript" type="text/javascript">
<!--
function gallons() {
var LENGTH = document.calculator.a.value;
var WIDTH = document.calculator.b.value;
var HEIGHT = document.calculator.c.value;
var Total =(LENGTH*WIDTH*HEIGHT)/271;
document.calculator.OUTPUT.value = Total;
}
// -->
</script>
document.forms.calculator. There's no such thing as document.calculator. Also, form elements need name attributes to refer to them in form context, not IDs.
In other news
You have unclosed quotes
You have irregular naming conventions (OUTPUT, a, Total)
You have irregular quotes policy (sometimes you have, sometimes you don't).
So basically
<form name="calculator">
<input label="length" type="number" name="a">
<input label="width" type="number" name="b">
<input label="height" type="number" name="c">
<input type=Button value=Calculate onClick="gallons();">
<input name="OUTPUT" id="output" SIZE="4" maxlength="6">
</form>
function gallons() {
var LENGTH = document.forms.calculator.a.value;
var WIDTH = document.forms.calculator.b.value;
var HEIGHT = document.forms.calculator.c.value;
var Total = (LENGTH * WIDTH * HEIGHT) / 271;
document.forms.calculator.OUTPUT.value = Total;
}
Please grab a proper tutorial from MDN or some similar good source, and start reading.
Your call to document.calculator is not finding the element because its looking by id
change your form definition and it will work
<form name="calculator" id="calculator">

Automat js form calculator

I need help with a js/jQuery automat form calculator.
The function is time=games*(players*15),
so basically there are 3 form fields games players result in field time.
I want the result to be in real time not by pressing a button.
Here is the code I made with a trigger button, but I want without calculate button, just by completing fields.
Nvm, I resolved it with an onChance for fields.
<SCRIPT LANGUAGE="JavaScript">
function CalculateSum(games, players, form)
{
var A = parseFloat(games);
var B = parseFloat(players);
form.Time.value = A*(B*15) ;
}
function ClearForm(form)s
{
form.input_A.value = "";
form.input_B.value = "";
form.Time.value = "";
}
// end of JavaScript functions -->
</SCRIPT>
// HTML -->
<FORM NAME="Calculator" METHOD="post">
<P>Games: <INPUT TYPE=TEXT NAME="input_A" SIZE=10></P>
<P>Plyers <INPUT TYPE=TEXT NAME="input_B" SIZE=10></P>
<P><INPUT TYPE="button" VALUE="Calculate time" name="Calculate time"
onClick="CalculateSum(this.form.input_A.value, this.form.input_B.value, this.form)"></P>
<P><INPUT TYPE="button" VALUE="Clear" name="Clear" onClick="ClearForm(this.form)"></P>
<P>Time = <INPUT TYPE=TEXT NAME="Time" SIZE=12></P>
</FORM>
You can use the function keyup() to trigger the function so the result is update everytime the user add a number
You can use keyup to trigger when you enter a value
function CalculateSum()
{
var games = $('input[name=input_A]').val()
var players = $('input[name=input_B]').val()
var time = parseFloat(games) * (parseFloat(players) * 15)
$('input[name=Time]').val(time)
}
function ClearForm()
{
$('input[name=input_A], input[name=input_B], input[name=Time]').val('')
}
// bind view
$('input[name=input_A], input[name=input_B]').on('keyup', function(){
CalculateSum()
})
$('input[name=Clear]').on('click', function(){
ClearForm()
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<FORM NAME="Calculator" METHOD="post">
<P>Games: <INPUT TYPE=TEXT NAME="input_A" SIZE=10></P>
<P>Plyers <INPUT TYPE=TEXT NAME="input_B" SIZE=10></P>
<P><INPUT TYPE="button" VALUE="Clear" name="Clear"></P>
<P>Time = <INPUT TYPE=TEXT NAME="Time" SIZE=12></P>
</FORM>

Categories