Simple Gallon Calculator - javascript

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">

Related

change the value of a label with using a form but without refresh the page

I would like to create a form that based on the input values, calculation results and enter it in a div / label / bit somewhere in the web page html.
an working similar to that of the currency converters online
(insert the number for the first currency and you can see the result without the page refresh, with use of the submit button or not)
this is a little piece of my code (I can not understand the concept/mechanism to do what I want as described above)
<form id="form" class="green" method="post">
<label class="title">
<span class="titolo-riga required">Number1</span>
<input id="firstId" class="small" type="number" name="number1" required="required" value="0" />
</label>
<label class="title">
<span class="titolo-riga required">Number2</span>
<input id="secondID" class="small" type="number" name="number2" required="required" value="0" />
</label>
<div class="submit"><input type="submit" onclick="return submitForm();" value="Submit"/></div>
</form>
<div><label id="printHere" class="result"></label></div>
this a basic script inside the html:
function submitForm(){
var a = parseInt($("#firstId").val());
var b = parseInt($("#secondID").val());
result = a+ b;
try this simple script with html:
<html>
<body>
<p>Click the button to calculate x.</p>
<button onclick="myFunction()">Add it</button>
<br/>Enter first number:
<input type="text" id="txt1" name="text1">
<br/>Enter second number:
<input type="text" id="txt2" name="text2">
<p id="demo"></p>
<script>
function myFunction() {
var y = document.getElementById("txt1").value;
var z = document.getElementById("txt2").value;
var x = +y + +z;
document.getElementById("demo").innerHTML = x;
}
</script>
</body>
</html>
If I understood it correctly, you are trying to retrieve to input values, do some mathematical operations with them, and return it to the page without refreshing it, if it's so:
make a change event listener on both of inputs, in that case:
$("#firstId").change(function() {
$("#thirdId").val(calculate());
});
$("#secondID").change(function() {
$("#thirdId").val(calculate());
});
make a calculation function:
function calculate() {
var a = parseInt($("#firstId").val());
var b = parseInt($("#secondID").val());
return a+ b;
}
Good Day Sir,
I would suggest you could bind this input value a few different ways to update it on the page, without requiring a refresh. The jQuery library is probably the easiest to implement over straight javascript. Are you familiar with the following functions?
Keyup/Blur?
I created this fiddle for you. Hopefully it helps.
https://jsfiddle.net/wkdjwzfv/
<script>
$(function(){
//val for firstid
$("#firstId").keyup(function() {
//val of firstId
var total = parseInt($(this).val()) + parseInt($("#secondID").val());
console.log(total);
$("#total").empty().append(total);
});
//for keyup for second
$("#secondID").keyup(function() {
var total = parseInt($(this).val()) + parseInt($("#firstId").val());
console.log(total);
$("#total").empty().append(total);
});
})
</script>
Try this html and jquery combination:
<form id="form" class="green">
<div class="element-number column1">
<label for="avanti-testa" class="title">
<span class="titolo-riga required">Number1</span>
<input id="firstId" class="small" type="number" min="0" max="100" name="number1" required="required" value="0" />
</label>
</div>
<div class="element-number column1">
<label for="avanti-testa" class="title">
<span class="titolo-riga required">Number2</span>
<input id="secondID" class="small" type="number" min="0" max="100" name="number1" required="required" value="0" />
</label>
</div>
<div id="answer"></div>
<button id="submitForm" type="button">Submit</button>
</form>
<script>
// assuming jQuery is loaded
(function($) {
$('#submitForm').on('click', function (e) {
e.preventDefault();
var answer = parseInt($('#firstId').val(), 10) + parseInt($('#secondId').val(), 10);
$('#answer').text(answer);
});
})(jQuery);
</script>
As an alternative solution I'd like to post a simplistic answer created with AngularJS. Here is the Plunker: http://plnkr.co/edit/46Xf23jUhrmaT2x31S0K?p=preview
The code would be:
<div class="col-md-2 col-md-offset-5 form-group">
<input class="form-control" type="number" ng-model="firstValue" />
<p class="text-center">+</p>
<input class="form-control" type="number" ng-model="secondValue" />
</div>
<div class="panel panel-primary col-md-2 col-md-offset-5 text-center">
{{ firstValue + secondValue }}
</div>
The classes are from Bootstrap, just for making it little bit nicer.

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();
}

Javascript calling in variables from HTML Form

I have the javascript portion working (cut off bottom portion of it to reduce code length) when I manually put in the numbers however, I'm struggling with putting my javascript together with my html. I tried stealing bits of code to get it to work, ultimately I'd like to just have one button that says "Get Pricing" that passes the 4 variables quantity, colors, logoSheet, and margin to the respective javascript variables.
<form>
<br>
<label id="_quantity" >Quantity</label>
<input type="number" id="quantity" maxlength="254" data-hint="" name="quantity" required/>
<br>
<label id="_colors" ># of Colors</label>
<input type="number" id="colors" maxlength="254" data-hint="" name="colors" required/>
<br>
<label id="_logoSheet" ># Logo's per Sheet</label>
<input type="number" id="logoSheet" maxlength="254" data-hint="" name="logoSheet" required/>
<br>
<label id="_margin" >Margin %</label>
<input type="number" id="margin" maxlength="254" data-hint="" name="margin" required/>
<br>
<input type="submit" class="fb-button-special" id="fb-submit-button" value="submit" />
</form>
<button onclick="myFunction()">Get Pricing</button>
<p>Total Shirt Only:</p> <p id="totalShirtOnly"></p>
<p>Total Sheet Cost:</p> <p id="totalSheetCost"></p>
<p>Price Per Sheet:</p> <p id="costOfSheets"></p>
<p>Total Price:</p> <p id="totalPrice"></p>
<p>Net Profit:</p> <p id="netProfit"></p>
</center>
<script>
function myFunction()
{
var quantity = document.getElementById('quantity.value');
var colors = document.getElementById('colors.value');
var logoSheet = document.getElementById('logoSheet.value');
var margin = document.getElementById('margin.value');
var shirtCost = 2.43;
var sheetShipping = 15.0;
var marginPercent = margin/100;
var totalCost = 0.0;
var costOfSheets = 0.0;
</script>
</body>
</html>
I don't know which JavaScript variables you're referring to and if you're using jQuery or not but here's how to get values of HTML elements:
// With jQuery
var colors = $("#colors").val();
// w/o jQuery
var margin = document.getElementById("margin").value
Is this what you were looking for?

Simple reusable javascript averaging function for multiple forms on same page

I literally started trying to teach myself javascript less than 48 hours ago. Outside of just wanting to learn it I also have a small personal project I'm working on and using as sort of my working learn as I go example. But I've hit a problem, which I'm sure is rather basic, I'm just hampered by lack of much javascript knowledge.
Basically it is just an averaging problem.
There are going to be 4 inputs fields with the 4th being a rounded to the nearest whole number average of the first three fields.
This 4 field configuration is going to get used multiple times on the page.
I want it to work in "real time" and not with a calculate button so I'm assuming "onKeyup" is needed. (no validation of any kind is needed or submit or saving or anything)
The only code I've been able to get close is really really ugly, long, and convoluted. I can't help but think there is a very simple way to do it and just get the same function to apply to each grouping of inputs. It will look like below but probably much longer.
some text
<input id="a" type="number" /><br/>
<input id="b" type="number" /><br/>
<input id="c" type="number" /><br/>
<input id="final" value="0" disabled />
some text
<input id="a" type="number" /><br/>
<input id="b" type="number" /><br/>
<input id="c" type="number" /><br/>
<input id="final" value="0" disabled />
Thanks in advance. This is part of a larger problem but I've tried to strip it down to it's essence and seeing it work and understanding it will go a long way to helping me solve some other problems.
To start with use a different markup, there should only be a single id per page, so use classes, it make it easier to target everything too. Also if the effect is to use the last input as a display you can use readonly instead of disabled
<p>some text</p>
<div class="group">
<input class="a" type="number" /><br/>
<input class="b" type="number" /><br/>
<input class="c" type="number" /><br/>
<input class="final" value="0" readonly />
</div>
<p>some text</p>
<div class="group">
<input class="a" type="number" /><br/>
<input class="b" type="number" /><br/>
<input class="c" type="number" /><br/>
<input class="final" value="0" readonly />
</div>​
Here is an example done in jquery
$(function() {
$('.group input').on('click', function() {
var count = parseInt($(this).val()) || 0;
$(this).siblings(':not(.final)').each(function() {
if ($(this).val()) count = count + parseInt($(this).val());
});
$(this).siblings('.final').eq(0).val(count);
});
});
And the demo is here: http://jsfiddle.net/4S4Vp/1/
​
This should be understandable for your level. The second set of inputs will be named a-2 with calc(2) and so on.
<input id="a-1" type="number" onkeyup="calc(1)" value="0" /><br/>
<input id="b-1" type="number" onkeyup="calc(1)" value="0" /><br/>
<input id="c-1" type="number" onkeyup="calc(1)" value="0" /><br/>
<input id="final-1" value="0" disabled />
function calc( n ) {
var a = document.getElementById("a-" + n ).value;
var b = document.getElementById("b-" + n ).value;
var c = document.getElementById("c-" + n ).value;
document.getElementById("final-" + n ).value = Math.round((parseInt(a)+parseInt(b)+parseInt(c))/3);
}
This is really quick and dirty, but if you know how many inputs you have, this should work:
// these would instead be your textboxes
​var a = document.getElementById('a').value();
var b = document.getElementById('b').value();
var c = document.getElementById('c').value();
var avg = (a+b+b)/3;
document.getElementById('c').value() = avg;
Here is a jsfiddle so you can play with the idea and see if it works as you want it to.
Use jquery.
see the live demo on jsfiddle
some text
<div id="div1">
<input id="a" type="number" /><br/>
<input id="b" type="number" /><br/>
<input id="c" type="number" /><br/>
<input id="final" value="0" disabled />
</div>
some text
<div id="div2">
<input id="a" type="number" /><br/>
<input id="b" type="number" /><br/>
<input id="c" type="number" /><br/>
<input id="final" value="0" disabled />
</div>​
<script type="text/javascript">
$("#div1 input").bind('change keyup click',function(){
var final = 0;
$("#div1 input").not("#div1 #final").each(function(idx,el){
final += (el.value) ? parseInt(el.value) : 0;
});
$("#div1 #final").val(final/3);
});
$("#div2 input").bind('change keyup click',function(){
var final = 0;
$("#div2 input").not("#div2 #final").each(function(idx,el){
final += (el.value) ? parseInt(el.value) : 0;
});
$("#div2 #final").val(final/3);
});
​</script>
I hoped to flag this as duplicate, but because this answer does not have code, enjoy:
// find all inputs in the page and gather data trying to convert it to number
var data = [].map.call( document.querySelectorAll('input'), function (v) {
if (typeof v.value * 1 === 'NaN') {
return 'NaN';
}
return v.value * 1;
});
// not all data will be valid, so we filter it
data = data.filter( function (v) {
return !isNaN(v);
});
// and then calculate average
var avg = data.reduce( function (v, v1) {
return v + v1;
}) / data.length;

Categories