www.webdeveloper.com
Page 1 of 7 123 ... LastLast
Results 1 to 15 of 93

Thread: Using javascript to create table rows containing form elements

  1. #1
    Join Date
    Apr 2005
    Posts
    2

    Using javascript to create table rows containing form elements

    Good morning/afternoon/evening everyone,

    I am really struggling with a little bit of javascript I am working on. I know the solution with a bit of javascript is simple but unfortunately I am no javascript wizard.

    I have a form that will initially contain 1 table row with 3 form elements (2 text boxes and one dropdown select). The form tags are wrapped around the table. What I want to do is use a form button to add new rows on demand. So if the button (labeled with a +) was clicked a new row would be added with the same 3 form elements listed above but with a new name for the element (1,2,3 so on..). Each time the + was clicked a new row would appear. I know this is probably simple but just can't seem to find any examples anywhere on this entire world wide web. If you can help me, please I would be so greatful.

    You can view an example page of what the form will look like at http://www.rainbowphotography1.com/formtest.htm . It has no functionality at this time.

    Thank you to ANYONE who can point me in the right direction or if you could whip up a quick little bit of javascript for me. It is more then I deserve but I'm asking anyways.

  2. #2
    Join Date
    Dec 2003
    Location
    Bucharest, ROMANIA
    Posts
    15,428
    try this:
    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(r){
    var 
    root r.parentNode;//the root
    var allRows root.getElementsByTagName('tr');//the rows' collection
    var cRow allRows[0].cloneNode(true)//the clone of the 1st row
    var cInp cRow.getElementsByTagName('input');//the inputs' collection of the 1st row
    for(var i=0;i<cInp.length;i++){//changes the inputs' names (indexes the names)
    cInp[i].setAttribute('name',cInp[0].getAttribute('name')+'_'+(allRows.length+1))
    }
    var 
    cSel cRow.getElementsByTagName('select')[0];
    cSel.setAttribute('name',cSel.getAttribute('name')+'_'+(allRows.length+1));//change the selecet's name
    root.appendChild(cRow);//appends the cloned row as a new row
    }
    </script>
    </head>
    <body>
    <form action="" method="get">
      <table width="766"  border="0" cellspacing="0" cellpadding="0">
        <tr>
          <td width="191"><input type="text" name="textfield_a" /></td>
          <td width="191"><input type="text" name="textfield_b" /></td>

          <td width="98"><select name="select">
            <option value="item1" selected="selected">item1</option>
            <option value="item2">item2</option>
            <option value="item3">item3</option>
            <option value="item4">item4</option>
            <option value="item5">item5</option>

          </select></td>
          <td width="286"><input name="button" type="button" value="+" onclick="addRow(this.parentNode.parentNode)"></td>
        </tr>
      </table><br /><br />
      <input name="" type="submit" value="Submit" />
    </form>
    </body>
    </html> 
    Last edited by Kor; 04-26-2005 at 05:22 AM.

  3. #3
    Join Date
    Apr 2005
    Posts
    2
    Kor,

    Wow, you do not know how appreciative I am of your help! That is absolutely perfect for what I needed. Perfect! Thank you so very, very, very much for taking the time to assist me.

    Robbie

  4. #4
    Join Date
    Apr 2005
    Posts
    2
    I used the bases of this script to, was looking for someting like that for almost 3 days. Thank you Kor.

  5. #5
    Join Date
    Dec 2003
    Location
    Bucharest, ROMANIA
    Posts
    15,428
    You're welcome...

    It is nothing special than the "almighty" DOM methods... Particulary the cloneNode() method...

  6. #6
    Join Date
    May 2005
    Posts
    2
    Hi I have tried to add the js to a form of my own below

    <form action="test.php" method="post">

    <table width="766" border="0" cellspacing="0" cellpadding="5">
    <tr>
    <td width="98"><select name="amount">
    <option value="1" selected="selected">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
    <option value="4">4</option>
    <option value="5">5</option>
    <option value="6">6</option>
    </select></td>
    <td width="191"><input type="text" name="desc" /></td>
    <td width="191"><input type="text" name="exvat" /></td>
    <td width="191"><input type="text" name="vat" /></td>
    <td width="191"><input type="text" name="total" /></td>
    <td width="286"><input name="button" type="button" value="+" onclick="addRow(this.parentNode.parentNode)"></td>
    </tr>
    </table>


    If I add a row and fil it in then hit submit (i added a form action to go to a simple out put page
    PHP Code:
    foreach ($HTTP_POST_VARS as $key => $value)
            {
                echo 
    "$key$value<br>";
            }
            
        echo 
    "<br><br>"
    as above)

    I find that the first row of the previous form is outputted fine but the second row is not. The second row does not output the correct information and the variables are not fully renamed.

    Any help much appreciated

  7. #7
    Join Date
    Dec 2003
    Location
    Bucharest, ROMANIA
    Posts
    15,428
    yes, there was a mistake. Try this (remove the shownamefunction and the button afterwards)
    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(r){
    var 
    root r.parentNode;//the root
    var allRows root.getElementsByTagName('tr');//the rows' collection
    var cRow allRows[0].cloneNode(true)//the clone of the 1st row
    var cInp cRow.getElementsByTagName('input');//the inputs' collection of the 1st row
    for(var i=0;i<cInp.length;i++){//changes the inputs' names (indexes the names)
    cInp[i].setAttribute('name',cInp[i].getAttribute('name')+'_'+(allRows.length+1))
    }
    var 
    cSel cRow.getElementsByTagName('select')[0];
    cSel.setAttribute('name',cSel.getAttribute('name')+'_'+(allRows.length+1));//change the selecet's name
    root.appendChild(cRow);//appends the cloned row as a new row
    }
    function 
    shownames(){
    var 
    allInp=document.getElementsByTagName('input');
    for(var 
    i=0;i<allInp.length;i++){
    alert(allInp[i].name)
    }
    }
    </script>
    </head>
    <body>
    <form action="" method="get">
      <table width="766"  border="0" cellspacing="0" cellpadding="0">
        <tr>
          <td width="191"><input type="text" name="textfield_a" /></td>
          <td width="191"><input type="text" name="textfield_b" /></td>

          <td width="98"><select name="select">
            <option value="item1" selected="selected">item1</option>
            <option value="item2">item2</option>
            <option value="item3">item3</option>
            <option value="item4">item4</option>
            <option value="item5">item5</option>

          </select></td>
          <td width="286"><input name="button" type="button" value="+" onclick="addRow(this.parentNode.parentNode)"></td>
        </tr>
      </table><br /><br />
      <input name="submit" type="submit" value="Submit" />
            <br>
            <br>
    <input name="button" type="button" onclick="shownames()" value="Show names">        
    </form>
    </body>
    </html> 

  8. #8
    Join Date
    May 2005
    Posts
    2
    nice one... cheers

  9. #9
    Join Date
    Apr 2005
    Posts
    42
    How if i want to put the header in the table.

  10. #10
    Join Date
    Dec 2003
    Location
    Bucharest, ROMANIA
    Posts
    15,428
    If you use <thead> to do that, it does not matter, as the table structure will be
    <table>
    <thead>
    ...
    </thead>
    <tbody>
    ...
    </tbody>
    </table>

    In my code, the root inside which the rows are referenced is always the tbody

    var root = r.parentNode;//the root (tbody)

  11. #11
    Join Date
    Jan 2008
    Posts
    40
    Wow, this is a great example. Im sorry to bump a 2 or 3 year old thread but it has helped me a lot.

    I have a question or two, is there anyway to add the new row without copying the actual values of the elements? For example, clone the elements themselves, but not the value that is in the elements?

  12. #12
    Join Date
    Dec 2003
    Location
    Bucharest, ROMANIA
    Posts
    15,428
    You may clone them anytime before the user will give them values, if you mean the form's input elements... Need an example?

  13. #13
    Join Date
    Jan 2008
    Posts
    40
    I suppose what I ultimately looking for is this:

    The user inputs the values on my form (I have department, account, description, total, etc..)

    Then if the users wants to input a second row, they click the add row button and a seond row come up but it doesnt contain whatever the user entered for the first row, the inputs are blank?

    I have the form working, just when they add a row it always by default contains what the user inputted in the row above.

    Also, one last thing, which is no big deal, but is there a way to only display the add row button on the last row, as opposed to every row?

    I know all of this defeats the purpose of "clone" but just figured I would ask.

  14. #14
    Join Date
    Dec 2003
    Location
    Bucharest, ROMANIA
    Posts
    15,428
    It is to be done. I've send you a PM (Private Message). I can give you an example tomorrow, here, my time, if it is not too late

  15. #15
    Join Date
    Jan 2008
    Posts
    40
    yes thats fine, thanks for your help!

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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



Recent Articles