...

View Full Version : keyup on dynamically added textfields?



bevan
01-30-2006, 09:47 AM
ok, so this is meant to be like a shopping cart type thing, the user can add as many rows as they want and the prices in the last boxs on each row are added up and put in the total box.

this is all fine but the keyup to add the total doesnt work in internet explorer???

<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')" value="price" 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 name="total4" id="total4" value="total price" ></td>
</tr>
</table>
<br />
<br />
</form>

</body>
</html>

Kor
01-30-2006, 10:08 AM
try:
if(a[i].getAttribute('onkeyup')||a[i].getAttribute('onkeyup')!=null)
instead of:
if(a[i].onkeyup)

and use lowercase for event handlers

onkeyup="Add('total4')"

bevan
01-30-2006, 12:58 PM
no, still doesnt work in explorer.:confused:

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.getElementsByTagName("input");
var b=0;
for(var i=0;i<a.length;i++){
if(a[i].getAttribute('onkeyup')||a[i].getAttribute('onkeyup')!=null){
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')" value="price" 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 name="total4" id="total4" value="total price" ></td>
</tr>
</table>
<br />
<br />
</form>

</body>
</html>

Kor
01-30-2006, 04:41 PM
It works for me absolutelly the same in IE as in FF (IE6 - FF 1.5). Except that I use a HTML DTD, not a xml one... By the way... do you really need an XML DTD... I guess that this supposes to be a HTML page (or, at least, a XHTML page...)


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<meta http-equiv="Content-Style-Type" content="text/css">
<meta http-equiv="Content-Script-Type" content="text/javascript">
<script 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].getAttribute('onkeyup')||a[i].getAttribute('onkeyup')!=null){
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')" value="price" 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 name="total4" id="total4" value="total price" ></td>
</tr>
</table>
<br />
<br />
</form>
</body>
</html>


Or in fact you want something else?...

And, by the way, I should have written the function Add() otherwise:


function Add(id){
var a=document.getElementsByTagName('li');
var b=0;
for(var i=0;i<a.length;i++){
var inp = a[i].getElementsByTagName('input');
b+=Number(inp[inp.length-1].value);
}
document.getElementById(id).value=b;
}

bevan
01-30-2006, 04:55 PM
cheers

working on it

bevan
01-30-2006, 05:07 PM
sorry im really new to this but it doesnt work for me

what have i done wrong?

<!DOCTYPE&#160;HTML&#160;PUBLIC&#160;"-//W3C//DTD&#160;HTML&#160;4.01&#160;Transitional//EN"&#160;&#160;"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Untitled&#160;Document</title>
<meta&#160;http-equiv="Content-Type"&#160;content="text/html;&#160;charset=iso-8859-1">
<meta&#160;http-equiv="Content-Style-Type"&#160;content="text/css">
<meta&#160;http-equiv="Content-Script-Type"&#160;content="text/javascript">
<script&#160;type="text/javascript">
var&#160;Cnt=2;

function&#160;addField(area,field,limit)&#160;{
if&#160;(Cnt>limit){&#160;return;&#160;}
if(!document.getElementById)&#160;return;
var&#160;field_area=document.getElementById(area);
var&#160;li=field_area.getElementsByTagName('LI')[0].cloneNode(true);
field_area.appendChild(li);
var&#160;ips=li.getElementsByTagName('INPUT');
for&#160;(var&#160;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&#160;Add(id){
var&#160;a=document.getElementsByTagName('li');
var&#160;b=0;
for(var&#160;i=0;i<a.length;i++){
var&#160;inp&#160;=&#160;a[i].getElementsByTagName('input');
b+=Number(inp[inp.length-1].value);
}
document.getElementById(id).value=b;
}&#160;
document.getElementById(id).value=b;}

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

Kor
01-30-2006, 05:11 PM
error:

...
document.getElementById(id).value=b;
}
document.getElementById(id).value=b;}
</script>
Remove the red line

bevan
01-30-2006, 07:15 PM
no this still does'nt work

<!DOCTYPE&#160;HTML&#160;PUBLIC&#160;"-//W3C//DTD&#160;HTML&#160;4.01&#160;Transitional//EN"&#160;&#160;"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Untitled&#160;Document</title>
<meta&#160;http-equiv="Content-Type"&#160;content="text/html;&#160;charset=iso-8859-1">
<meta&#160;http-equiv="Content-Style-Type"&#160;content="text/css">
<meta&#160;http-equiv="Content-Script-Type"&#160;content="text/javascript">
<script&#160;type="text/javascript">
var&#160;Cnt=2;

function&#160;addField(area,field,limit)&#160;{
if&#160;(Cnt>limit){&#160;return;&#160;}
if(!document.getElementById)&#160;return;
var&#160;field_area=document.getElementById(area);
var&#160;li=field_area.getElementsByTagName('LI')[0].cloneNode(true);
field_area.appendChild(li);
var&#160;ips=li.getElementsByTagName('INPUT');
for&#160;(var&#160;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&#160;Add(id){
var&#160;a=document.getElementsByTagName('li');
var&#160;b=0;
for(var&#160;i=0;i<a.length;i++){
var&#160;inp&#160;=&#160;a[i].getElementsByTagName('input');
b+=Number(inp[inp.length-1].value);
}
document.getElementById(id).value=b;
}&#160;


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

Kor
01-31-2006, 08:45 AM
It works for me on every browser I have (FF 1.5, IE 6, Mozilla 1.7.12, NS7, NS8, Opera 8.5).

It depends on what do you mean by "no this still doesn't work". According to the intention of your first thread, the code works. But maybe you want something else. If so, tell me what do you mean by "no this still doesn't work".

bevan
01-31-2006, 01:28 PM
sorry

when i test this in browser(IE) i get this:

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

*


total *

Kor
01-31-2006, 08:42 PM
I really don't know what to say much. It works for me in every browser I have tested it... Do you have XP SP2 installed? If so, you might have some problems when running javascript codes locally, but no probs if put them on a server... Thre are solutions for...

bevan
02-01-2006, 11:51 AM
i have mac, osx 10.3.7, is this an issue

Kor
02-01-2006, 12:03 PM
:) Than probably it's time to use another browser (Safari 1.0b2, Camino, SeaMonkey 1.0 (Mozilla), FireFox 1.5.... amongts the best)

IE for Mac?:rolleyes:

As of 22 Nov 2005 even MSN no longer supports this browser: "If you are using Internet Explorer for Mac, we recommend that you use another browser to have an optimal experience on MSN." :D

bevan
02-01-2006, 12:44 PM
doesn,t work in safari or firefox either

i just get this code displayed in the design view of dreamweaver as well.

<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')"*value="price"*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*name="total4"*id="total4"*value="total*price"*></td>
</tr>
</table>
<br*/>
<br*/>
</form>

Kor
02-01-2006, 12:49 PM
What in fact happens? You have not told me which is in fact the error...

bevan
02-01-2006, 01:05 PM
how do i find out what the error is?

In firefox and IE i get this

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

#
total




and in safari i just get


*


total *

Kor
02-01-2006, 01:08 PM
? I have asked you which is the error, not what you see (by the way, I don't understand what * might be). What happends? The new row does not append? The total does not matches...

bevan
02-01-2006, 01:13 PM
when i open the file in my browser it does not display any text fields, buttons or anything just a bullet point and the word "total"

Kor
02-01-2006, 01:27 PM
I am aufully sorry, but I don't know what this might be. I am not a Mac user... In theory everything looks valid and correct to me....

Pyth007
02-01-2006, 04:18 PM
Firefox has a Javascript console that is very helpful in stating what errors may be present (using this, I see no errors). I too cannot locate any problems; the form displays and functions correctly for me. Are you using Dreamweaver or a plain text editor to write your HTML? Perhaps Dreamweaver is doing something funky to the code...

bevan
02-01-2006, 04:39 PM
hi

im using dreamweaver, ill try TextEdit

Kor
02-01-2006, 05:17 PM
hi

im using dreamweaver, ill try TextEdit

use dreamwever as an editor not as a viewer... Or use F12 to see the pages. I use Dreaweaver as well, but I preferere to check the final results using a browser, not a viewer.
On the other hand... is it your page a dynamic one (php...asp...)? If so, you need a dynamic emulator (such as phpdev for php) to see locally what is to be seen on a server)

bevan
02-01-2006, 05:37 PM
I always preview in a browser, safari is my default one.

its not a dynamic page, but it just displays the word "total".



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum