Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 8 of 8
  1. #1
    New Coder
    Join Date
    Jan 2006
    Posts
    41
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Simple adding function won't work in IE

    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>

  • #2
    Regular Coder
    Join Date
    Jan 2004
    Posts
    185
    Thanks
    2
    Thanked 1 Time in 1 Post
    try this for the add func
    Code:
    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
    Code:
    onkeyup="Add('total4')"

  • #3
    New Coder
    Join Date
    Jan 2006
    Posts
    41
    Thanks
    0
    Thanked 0 Times in 0 Posts
    nearly, now it works but only when you key up in the first row, the others dont respond.



    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>

  • #4
    Regular Coder
    Join Date
    Jan 2004
    Posts
    185
    Thanks
    2
    Thanked 1 Time in 1 Post
    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 :/
    Code:
    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;}

  • #5
    New Coder
    Join Date
    Jan 2006
    Posts
    41
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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.



    <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>

  • #6
    Regular Coder
    Join Date
    Jan 2004
    Posts
    185
    Thanks
    2
    Thanked 1 Time in 1 Post
    i can't do it with what you have - but this works, maybe you can use it
    Code:
    <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>

  • #7
    Regular Coder
    Join Date
    Jan 2004
    Posts
    185
    Thanks
    2
    Thanked 1 Time in 1 Post
    i can't do it with what you have - but this works, maybe you can use it
    Code:
    <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>
    Last edited by subhailc; 01-30-2006 at 11:08 AM.

  • #8
    New Coder
    Join Date
    Jan 2006
    Posts
    41
    Thanks
    0
    Thanked 0 Times in 0 Posts
    sorry mate, looks like a good way to do it but the addfield doesnt work.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •