Using javascript to create table rows containing form elements

**Kor** · 03-10-2010 03:34 AM

Originally Posted by Janthro

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.

**noob45** · 04-21-2010 08:09 PM

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)...

**noob45** · 04-21-2010 10:55 PM

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>

**richardishere** · 06-21-2010 01:05 PM

how do you include <textarea>

**nebchill26** · 07-08-2010 10:02 PM

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

**shanehussain** · 03-09-2011 02:26 AM

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 ?

**Kor** · 03-09-2011 03:23 AM

TEXTAREA? Give it a value.

**laptopalias** · 04-28-2011 05:53 AM

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?

**Kor** · 04-28-2011 06:01 AM

On which script do you refer?

**laptopalias** · 04-28-2011 06:10 AM

Your second one (I think)

**Kor** · 04-28-2011 07:19 AM

Post it here. Or post your code, where you have integrated it.

**laptopalias** · 04-28-2011 07:55 AM

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>

**Kor** · 04-28-2011 08:21 AM

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.

**laptopalias** · 04-28-2011 09:59 AM

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.

**Kor** · 04-28-2011 10:06 AM

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: Using javascript to create table rows containing form elements

Thread Tools

Display

what about textarea?

text area in form

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

Thread Information

Users Browsing this Thread

Bookmarks

Bookmarks

Posting Permissions