Using javascript to create table rows containing form elements

This site is best viewed in a modern browser with JavaScript enabled.

Using javascript to create table rows containing form elements

liquilife

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.

Kor

try this:

<!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>

liquilife

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

Grubolsch

I used the bases of this script to, was looking for someting like that for almost 3 days. Thank you Kor.

Kor

You're welcome...

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

outka5t

Hi I have tried to add the js to a form of my own below

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

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

Kor

yes, there was a mistake. Try this (remove the shownamefunction and the button afterwards)

<!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>

outka5t

nice one... cheers

shmunaz

How if i want to put the header in the table.

Kor

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)

tdob

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?

Kor

You may clone them anytime before the user will give them values, if you mean the form's input elements... Need an example?

tdob

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.

Kor

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

tdob

yes thats fine, thanks for your help!

codingisfun

KOR, could you post the new code here please? I would appreciate that. Good work! By the way, I really liked java.

Thanks.

Kor

A basic example:

<!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">
var clone;
function cloneRow(){
var rows=document.getElementById('mytab').getElementsByTagName('tr');
var index=rows.length;
clone=rows[index-1].cloneNode(true);
var inputs=clone.getElementsByTagName('input'), inp, i=0 ;
while(inp=inputs[i++]){
inp.name=inp.name.replace(/\d/g,'')+(index+1);
}
}
function addRow(){
var tbo=document.getElementById('mytab').getElementsByTagName('tbody')[0];
tbo.appendChild(clone);
cloneRow();
}
onload=cloneRow;
</script>
</head>
<body>
<form>
<table id="mytab">
<tr>
<td>Foo <input type="text" name="foo_1"></td>
<td>Fee <input type="text" name="fee_1"></td>
</tr>
</table>
<br>
<input type="button" value="Add a new row" onclick="addRow()">
</form>
</body>
</html>

tdob

Thank you, this seems to work.

Would adding some javascript that automatically makes a new input appear if a user types in the "foo" field mess up this? Would it be hard to do?

tdob

i have a question about this. does it have to be in a table? right now it is triggered on 'tr' I see. What if I dont want the form in a table, is there anyway to define it otherwise?

Kor

If not a table, than probably in a div... It would not be much difference...