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.
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.
<!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>
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.
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.
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>
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?
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.
Reply With Quote
DOM methods... 
Particulary the cloneNode() method...
Bookmarks