...

View Full Version : Simple adding function won't work in IE



bevan
01-27-2006, 11:02 PM
This script works fine in firefox and safari but not in internet explorer.


The values of the last textfield on each row should be added and outputted into the total box(the user can add as many rows as they want).

please help

Bevan

the code

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script language="Javascript" type="text/javascript">
var Cnt=2;

function addField(area,field,limit) {
if (Cnt>limit){ return; }
if(!document.getElementById) return;
var field_area=document.getElementById(area);
var li=field_area.getElementsByTagName('LI')[0].cloneNode(true);
field_area.appendChild(li);
var ips=li.getElementsByTagName('INPUT');
for (var zxc0=0;zxc0<ips.length;zxc0++){
ips[zxc0].value='';
ips[zxc0].name='friend_'+Cnt+zxc0+1;
ips[zxc0].id='friend_A'+Cnt+zxc0+1;
}
Cnt++;
}

function Add(obj,id){
var totalobj=document.getElementById(id);
if (!totalobj.ary){ totalobj.ary=[]; }
if (!obj.set){obj.set=true; totalobj.ary.push(obj); }
obj.value=obj.value.replace(/\D/g,''); // only digits
var val=0;
for (var zxc0 in totalobj.ary){
if (totalobj.ary[zxc0].value.length>0){
val+=totalobj.ary[zxc0].value*1;
}
}
totalobj.value=val;
}
</script>


</head>

<body>
<br>
<form name="frm" method="POST">
<br />
<ol id="friends_area">
<li >
<input name="friend_11" type="text" id="friend_A11" size="4" />
<input name="friend_12" type="text" id="friend_A12" size="20" />
<input name="friend_13" type="text" id="friend_A13" size="10">
<input name="friend_14" type="text" id="friend_A14" size="10" >
<input name="friend_15" type="text" id="friend_A15" onKeyUp="Add(this,'total4');" size="7" >
</li>
</ol>
<input type="button" value="Add Another row" onClick="addField('friends_area','friend_',44);" />
total
<td>&nbsp;</td>
</tr>
<tr>
<td>&nbsp;</td>
<td><input id="total4" ></td>
</tr>
</table>
<br />
<br />
</form>

</body>
</html>

subhailc
01-28-2006, 09:19 AM
try this for the add func
function Add(id){
var a=document.getElementsByName("friend_15");
var b=0;
for(var i=0;i<a.length;i++){
var c=parseFloat(a[i].value);
b+=isNaN(c)?0:c;}
document.getElementById(id).value=b;}
remember to take the "this" argument out of the calls too, like
onkeyup="Add('total4')"

bevan
01-29-2006, 12:12 PM
nearly, now it works but only when you key up in the first row, the others dont respond.

:confused:

this is what i got


<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script language="Javascript" type="text/javascript">
var Cnt=2;

function addField(area,field,limit) {
if (Cnt>limit){ return; }
if(!document.getElementById) return;
var field_area=document.getElementById(area);
var li=field_area.getElementsByTagName('LI')[0].cloneNode(true);
field_area.appendChild(li);
var ips=li.getElementsByTagName('INPUT');
for (var zxc0=0;zxc0<ips.length;zxc0++){
ips[zxc0].value='';
ips[zxc0].name='friend_'+Cnt+zxc0+1;
ips[zxc0].id='friend_A'+Cnt+zxc0+1;
}
Cnt++;
}

function Add(id){
var a=document.getElementsByName("friend_15");
var b=0;
for(var i=0;i<a.length;i++){
var c=parseFloat(a[i].value);
b+=isNaN(c)?0:c;}
document.getElementById(id).value=b;}
</script>


</head>

<body>
<br>
<form name="frm" method="POST">
<br />
<ol id="friends_area">
<li >
<input name="friend_11" type="text" id="friend_A11" size="4" />
<input name="friend_12" type="text" id="friend_A12" size="20" />
<input name="friend_13" type="text" id="friend_A13" size="10">
<input name="friend_14" type="text" id="friend_A14" size="10" >
<input name="friend_15" type="text" id="friend_A15" onkeyup="Add('total4')" size="7" >
</li>
</ol>
<input type="button" value="Add Another row" onClick="addField('friends_area','friend_',44);" />
total
<td>&nbsp;</td>
</tr>
<tr>
<td>&nbsp;</td>
<td><input id="total4" ></td>
</tr>
</table>
<br />
<br />
</form>

</body>
</html>

subhailc
01-30-2006, 05:54 AM
the naming procedure you're using is kinda rough - the easiest thing would be to abandon those names, and give all the ones with keyup the same name - it should work as is with that change, but i dont know what all you have going so i'll assume you have to have all those z's and x's :) anyways, here's a cheesy hack :/

function Add(id){
var a=document.getElementsByTagName("input");
var b=0;
for(var i=0;i<a.length;i++){
if(a[i].onkeyup){
var c=parseFloat(a[i].value);
b+=isNaN(c)?0:c;}
}
document.getElementById(id).value=b;}

bevan
01-30-2006, 10:34 AM
thanks dude.

but i still cant get to work in ie, i'm going nuts

i dont know how to give them all the same name cos they are generated dynamically.

:mad:

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script language="Javascript" type="text/javascript">
var Cnt=2;

function addField(area,field,limit) {
if (Cnt>limit){ return; }
if(!document.getElementById) return;
var field_area=document.getElementById(area);
var li=field_area.getElementsByTagName('LI')[0].cloneNode(true);
field_area.appendChild(li);
var ips=li.getElementsByTagName('INPUT');
for (var zxc0=0;zxc0<ips.length;zxc0++){
ips[zxc0].value='';
ips[zxc0].name='friend_'+Cnt+zxc0+1;
ips[zxc0].id='friend_A'+Cnt+zxc0+1;
}
Cnt++;
}

function Add(id){
var a=document.getElementsByTagName("input");
var b=0;
for(var i=0;i<a.length;i++){
if(a[i].onkeyup){
var c=parseFloat(a[i].value);
b+=isNaN(c)?0:c;}
}
document.getElementById(id).value=b;}
</script>


</head>

<body>
<br>
<form name="frm" method="POST">
<br />
<ol id="friends_area">
<li >
<input name="friend_11" type="text" id="friend_A11" size="4" />
<input name="friend_12" type="text" id="friend_A12" size="20" />
<input name="friend_13" type="text" id="friend_A13" size="10">
<input name="friend_14" type="text" id="friend_A14" size="10" >
<input name="friend_15" type="text" id="friend_A15" onKeyUp="Add('total4')" size="7" >
</li>
</ol>
<input type="button" value="Add Another row" onClick="addField('friends_area','friend_',44);" />
total
<td>&nbsp;</td>
</tr>
<tr>
<td>&nbsp;</td>
<td><input id="total4" ></td>
</tr>
</table>
<br />
<br />
</form>

</body>
</html>

subhailc
01-30-2006, 12:05 PM
i can't do it with what you have - but this works, maybe you can use it
<html>
<head>

<script>

var el=document.getElementById;

function val(a){
if(a.nodeType==1)return val(a.value);
var b=parseFloat(a);
return isFinite(a)?a:0;}

function addup(){
var a=document.getElementsByName("keycontrols");
var b=document.getElementById("total");
var c=b.value=0;
for(var i=0;i<a.length;i++)c+=val(a[i])*1;
b.value=c;}

function addfield(){
el("list").innerHTML+=el("list").original;}

onload=function(){
el("list").original=el("original").outerHTML;}

</script>

</head>

<body>
<form name="frm" method="POST">
<ol id="list">
<li id="original">
<input />
<input />
<input />
<input />
<input name="keycontrols" onKeyDown="var a=event.keyCode;return (a>95&&a<106)||(a>47&&a<58)" onKeyUp="addup()" />
</li>
</ol>

<input type="button" value="Add Another row" onClick="addfield()" />total
<input id="total" />
</form>
</body>
</html>

subhailc
01-30-2006, 12:05 PM
i can't do it with what you have - but this works, maybe you can use it
<html>
<head>

<script>

var el=document.getElementById;

function val(a){
if(a.nodeType==1)return val(a.value);
var b=parseFloat(a);
return isFinite(a)?a:0;}

function addup(){
var a=document.getElementsByName("keycontrols");
var b=document.getElementById("total");
var c=b.value=0;
for(var i=0;i<a.length;i++)c+=val(a[i])*1;
b.value=c;}

function addfield(){
el("list").innerHTML+=el("list").original;}

onload=function(){
el("list").original=el("list").innerHTML;}

</script>

</head>

<body>
<form name="frm" method="POST">
<ol id="list">
<li>
<input />
<input />
<input />
<input />
<input name="keycontrols" onKeyDown="var a=event.keyCode;return (a>95&&a<106)||(a>47&&a<58)" onKeyUp="addup()" />
</li>
</ol>

<input type="button" value="Add Another row" onClick="addfield()" />total
<input id="total" />
</form>
</body>
</html>

bevan
01-30-2006, 02:03 PM
sorry mate, looks like a good way to do it but the addfield doesnt work.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum