www.webdeveloper.com
Page 6 of 7 FirstFirst ... 4567 LastLast
Results 76 to 90 of 93

Thread: Using javascript to create table rows containing form elements

  1. #76
    Join Date
    Dec 2003
    Location
    Bucharest, ROMANIA
    Posts
    15,428
    Quote Originally Posted by Janthro View Post
    Ok, I have an interesting twist to the code for you Kor. I need to be able to have 3 separate add row buttons on the same page that each would be pulling a different set of variables. How would I change your code to do that? I don't really know javascript, but they want me to change a paper to be online with some changes. Any ideas?
    Post what you have so far.

  2. #77
    Join Date
    Apr 2010
    Posts
    2
    Code:
    <?php
        echo "first row".$_GET[textfield_a]."<br>";
    	echo "second row".$_GET[textfield_a_1];
    	
    ?>
    
    <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="1.php" 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>
    what am i doing wrong here? i am not able to print(echo) the second textbox (textfield_a_1)...

  3. #78
    Join Date
    Apr 2010
    Posts
    2
    hmm i think i solved my problem..
    im posting the code for other's reference.

    PHP Code:
    <?php
    echo count($_POST)."<br>";

    $i=0;
    $numberofrows count($_POST)/2;
    echo 
    "num of rows = ".$numberofrows;
    while(
    $i<$numberofrows){
        
    $first "first".$i;
        
    $second "second".$i;
        
        if (!empty(
    $_POST[$first]) && !empty($_POST[$second]) ){
            echo 
    "<br>";
            echo 
    $i." ".$_POST[$first];
            echo 
    "<br>";
            echo 
    $i." ".$_POST[$second];
            echo 
    "<br>";
        }
        
    $i++;
    }

    ?>

    <html>
    <head>
    <title>untitled</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 clone;
    var i=1;
    function cloneRow(){
        var rows=document.getElementById('mySampleTable').getElementsByTagName('tr');
        clone=rows[rows.length-1].cloneNode(true);
        //alert(rows.length);
        //var inp=clone.getElementsByTagName('input')[0];
        //inp.name=inp.name.replace("txtRow0","first"+i);
        //var sel=clone.getElementsByTagName('input')[1];
        //sel.name=sel.name.replace("txtRow1","second"+i);
        
        var inp=clone.getElementsByTagName('input')[0];
        //alert(inp.getAttribute('name'));
        inp.name=inp.name.replace(inp.getAttribute('name'),"first"+i);
        var sel=clone.getElementsByTagName('input')[1];
        sel.name=sel.name.replace(sel.getAttribute('name'),"second"+i);
        i++;
        
    }
    function addRow(){
        var tbo=document.getElementById('mySampleTable').getElementsByTagName('tbody')[0];
        tbo.appendChild(clone);
        cloneRow();
    }
    function removeRow(){
        var rows=document.getElementById('mySampleTable').getElementsByTagName('tr');
        if(rows[1]){
            rows[0].parentNode.removeChild(rows[rows.length-1]);
        }
    }
    onload=cloneRow

    function submitform()
    {
      document.eval_edit.submit();
    }


    </script>
    </head>
    <body>
    <form action="1.php" name="eval_edit" id=eval_edit method="post" format="html">
                   <table align="center" width = "75%">
                        <tr>
                             <td align = "center">
                                  click add to you know, add a row, and remove to remove a row, and submit to submit your page! whee!
                             </td>
                        </tr>
                        <tr>
                             <td align = "center">
                                  <!--- very imporant to give the table an id --->
                                  <!--- otherwise it won't know where to edit --->
                                  <table border="1" id="mySampleTable">
                                         <tr>
                                            <td>
                                                 Type of Leave
                                            </td>
                                            <td>
                                                No. of Days allowed
                                            </td>
                                          
                                       </tr>
                                       <!--- i create the initial row by hand, there are a lot of --->
                                       <!--- different ways to do this depending on what parsing --->
                                       <!--- language you use, i found this was easiest for the  --->
                                       <!--- snippet, but experiment, do your thing mang. --->
                                       <!--- this matches the same specs we laid out in the javascript --->
                                       <tr>
                                        
                                            <td><input type="text" name="first0" size="40" >
                                         </td>
                                            <td>
                                                 <input type="text" name="second0" size="40" >
                                            </td>
                                       </tr>
                                  </table>

                                  <!--- our buttons call our javascript functions when clicked --->
                                  <input type="button" value="Add" onclick="addRow();">
                                  <input type="button" value="Remove" onclick="removeRow();">
                                  <!--<input type="submit" value="Submit">-->
                                  <a href="javascript: submitform()">Search</a>
                             </td>
                        </tr>
                   </table>
      </form>

    </body>
    </html>

  4. #79
    Join Date
    Jun 2010
    Posts
    1

    Angry what about textarea?

    how do you include <textarea>

  5. #80
    Join Date
    May 2008
    Posts
    57
    hi i hope this thread is still alive i need to ask something in particular about this, i have already figured out how to use your function to add,what i need to do know is how to delete the last form elements added? hope to hear a feedback.tnx

  6. #81
    Join Date
    Mar 2011
    Posts
    1

    Exclamation text area in form

    This is an amazing script. Helping me to create a dynamic form that can add rows for more entries. But Its bringing some issues if i use Textarea. any ideas ? as the value of textarea is NOT in the attrib but between the tags ?how to reach that ?

  7. #82
    Join Date
    Dec 2003
    Location
    Bucharest, ROMANIA
    Posts
    15,428
    TEXTAREA? Give it a value.

  8. #83
    Join Date
    Apr 2011
    Posts
    6

    Dumb, dumb question about what should be a trivial modification...

    This is a great script, and just what i was looking for - I can't believe how long this thread's been kicking around!

    What if I just want the plus button to appear on the bottom row only?

  9. #84
    Join Date
    Dec 2003
    Location
    Bucharest, ROMANIA
    Posts
    15,428
    On which script do you refer?

  10. #85
    Join Date
    Apr 2011
    Posts
    6
    Your second one (I think)

  11. #86
    Join Date
    Dec 2003
    Location
    Bucharest, ROMANIA
    Posts
    15,428
    Post it here. Or post your code, where you have integrated it.

  12. #87
    Join Date
    Apr 2011
    Posts
    6
    See below; this page is going to be generated by some php so, as far as 'integrating' goes, I'm still developing that side of things...

    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>

  13. #88
    Join Date
    Dec 2003
    Location
    Bucharest, ROMANIA
    Posts
    15,428
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
       "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    <head>
    <title>Untitled Document</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <script type="text/javascript">
    /*<![CDATA[*/
    function addRow(){
    var root = document.getElementById('myTab').getElementsByTagName('tbody')[0]; //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" id="myTab">
        <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"></td>
        </tr>
      </table><br />
      <input name="addARow" type="button" value="Add a Row" onclick="addRow()">
      <br />
      <br />
      <input name="submit" type="submit" value="Submit" />
            <br />
            <br />
    <input name="button" type="button" onclick="shownames()" value="Show names">        
    </form>
    </body>
    </html>
    IMPORTANT NOTE: If you are using XHTML notation (ie: <br />, <input />), be consistent and use it all over. And make sure you are using an XHTML Doctype as well. And isolate the embedded javascript code inside CDATA islands, as in my example above.

  14. #89
    Join Date
    Apr 2011
    Posts
    6
    Thanks, I'll have a play around with that. Actually, I've just spotted that my situation is a teeny bit more complicated - I'll have several similar, consecutive tables and I need to be able to add rows to any of them - but this has certainly pointed me in the right direction. Thanks.

  15. #90
    Join Date
    Dec 2003
    Location
    Bucharest, ROMANIA
    Posts
    15,428
    You may pass the id of each table to the function as an argument.
    Code:
    function addRow(tabid){
    var root = document.getElementById(tabid).getElementsByTagName('tbody')[0]; //the root
    ...
    onclick="addRow('mytab1')
    ...
    onclick="addRow('mytab2')
    ...

Thread Information

Users Browsing this Thread

There are currently 2 users browsing this thread. (0 members and 2 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