[Help] Autosum on PHP + Javascript

Lowyat.NET Lowyat.NET Rules and Regulations

FAQ Help Search Members Calendar

Outline · [ Standard ] · Linear+

[Help] Autosum on PHP + Javascript (JavaScript)

Share on

| Track this topic | Email this topic | Print this topic

xinesooi84

Nov 3 2009, 05:07 PM

Show posts by this member only |This post's rating (0+, 0-) | Post #1

Newbie

Group: Junior Member
Posts: 20
Ratings earned: 0+, 0-
Ratings given: 0+, 0-

Joined: Jun 2009
From: Klang

pros, need some help...here it goes...i have a form which creates 50 input by looping...

PHP

CODE

for($i = 1; $i <= 50; $i++){
<input type="text" name="a[$i]" onFocus="startCalc($i);" onBlur="stopCalc();"/>
<input type="text" name="b[$i]" onFocus="startCalc($i);" onBlur="stopCalc();"/>
<input type="text" name="total[$i]" />
}

Javascript

CODE

then when a user enter the value A and B, it will be sum and displayed under Total...the problem is, when not using array, it runs smoothly for adding first input and when i used array, it cannot generate the answer for each of the 50 input...pls help...

sunsuron

Nov 3 2009, 09:23 PM

Show posts by this member only |This post's rating (0+, 0-) | Post #2

PHP Web Developer

Group: Senior Member
Posts: 750
Ratings earned: 0+, 0-
Ratings given: 0+, 0-

Joined: Nov 2004

A simple example for you to examine:

» Click to show Spoiler - click again to hide... «

puaka_astro

Nov 4 2009, 02:50 AM

Show posts by this member only |This post's rating (0+, 0-) | Post #3

Getting Started

Group: Junior Member
Posts: 130
Ratings earned: 0+, 0-
Ratings given: 0+, 0-

Joined: Jun 2007

1. Use Firefox and install firebug

CODE

i is not defined
interval = setInterval("calc(i)", 1);\r\n

That was the error. See if you can fix it.

xinesooi84

Nov 4 2009, 10:54 AM

Show posts by this member only |This post's rating (0+, 0-) | Post #4

Newbie

Group: Junior Member
Posts: 20
Ratings earned: 0+, 0-
Ratings given: 0+, 0-

Joined: Jun 2009
From: Klang

this is exactly what i need...but when i added a table on it, the script will fail...for example like this...

CODE

this will give me some error...i did change the element tag name to either like table, tr or td but there is still some error...pls assist...

CODE

var inputs = el.parentNode.getElementsByTagName('input');

QUOTE(sunsuron @ Nov 3 2009, 09:23 PM)

A simple example for you to examine:

» Click to show Spoiler - click again to hide... «

Added on November 4, 2009, 10:56 amthere isnt necessary to declare some of the thing in javascript...i did test to declare it and it still give me error...thx for the help...

QUOTE(puaka_astro @ Nov 4 2009, 02:50 AM)

1. Use Firefox and install firebug

CODE

i is not defined
interval = setInterval("calc(i)", 1);\r\n

That was the error. See if you can fix it.

This post has been edited by xinesooi84: Nov 4 2009, 10:56 AM

puaka_astro

Nov 4 2009, 11:32 AM

Show posts by this member only |This post's rating (0+, 0-) | Post #5

Getting Started

Group: Junior Member
Posts: 130
Ratings earned: 0+, 0-
Ratings given: 0+, 0-

Joined: Jun 2007

Dude.. check this out.. compare with yours.. got the idea ?

CODE

<html>
<head>
<script>
var gi;
function startCalc(i){
gi = i;
interval = setInterval("calc(gi)", 1);
}

function calc(i){
var one = document.getElementById("a"+i).value;
var two = document.getElementById("b"+i).value;
var total = document.getElementById("total"+i);
var sum = (one * 1) + (two * 1);
total.style.color = 'royalblue';
total.value = sum;
if (isNaN(sum)) {
total.style.color = 'red';
total.value = 'Enter numeric value!';
stopCalc();
}
}

function stopCalc(){
clearInterval(interval);
}
</script>
</head>
<body>
<?php
for($i = 1; $i <= 10; $i++) {
echo "<input type=\"text\" id=\"a$i\" onKeyup=\"startCalc($i);\" onBlur=\"stopCalc();\" /> ".
"<input type=\"text\" id=\"b$i\" onKeyup=\"startCalc($i);\" onBlur=\"stopCalc();\"/> ".
"<input type=\"text\" id=\"total$i\" /> <br />";
}
?>
</body>
</html>

Cannibal

Nov 4 2009, 11:56 AM

Show posts by this member only |This post's rating (0+, 0-) | Post #6

Newbie

Group: Junior Member
Posts: 31
Ratings earned: 0+, 0-
Ratings given: 0+, 0-

Joined: Apr 2008

i believe you cannot:

setInterval( "calc(i)", 1);

instead of the above, try:

setInterval( function() {
calc(i);
}, 1);

sunsuron

Nov 4 2009, 02:20 PM

Show posts by this member only |This post's rating (0+, 0-) | Post #7

PHP Web Developer

Group: Senior Member
Posts: 750
Ratings earned: 0+, 0-
Ratings given: 0+, 0-

Joined: Nov 2004

CODE

var inputs = el.parentNode.getElementsByTagName('input'); // get the <div> that surrounds all the <input>

There's a reason why I add <div> to surround all <input>. To understand why, you need to know the concept of Document Object Model (DOM) or simply the document tree. It's a handy concept or tool that enable us to visualize our HTML/XML easily (in our head). Read about parent-child-siblings relationships and other DOM APIs such as the getElement and parentNode methods.

Changing the DOM will affect the given JS behavior. All your <input> now was surrounded by the <tr> tag and this is the key.

CODE

var inputs = el.parentNode.parentNode.getElementsByTagName('input'); // get the <tr> that surrounds all the <input>

xinesooi84

Nov 4 2009, 02:21 PM

Show posts by this member only |This post's rating (0+, 0-) | Post #8

Newbie

Group: Junior Member
Posts: 20
Ratings earned: 0+, 0-
Ratings given: 0+, 0-

Joined: Jun 2009
From: Klang

got it already...now i understand how it works...i dont really used the getElement as i am quite confuse with this thing...but now i roughly understand how it works already...thx a lot...u r a life saver...i search for this through google till crazy...

my problem solved!!!

QUOTE(puaka_astro @ Nov 4 2009, 11:32 AM)

Dude.. check this out.. compare with yours.. got the idea ?

CODE

<html>
<head>
<script>
var gi;
function startCalc(i){
gi = i;
interval = setInterval("calc(gi)", 1);
}

function calc(i){
var one = document.getElementById("a"+i).value;
var two = document.getElementById("b"+i).value;
var total = document.getElementById("total"+i);
var sum = (one * 1) + (two * 1);
total.style.color = 'royalblue';
total.value = sum;
if (isNaN(sum)) {
total.style.color = 'red';
total.value = 'Enter numeric value!';
stopCalc();
}
}

function stopCalc(){
clearInterval(interval);
}
</script>
</head>
<body>
<?php
for($i = 1; $i <= 10; $i++) {
echo "<input type=\"text\" id=\"a$i\" onKeyup=\"startCalc($i);\" onBlur=\"stopCalc();\" /> ".
"<input type=\"text\" id=\"b$i\" onKeyup=\"startCalc($i);\" onBlur=\"stopCalc();\"/> ".
"<input type=\"text\" id=\"total$i\" /> <br />";
}
?>
</body>
</html>

Added on November 4, 2009, 2:27 pmmeans if let say there is more things surrounded the input, what i had to do is just add additional parentNode to it?

QUOTE(sunsuron @ Nov 4 2009, 02:20 PM)

CODE

var inputs = el.parentNode.getElementsByTagName('input'); // get the <div> that surrounds all the <input>

There's a reason why I add <div> to surround all <input>. To understand why, you need to know the concept of Document Object Model (DOM) or simply the document tree. It's a handy concept or tool that enable us to visualize our HTML/XML easily (in our head). Read about parent-child-siblings relationships and other DOM APIs such as the getElement and parentNode methods.

Changing the DOM will affect the given JS behavior. All your <input> now was surrounded by the <tr> tag and this is the key.

CODE

var inputs = el.parentNode.parentNode.getElementsByTagName('input'); // get the <tr> that surrounds all the <input>

This post has been edited by xinesooi84: Nov 4 2009, 02:27 PM

puaka_astro

Nov 4 2009, 02:33 PM

Show posts by this member only |This post's rating (0+, 0-) | Post #9

Getting Started

Group: Junior Member
Posts: 130
Ratings earned: 0+, 0-
Ratings given: 0+, 0-

Joined: Jun 2007

great.. when you have extra time.. take a peek on jquery

sunsuron

Nov 4 2009, 02:33 PM

Show posts by this member only |This post's rating (0+, 0-) | Post #10

PHP Web Developer

Group: Senior Member
Posts: 750
Ratings earned: 0+, 0-
Ratings given: 0+, 0-

Joined: Nov 2004

QUOTE(xinesooi84 @ Nov 4 2009, 02:21 PM)

means if let say there is more things surrounded the input, what i had to do is just add additional parentNode to it?

Like I said, read DOM and sleep on it. It will save you from many problems out there as far as JS is concern.

« Next Oldest · Codemasters · Next Newest »