Lowyat.NET Forums

Welcome Guest ( Log In | Register )

 
 RSS feedBump TopicReply to this topicStart new topicStart Poll

Outline · [ Standard ] · Linear+

> [Help] Autosum on PHP + Javascript (JavaScript)

Share on | Track this topic | Email this topic | Print this topic
xinesooi84
post 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: 30
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

function startCalc(i){
 interval = setInterval("calc(i)", 1);
}

function calc(i){
 one = document.adder.a[i].value;
 two = document.adder.b[i].value;
 document.adder.total[i].value = (one * 1) + (two * 1);
}

function stopCalc(){
 clearInterval(interval);
}


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...
User is offlineProfile CardPM
Go to the top of the page
+Quote Post
sunsuron
post 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: 835
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... «
User is offlineProfile CardPM
Go to the top of the page
+Quote Post
puaka_astro
post 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: 189
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.
User is offlineProfile CardPM
Go to the top of the page
+Quote Post
xinesooi84
post 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: 30
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

<table>
 <tr>
   <td><input type="text" name="a[]" onblur="calc(this)"></td>
   <td><input type="text" name="b[]" onblur="calc(this)"></td>
   <td><input type="text" name="t[]" onblur="calc(this)"></td>
 </tr>
</table>


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
User is offlineProfile CardPM
Go to the top of the page
+Quote Post
puaka_astro
post 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: 189
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>
User is offlineProfile CardPM
Go to the top of the page
+Quote Post
Cannibal
post 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: 35
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);
User is offlineProfile CardPM
Go to the top of the page
+Quote Post
sunsuron
post 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: 835
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>
User is offlineProfile CardPM
Go to the top of the page
+Quote Post
xinesooi84
post 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: 30
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
User is offlineProfile CardPM
Go to the top of the page
+Quote Post
puaka_astro
post 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: 189
Ratings earned: 0+, 0-
Ratings given: 0+, 0-

Joined: Jun 2007
great.. when you have extra time.. take a peek on jquery smile.gif
User is offlineProfile CardPM
Go to the top of the page
+Quote Post
sunsuron
post 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: 835
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.
User is offlineProfile CardPM
Go to the top of the page
+Quote Post
« Next Oldest · Codemasters · Next Newest »
 

Bump TopicReply to this topicTopic OptionsStart new topic
 

Lo-Fi Version Time is now: 22nd March 2010 - 06:59 AM
All Rights Reserved 2003-2009 Vijandren Ramadass (~living on a prayer~)
Powered by Invision Power Board(Trial) © 2010  IPS, Inc.