Post what you have so far.Quote:
Originally Posted by Janthro
Post what you have so far.Quote:
Originally Posted by Janthro
what am i doing wrong here? i am not able to print(echo) the second textbox (textfield_a_1)...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>
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>
how do you include <textarea>
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
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 ?
TEXTAREA? Give it a value.
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?
On which script do you refer?
Your second one (I think)
Post it here. Or post your code, where you have integrated it.
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>
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.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>
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.
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')
...
