Need help with a auto calculating form [Archive]

View Full Version : Need help with a auto calculating form

sawebs

03-15-2012, 09:41 AM

The image below is the way my client needs the calculating form to work.

Every field has to be times the other field to get a total in the last
one, example:
Amount of days x Amount of taxis x Price per taxi per day x 100% minus '% off' contract A, B, C, D = TOTAL
22 x 50 x 15 x 0.93 = R 15,345.00

I am new to this, I have no idea how to work a round this. :confused:

Any help will be appreciated.

http://www.taxiaction.co.za/calculate.jpg

keyboard

03-15-2012, 10:57 AM

The code itself is very simple.
You simply get the elements by id (getElementByID) assign each of them to a variable (var inputOne = document.getElementByID('id');) and so on then, times the variables together - var answer = inputOne * inputTwo and so on.

Could you please post the html code for the image you showed us so we can show you how to make this work with the code you already have.

Keyboard1333

sawebs

03-15-2012, 11:48 AM

I cant find any code that works in that manner, that's when I desided to post my problem here.

My knowledge with JavaScript is limited.

The only code that I ever designed was a price calculator and it took me two weeks to figure out. And it was two years ago :(

This is the script:
[CODE]
<script language="JavaScript"></script>
[CODE]

keyboard

03-16-2012, 12:57 AM

If your trying to times the contents of 4 inputs together then output the answer, this will work.

<html>
<head>
<script type="text/javascript">
function calculate() {
var numericExpression = /^[0-9]+$/;
var field1 = document.getElementById('el1').value;
var field2 = document.getElementById('el2').value;
var field3 = document.getElementById('el3').value;
var field4 = document.getElementById('el4').value;
var check = "true";
if(!field1.match(numericExpression)){
var check = "false";
}
if(!field2.match(numericExpression)){
var check = "false";
}
if(!field3.match(numericExpression)){
var check = "false";
}
if(!field4.match(numericExpression)){
var check = "false";
}
if(check == "false") {
alert("Please enter only numbers");
return;
}
var total = field1 * field2 * field3 * field4;
document.getElementById('calculate').innerHTML = "Total: " + total;
}
</script>
</head>
<body>
<form>
<input type="text" id="el1" style="float:left;" value="Amount of days">
<input type="text" id="el2" style="float:left;" value="Amount of taxis">
<input type="text" id="el3" style="float:left;" value="Price per taxi per day">
<input type="text" id="el4" style="float:left;" value="100% minus % off">
<div id="calculate" style="margin-left:5px;sheight:23px;width:100px;float:left;">Total:</div>
<br />
<br />
<input type="button" value="Calculate" onclick="calculate()">
</form>
</body>
</html>

Is that what you're trying to do?

sawebs

03-19-2012, 06:42 AM

Sorry about the late reply our internet went down over the weekend.

Thank you ferry much for the assistance, you saved me a lot of work and research.

keyboard

03-19-2012, 09:10 PM

You're welcome!

If this thread is finished, please set it to resolved.
You can do this by editing your first post within the thread - Pressing go advanced - then where it says no prefix, selecting resolved then save.

sawebs

03-22-2012, 06:53 AM

Hi Keyboard1333

Sorry to be such a pain my client is requesting the following, the code work grate on the website.

In the field '100% minus % off' of the calculator it has to be able to calculate numbers under one, such as 0.93. Than it is calculating the total minus the discount. :confused:

keyboard

03-22-2012, 07:01 AM

The only thing that's stopping you from entering a decimal into the 4th field is the validation. All you have to do is tell it to allow dots (.) in the fourth field

<html>
<head>
<script type="text/javascript">
function calculate() {
var numericExpression = /^[0-9]+$/;
var numericExpression2 = /^[0-9\.]+$/;
var field1 = document.getElementById('el1').value;
var field2 = document.getElementById('el2').value;
var field3 = document.getElementById('el3').value;
var field4 = document.getElementById('el4').value;
var check = "true";
if(!field1.match(numericExpression)){
var check = "false";
}
if(!field2.match(numericExpression)){
var check = "false";
}
if(!field3.match(numericExpression)){
var check = "false";
}
if(!field4.match(numericExpression2)){
var check = "false";
}
if(check == "false") {
alert("Please enter only numbers");
return;
}
var total = field1 * field2 * field3 * field4;
document.getElementById('calculate').innerHTML = "Total: " + total;
}
</script>
</head>
<body>
<form>
<input type="text" id="el1" style="float:left;" value="Amount of days">
<input type="text" id="el2" style="float:left;" value="Amount of taxis">
<input type="text" id="el3" style="float:left;" value="Price per taxi per day">
<input type="text" id="el4" style="float:left;" value="100% minus % off">
<div id="calculate" style="margin-left:5px;sheight:23px;width:100px;float:left;">Total:</div>
<br />
<br />
<input type="button" value="Calculate" onclick="calculate()">
</form>
</body>
</html>

sawebs

04-03-2012, 06:02 AM

Sorry about the late reply they have been putting optical fiber cabling into our building.

The form needs to do the following?

Subtract that from 100 and type the result in the percentage box.
MUST BE: Subtract that from 100 % (example outcome: 0.93) and type
that result in the percentage box.

Current result is: 22 x 50 x 15 -10% Total: 165000
I need it to calculate in this manner: 22 x 50 x 15 -10% Total: 14850

Thanks for all your help.