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
    Feb 2004
    Posts
    14
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Changing tag's id doesn't work in IE

    I have a textbox with a certain id:

    <input type="text" id="txtTest" name="txtTest">

    that is contained in a tree of other tags; in this case, it's contained in a table's cell.
    I clone the entire row using cloneNode. Now, I have 2 inputs named "txtTest": to avoid confilcts, I change the id if the old one:

    var txtElm = document.getElementById( 'txtTest' );
    /* here: clone a table row using cloneNode */
    txtElm.id = '';
    txtElm.name = '';

    this works fine with Mozilla 1.6 and Opera 7, but, once again, it won't work under IE6. If I do:

    txtElm = document.getElementById( 'txtTest' );
    alert( txtElm.id + ": " + txtElm.value );

    It gives an empty id, and the value of the old textbox. That is, getElementById still retrieves the old textbox. Ideas to avoid this?

    Thanks

  • #2
    Supreme Master coder! glenngv's Avatar
    Join Date
    Jun 2002
    Location
    Philippines
    Posts
    11,047
    Thanks
    0
    Thanked 251 Times in 247 Posts
    Can we see the html source?

  • #3
    New Coder
    Join Date
    Feb 2004
    Posts
    14
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Here is the code:

    Code:
    <html><head>
    
    <script language="JavaScript">
    
    function onKeyPress( id )
    {
     var tbl = document.getElementById( "tblAd" + id );
    
     var trElm = document.getElementById("newRow");
     var txtElm = document.getElementById( 'txtNewId' + id );
     
     var newTr = trElm.cloneNode( true );
     
     trElm.id = '';
     txtElm.onkeypress = function(){};
     txtElm.id = '';
     txtElm.name = '';
     
     //txtElm = document.getElementById( 'txtNewId' + id );
     
     //alert( txtElm.id + ": " + txtElm.value );
     
     tbl.tBodies[0].appendChild( newTr );
    }
    </script>
    
    </head><body>
    
    <table id="tblAd98763" name="tblAd98763">
    
    <tr id="" name="">
    <td align="right">Label:</td>
    <td><input type="text" id="" name=""></td>
    </tr>
    
    <tr id="newRow" name="newRow">
    <td align="right">Label:</td>
    <td><input type="text" id="txtNewId98763" name="txtNewId98763" value="[new]" OnKeyPress="onKeyPress('98763')"></td>
    </tr>
    
    </table>
    
    </body></html>
    The idea is that, when the user writes into the [new] field, another one is created that works as the [new], and the current becomes a normal one.
    If you make this once, it works, but when you reposition on the just created textbox, IE continues to create new items at each character you type.

  • #4
    Supreme Master coder! glenngv's Avatar
    Join Date
    Jun 2002
    Location
    Philippines
    Posts
    11,047
    Thanks
    0
    Thanked 251 Times in 247 Posts
    The id, name and more importantly the onkeypress handler are not reset when the 3rd field is created.
    Let me investigate it further.

    Using a view-source bookmarklet will help you in debugging.

  • #5
    Supreme Master coder! glenngv's Avatar
    Join Date
    Jun 2002
    Location
    Philippines
    Posts
    11,047
    Thanks
    0
    Thanked 251 Times in 247 Posts
    I've fixed it by passing the text field object itself to the function

    onkeypress="onKeyPress(this,'98763')"


    and then changing the function declaration to:

    function onKeyPress(txtElm, id )


    and removing this line:

    var txtElm = document.getElementById( 'txtNewId' + id );

  • #6
    New Coder
    Join Date
    Feb 2004
    Posts
    14
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Ehm... what's a "view-source bookmarklet"?

  • #7
    New Coder
    Join Date
    Feb 2004
    Posts
    14
    Thanks
    0
    Thanked 0 Times in 0 Posts
    It's a good solution, thanks

  • #8
    Supreme Master coder! glenngv's Avatar
    Join Date
    Jun 2002
    Location
    Philippines
    Posts
    11,047
    Thanks
    0
    Thanked 251 Times in 247 Posts
    view-source bookmarklets allows you to view the actual source (runtime) of the page. These are the ones that I used.

    IE:

    javascript:ans=prompt('Specify name of target window/frame/iframe. Empty or non-existing name will mean current topmost window.','');win=window[ans];if(!win)win=top;myWin=window.open('','','width=800,height=600,scrollbars,resizable,menubar');myStr= win.document.documentElement.outerHTML;myStr=myStr.replace(/\</g,'&lt;').replace(/\>/g,'&gt;');myWin.document.open();myWin.document.write('<pre>'+myStr+'</pre>');myWin.document.close();


    NS/Moz:

    javascript:ans=prompt('Specify name of target window/frame/iframe. Empty or non-existing name will mean current topmost window.','');win=window[ans];if(!win)win=top;myWin=window.open('','','width=800,height=600,scrollbars,resizable,menubar');myWin. document.write('<pre>' + unescape((new XMLSerializer()).serializeToString(win.document).replace(/</g, '&lt;')) + '</pre>');myWin.document.close()

    More info on Bookmarklets in general.


  •  

    Posting Permissions

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