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 9 of 9
  1. #1
    New to the CF scene
    Join Date
    Jul 2005
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Unhappy createElement() - adding select box

    Im facing problem in my form

    I've loaded some data from server side, with some selecte boxex, and text boxes in one row(<tr>)
    say 4 rows

    my form containing "Add new button", which displays same row having same values of above 4 rows

    i used createElement("Select") function, but im unable add elements to that select list

    plz help, its urgent, send the code

    thankx
    Venki,

  • #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
    use better cloneNode(true) method to clone the whole row, and append it to the tbody. cloneNode(true) will perform something like a "copy to the clipboard" action. The advantage is that it will copy the whole element, including all the childNodes, so that there is no need to create them again. myabe you will need to increment the names of the form elements, but that is quite easy.
    KOR
    Offshore programming
    -*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*

  • #3
    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
    Here's an example:
    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">
    function 
    addRow(){
    var 
    document.getElementById('mytab').getElementsByTagName('tr');
    var 
    len r.length;
    var clone=
    r[0].cloneNode(true);
    for(var 
    i=0;i<clone.getElementsByTagName('td').length;i++){
    var 
    kids=clone.getElementsByTagName('td')[i].childNodes;
    for(var 
    j=0;j<kids.length;j++){
    (
    kids[j].name)?kids[j].name+=len:null
    }
    }
    r[0].parentNode.appendChild(clone)
    }
    </script>
    </head>
    <body>
    <form>
    <table id="mytab" width="400" border="1" cellspacing="1" cellpadding="0">
    <tr> 
    <td> <select name="select">
    <option>1</option>
    <option>2</option>
    </select> </td>
    <td> <input name="textfield" type="text"> </td>
    </tr>
    <tr> 
    <td> <select name="select1">
    <option>1</option>
    <option>2</option>
    </select> </td>
    <td> <input name="textfield1" type="text"> </td>
    </tr>
    <tr> 
    <td> <select name="select2">
    <option>1</option>
    <option>2</option>
    </select> </td>
    <td> <input name="textfield2" type="text"> </td>
    </tr>
    <tr> 
    <td> <select name="select3">
    <option>1</option>
    <option>2</option>
    </select> </td>
    <td> <input name="textfield3" type="text"> </td>
    </tr>
    </table>

    <br>
    <input type="button" name="Submit" value="Add a new Row" onclick="addRow()">
    </form>
    </body>
    </html> 
    KOR
    Offshore programming
    -*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*

  • #4
    Smokes a Lot
    Join Date
    Jul 2003
    Location
    CA, USA
    Posts
    1,594
    Thanks
    5
    Thanked 20 Times in 20 Posts
    Here's something I wrote that may save you some headache. I think it does just what you are trying to do. It's for when you want to add another section to a form with the same questions, ie. an employment application for references or something. It will clone any (and all) elements in the form and rename them incrementally.

    Form Element Duplicator

    Basscyst
    Last edited by Basscyst; 03-13-2006 at 07:43 PM.
    Helping to build a bigger box. - Adam Matthews

  • #5
    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
    Nice code Basscyst. And comprehensive. Basicaly it looks the same ideea as mine, except that I, in my indolence, in order to increment the names, I used exactly the name attribute to find all the form's elements in a row, as I usually use name only for the form's elements. As the rest, as long name is to be used only for the form's elements and the next row is a mirror of the previous, my code should work the same, dynamically, nomatter of the number of elements in a cell or the number of the cells in a row. Of course, I presumed that there will be not other intermediate childNodes between the cell and those form's elements, which should be true most of the cases.
    KOR
    Offshore programming
    -*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*

  • #6
    Smokes a Lot
    Join Date
    Jul 2003
    Location
    CA, USA
    Posts
    1,594
    Thanks
    5
    Thanked 20 Times in 20 Posts
    I'm glad you like it, I like the fact that yours can clone a table row, instead of the whole form. I'll also note if you clone a radio box group it will maintain it's grouping (in IE) with the original group, even if you change the name after the cloning. So you actually have to remove the node and define the name, disgustingly at the creation of the element. createElement('<radio name="name">'). I just thought I'd throw that out there as it drove me mad when I made that script.

    Basscyst
    Helping to build a bigger box. - Adam Matthews

  • #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
    Probably you are based too much on the innerHTML IE's alert to check. Now have a look, it's to dig a little bit about why the IE's innerHTML do that:
    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">
    function 
    addRow(){
    var 
    document.getElementById('mytab').getElementsByTagName('tr');
    var 
    len r.length;
    var clone=
    r[0].cloneNode(true);
    for(var 
    i=0;i<clone.getElementsByTagName    ('td').length;i++){
    var 
    kids=clone.getElementsByTagName('td')[i].childNodes;
    for(var 
    j=0;j<kids.length;j++){
    (
    kids[j].name)?kids[j].name+=len:null
    }
    }
    r[0].parentNode.appendChild(clone);
    alert(r[r.length-1].innerHTML)
    alert(r[r.length-1].getElementsByTagName('input')[1].name)
    }
    </script>
    </head>
    <body>
    <form>
      <table id="mytab" width="400" border="1" cellspacing="1" cellpadding="0">
        <tr> 
          <td> <select name="select">
              <option>1</option>
              <option>2</option>
            </select> </td>
          <td> <input name="textfield" type="text"> </td>
          <td><input name="rad" type="radio">
            <input name="rad" type="radio">
            <input name="rad" type="radio"></td>
        </tr>
      </table>
    <br>
    <input type="button" value="Add a new Row" onclick="addRow()">
    <input type="submit" value="Submit">
    </form>
    </body>
    </html> 
    So that the code will show the correct name of the radio button, will submit correctly the names/values, but the innerHTML in IE is "frozen". I have noticed that some time before, so than, when checking the code I don't use innerHTML too often, I prefere to alert directly the attributes or values of a certain object...
    KOR
    Offshore programming
    -*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*

  • #8
    Smokes a Lot
    Join Date
    Jul 2003
    Location
    CA, USA
    Posts
    1,594
    Thanks
    5
    Thanked 20 Times in 20 Posts
    Quote Originally Posted by Kor
    Probably you are based too much on the innerHTML IE's alert to check. Now have a look, it's to dig a little bit about why the IE's innerHTML do that:
    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">
    function 
    addRow(){
    var 
    document.getElementById('mytab').getElementsByTagName('tr');
    var 
    len r.length;
    var clone=
    r[0].cloneNode(true);
    for(var 
    i=0;i<clone.getElementsByTagName    ('td').length;i++){
    var 
    kids=clone.getElementsByTagName('td')[i].childNodes;
    for(var 
    j=0;j<kids.length;j++){
    (
    kids[j].name)?kids[j].name+=len:null
    }
    }
    r[0].parentNode.appendChild(clone);
    alert(r[r.length-1].innerHTML)
    alert(r[r.length-1].getElementsByTagName('input')[1].name)
    }
    </script>
    </head>
    <body>
    <form>
      <table id="mytab" width="400" border="1" cellspacing="1" cellpadding="0">
        <tr> 
          <td> <select name="select">
              <option>1</option>
              <option>2</option>
            </select> </td>
          <td> <input name="textfield" type="text"> </td>
          <td><input name="rad" type="radio">
            <input name="rad" type="radio">
            <input name="rad" type="radio"></td>
        </tr>
      </table>
    <br>
    <input type="button" value="Add a new Row" onclick="addRow()">
    <input type="submit" value="Submit">
    </form>
    </body>
    </html> 
    So that the code will show the correct name of the radio button, will submit correctly the names/values, but the innerHTML in IE is "frozen". I have noticed that some time before, so than, when checking the code I don't use innerHTML too often, I prefere to alert directly the attributes or values of a certain object...
    Yep, Yep, it does change the name and submit properly to the server, but try to select an option from a cloned row and it will uncheck any options checked in a preceding row.

    Basscyst
    Helping to build a bigger box. - Adam Matthews

  • #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
    Oh, I see... Weird IE bug indeed. So that ? Hmmm you suggest to replace radios with new created one?
    --------------
    OK, I saw one of your threads here
    Renamed radio buttons not recognized as a new group.
    and some solutions.. Yea, it looks like the radios must be created by all means. Stupid IE...
    Last edited by Kor; 03-14-2006 at 11:38 AM.
    KOR
    Offshore programming
    -*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*


  •  

    Posting Permissions

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