Math on the fly. This one's got my head spinning. 1

jonnyGURU · Jan 19, 2005

Ok. Take a simple script like this:

<script language="JavaScript">

</script>
<form>
<input name="number1" type="text" value="10" size="5" maxlength="4" onChange="RunningTotal(this.form)"> +
<input name="number2" type="text" value="20" size="5" maxlength="4" onChange="RunningTotal(this.form)"> =
<input name="total" type="text" value="30" size="6" maxlength="5">
</form>

I have to integrate this into a php/MySql based website that pulls the number of integers that need to be added from a db and the numbers that need to be added. Sure, the math can be done on the back end; but we want the running total to be dynamically calculated because we're allowing the user to change the values of number1, number2, etc. if need be.

So, let's say that x is the number of integers that need to be added. Let's say i is the actual count (so the variable for the input name would actually be "number"+$i;.) How do I use a for else statement to keep a running total until i > x?

Dispensing quality rants and mishaps since 1999:

http://www.jonnyguru.com

adam0101 · Jan 19, 2005

Wow man, you gotta phrase your questions a little better. I had to read your question 4-5 times before I got what you are trying to do.

Code:

var total=0;
var frm = document.formName;
var x = frm.elements.length;
for(i=0;i<x;i++){
  if(frm.elements[i].name.indexOf('number')>-1){
    if(!isNaN(frm.elements[i].value)){
      total+=frm.elements[i].value-0;
    }
  }
}
alert('Running total: ' + total);

Adam

jonnyGURU · Jan 19, 2005

I guess I do need to rephrase because I do think you misunderstood. Your script changes the value of i while i is less than x. That's not what I'm doing. I'll give it another shot.

Say in the form the input name is "number1", "number2", "number3".... "number24" , NOT based on anything I can do on my end, but based on the number of tables in the db. In your script, you're manipulating i. I cna't manipulate i, only read the value of i.

So in my example above, there's two numbers pulled from the db. number1 and number2, but that form could be a string of, let's say 24 numbers. I don't know because as the db grows, that number grows. Let's call that number "x".

So while x is 24, for this example, and i<x, I need RunningTotal(form) to add number1, number2, (or if you will, "number"+$i;") until number24 and THEN report the total in the "total" field of the form.

End result, I have "x" number of input boxes, each with the value of "value"+$i;, named "number"+$i; and when I'm out of input fields, I have "total" which is kept updated even if someone changes the value of one of them becuase of the "onChange" event handler.

Does that make any more sense to anyone?

Dispensing quality rants and mishaps since 1999:

http://www.jonnyguru.com

kaht · Jan 19, 2005

jonnyGURU, this should solve your problem. As long as all the textboxes are numbered sequentially and prefixed with the word "number", then this will add them all together and display the total in the sum field. (I also added the function to the onload handler of the body tag to calculate the inital sum)

Code:

<html>
<head>
<script language=javascript>
function RunningTotal(frm) {
   ttl = 0;
   num = 1;
   moreNumbers = true;
   while (moreNumbers) {
      if (frm.elements["number" + num]) {
         ttl += parseInt(frm.elements["number" + num].value, 10);
         num++;
      }
      else {
         moreNumbers = false;
      }
   }
   frm.elements["total"].value = ttl;
}
</script>
</head>
<body onload='RunningTotal(document.forms["blahForm"])'>
<form name=blahForm>
<input name="number1" type="text" value="10" size="5" maxlength="4" onChange="RunningTotal(this.form)"> + 
<input name="number2" type="text" value="20" size="5" maxlength="4" onChange="RunningTotal(this.form)"> + 
<input name="number3" type="text" value="20" size="5" maxlength="4" onChange="RunningTotal(this.form)"> + 
<input name="number4" type="text" value="20" size="5" maxlength="4" onChange="RunningTotal(this.form)"> + 
<input name="number5" type="text" value="20" size="5" maxlength="4" onChange="RunningTotal(this.form)"> = 
<input name="total" type="text" size="6" maxlength="5">
</form>
</body>
</html>

P.S. I would add in some kind of validation check to make sure the user enters in a number otherwise you may get odd results. Also, avoid using variable names such as form or input or any other reserved HTML word. That too may produce odd results.

-kaht

jonnyGURU · Jan 19, 2005

That's PHENOMENOL! I was thinking about it all wrong!

I was thinking I'd have to pass my exisiting variable as the number of times the equation looped! Yours works regardless of that variable and simply counts the number of form elements with the name "number" + num.

Thanks!

That's awesome!

Dispensing quality rants and mishaps since 1999:

http://www.jonnyguru.com

jonnyGURU · Jan 20, 2005

Sigh.... Figures that wouldn't be good enough.

Get this... For all of the fields, we want to have a checkbox for each text field and the grand total NOT add any numbers that aren't "approved" with a checkbox.

So, for number1, there'd be a checkbox1. And if checkbox1 isn't checked, it skips to number2. And checkbox2 is checked it adds it to ttl, and so on.

Is there an easy way to integrate that?

Dispensing quality rants and mishaps since 1999:

http://www.jonnyguru.com

Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Math on the fly. This one's got my head spinning. 1

jonnyGURU

IS-IT--Management

adam0101

Programmer

jonnyGURU

IS-IT--Management

kaht

Programmer

jonnyGURU

IS-IT--Management

jonnyGURU

IS-IT--Management

Similar threads

Part and Inventory Search

Sponsor