Forum Moderators: open

Message Too Old, No Replies

math functions in forms

         

joshenry

1:43 am on Jun 10, 2007 (gmt 0)

10+ Year Member



I'm trying to create an interactive table using basic math (add, subtract, multiply, divide) to display certain values based on the input of other values.

I'm using the <form Name=formname> format with <input> type=text Name=cellname onChange=eq_cellname()

I'm generating the values using javascript as follows:

function cellname()
{
document.formname.cellname.value = document.formname.cellname.value * 3.7895
}

I can divide a cells value by a number (or divide a number by a cell's value):

function cellname()
{
document.formname.cellname.value = document.formname.cellname.value / 3.7895
}

but I can't dseem to divide a cell's value by the value of another cell

function cellname()
{
document.formname.cellname.value = document.formname.cellname.value / document.formname.cellname.value
}

...which is what I need to do.

Any suggestions on how I can accomplish this? Thanks

rocknbil

6:37 am on Jun 10, 2007 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



Wild guess. You are using numeric values in your first two calcs, which casts the result as a numeric value.

input type="text"

Try

[value] = parseFloat(document.formname.cellname.value / document.formname.cellname.value);

Also your tasks may be simplified by assigning an ID to the fields and reference them by ID:

<input type="text" name="somename" id="value1">
<input type="text" name="somename" id="value2">
<input type="text" name="somename" id="result">

result = document.getElementById('result'); // Note just the object, not it's value yet
val1 = document.getElementById('value1').value;
val2 = document.getElementById('value2').value;

if (val2 > 0) { result.value = parseFloat(val1/val2); } // Because we can't divide by zero

Sorry if I'm off the mark, late here. :-)

joshenry

7:10 pm on Jun 10, 2007 (gmt 0)

10+ Year Member



Thanks so much Bill ...you "rock" :)

joshenry

8:40 pm on Jun 10, 2007 (gmt 0)

10+ Year Member



Bill,

Unfortunately using parseFloat() didn't work. hrmpf! i'm still getting "infinity" (and I'm not dividing by 0) Or when I get a number, it's, well, I don't know what it is. something weird.

What I'm trying to get is a percentage ...by dividing a number (which is part of the total) by the larger total number to get the percentage. Maybe I'm just going about it the wrong way?

Joseph

rocknbil

9:41 am on Jun 11, 2007 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



Well I was off the mark all right, you don't need to use parseFloat at all. I've had troubles getting numbers to actually add (32 + 34 will become 3234, as a concatenated string,) or text input values not being interpreted as numeric, and applying a math function usually gets it to play nice.

You must have something else going on, test this. The doctype all on one line.


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Math</title>
<script type="text/javascript">
function multiply() { document.getElementById('res').value=document.getElementById('inp').value * 3.7895; }
function divide() { document.getElementById('res').value=document.getElementById('inp').value / 3.7895; }
function divFormVals() {
var val1 = document.getElementById('val1').value;
var val2 = document.getElementById('val2').value;
if (val2 > 0) {
document.getElementById('res').value= val1/val2;
}
}
</script>
</head>
<body>
<form>
<label for="in">Enter a number:</label>
<input type="text" name="inp" id="inp"><br>
<input type="button" onClick="multiply();" value="* 3.7895"><br>
<input type="button" onClick="divide();" value="/ 3.7895"><br>
Divide <input type="text" name="val1" id="val1" size="6"> by
<input type="text" name="val2" id="val2" size="6">
<input type="button" onClick="divFormVals();" value="Divide Form Values"><br>
<hr>
<label for="res">RESULT:</label> <input type="text" name="res" id="res"><br>
</form>
</body>
</html>

joshenry

4:41 pm on Jun 12, 2007 (gmt 0)

10+ Year Member



Bill,

Your script works fine independently, so why won't it work when I insert it into my project. After testing the various elements I came to the final conclusion that the problem wasn't dividing the value of one cell by the value of another ...that's works. It's when the value of one (or both) of the cells is the sum of an array. In fact, I can't use these sums in any arithmetic function. The array looks like this:

function totalColB()
{
array1 = new Array();
array1[0] = document.getElementByID('B6').value;
array1[1] = document.getElementByID('B6').value;
array1[2] = document.getElementByID('B6').value;
array1[3] = document.getElementByID('B6').value;
array1[4] = document.getElementByID('B6').value;

document.getElementByID('B6').value = xl_sum(array1)
}

Let me first say that my coding skills are minimal, and this script I'm attempting to adapt to my needs wasn't written by me. Since I don't know how else to total up a row of cells, I'm abandoning this approach. Thanks for you help anyway.

Fotiman

5:13 pm on Jun 12, 2007 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member Top Contributors Of The Month




function totalColB()
{
array1 = new Array();
array1[0] = document.getElementByID('B6').value;
array1[1] = document.getElementByID('B6').value;
array1[2] = document.getElementByID('B6').value;
array1[3] = document.getElementByID('B6').value;
array1[4] = document.getElementByID('B6').value;

document.getElementByID('B6').value = xl_sum(array1)
}

JavaScript is case sensitive. You have:
getElementByID
But you should have:
getElementById

Also, where is this xl_sum method defined?

joshenry

5:24 pm on Jun 12, 2007 (gmt 0)

10+ Year Member



Sorry,

the "ID" was a typo ...it actually is "Id"

originally it was "document.formname.cellname.value"

but as per your suggestion I change it to "document.getElementById.value" but that didn't seem to make any difference.

as for the "xl_sum", this is the defining function:

function xl_sum(cellVals)
{
//sums array called cellVals which can only be numeric
var maxNames=cellVals.length
var thisTotal=0
for (var i=0; i < maxNames; i++)
{
if ((cellVals[i]+'').length > 0 &&!isNaN(cellVals[i])) thisTotal += parseFloat(cellVals[i])
}
return thisTotal
}

Fotiman

6:03 pm on Jun 12, 2007 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member Top Contributors Of The Month



Could you post the entire page (HTML + JavaScript) so we can see it in action? It would certainly make it much easier to debug. Be sure to remove any site references.

joshenry

6:51 pm on Jun 12, 2007 (gmt 0)

10+ Year Member



Hi Fotiman,

This consists of an "html" page and a ".js" page ...way too much text to post here. Would you like me to upload them and give you the url so you could access them? I'm asking first because you specified "Be sure to remove any site references".

Fotiman

7:21 pm on Jun 12, 2007 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member Top Contributors Of The Month



Sure, sticky mail me the URL and I'll take a look. Then I'll post back here what the relavent pieces are.

Fotiman

12:36 am on Jun 13, 2007 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member Top Contributors Of The Month



My initial thought is that it's a problem where you are trying to perform math on what JavaScript thinks are String values. Make sure you're calling parseFloat on your input values before you start treating them as numeric.

joshenry

11:28 pm on Jun 13, 2007 (gmt 0)

10+ Year Member



I did get the trial form to work. Thanks Bill and Fotiman for all your patience and help. Now to see if it holds up when I add the in the other 34 items :)