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.
Page 1 of 2 12 LastLast
Results 1 to 15 of 23
  1. #1
    New Coder
    Join Date
    Jan 2006
    Posts
    41
    Thanks
    0
    Thanked 0 Times in 0 Posts

    keyup on dynamically added textfields?

    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>

  • #2
    Kor
    Kor is offline
    Red Devil Mod Kor's Avatar
    Join Date
    Apr 2003
    Location
    Bucharest, ROMANIA
    Posts
    8,478
    Thanks
    58
    Thanked 379 Times in 375 Posts
    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')"
    Last edited by Kor; 01-30-2006 at 10:10 AM.
    KOR
    Offshore programming
    -*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*

  • #3
    New Coder
    Join Date
    Jan 2006
    Posts
    41
    Thanks
    0
    Thanked 0 Times in 0 Posts
    no, still doesnt work in explorer.

    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>

  • #4
    Kor
    Kor is offline
    Red Devil Mod Kor's Avatar
    Join Date
    Apr 2003
    Location
    Bucharest, ROMANIA
    Posts
    8,478
    Thanks
    58
    Thanked 379 Times in 375 Posts
    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...)
    PHP Code:
    <!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:
    PHP Code:
    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;

    Last edited by Kor; 01-30-2006 at 04:44 PM.
    KOR
    Offshore programming
    -*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*

  • #5
    New Coder
    Join Date
    Jan 2006
    Posts
    41
    Thanks
    0
    Thanked 0 Times in 0 Posts
    cheers

    working on it
    Last edited by bevan; 01-30-2006 at 05:02 PM.

  • #6
    New Coder
    Join Date
    Jan 2006
    Posts
    41
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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_are a','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;

  • #7
    Kor
    Kor is offline
    Red Devil Mod Kor's Avatar
    Join Date
    Apr 2003
    Location
    Bucharest, ROMANIA
    Posts
    8,478
    Thanks
    58
    Thanked 379 Times in 375 Posts
    error:

    ...
    document.getElementById(id).value=b;
    }
    document.getElementById(id).value=b;}
    </script>
    Remove the red line
    KOR
    Offshore programming
    -*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*

  • #8
    New Coder
    Join Date
    Jan 2006
    Posts
    41
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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_are a','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>

  • #9
    Kor
    Kor is offline
    Red Devil Mod Kor's Avatar
    Join Date
    Apr 2003
    Location
    Bucharest, ROMANIA
    Posts
    8,478
    Thanks
    58
    Thanked 379 Times in 375 Posts
    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".
    KOR
    Offshore programming
    -*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*

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

  • #11
    Kor
    Kor is offline
    Red Devil Mod Kor's Avatar
    Join Date
    Apr 2003
    Location
    Bucharest, ROMANIA
    Posts
    8,478
    Thanks
    58
    Thanked 379 Times in 375 Posts
    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...
    KOR
    Offshore programming
    -*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*

  • #12
    New Coder
    Join Date
    Jan 2006
    Posts
    41
    Thanks
    0
    Thanked 0 Times in 0 Posts
    i have mac, osx 10.3.7, is this an issue

  • #13
    Kor
    Kor is offline
    Red Devil Mod Kor's Avatar
    Join Date
    Apr 2003
    Location
    Bucharest, ROMANIA
    Posts
    8,478
    Thanks
    58
    Thanked 379 Times in 375 Posts
    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?

    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."
    KOR
    Offshore programming
    -*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*

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

  • #15
    Kor
    Kor is offline
    Red Devil Mod Kor's Avatar
    Join Date
    Apr 2003
    Location
    Bucharest, ROMANIA
    Posts
    8,478
    Thanks
    58
    Thanked 379 Times in 375 Posts
    What in fact happens? You have not told me which is in fact the error...
    KOR
    Offshore programming
    -*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*


  •  
    Page 1 of 2 12 LastLast

    Posting Permissions

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