Need assistance with dynamically adding fields

**madconfusion** · 08-12-2010, 03:48 PM

Hi folks,

I have a script that allows me to dynamically add additional fields to a form, but I can't get it quite right.

It is supposed to allow a user to click the "add" link to add additional fields (which works), but my additional fields don't have any IDs assigned and I need the IDs to increment like so:

the first row of form fields have the names of org1a, org2a, org3a, org4a, org5a, org6a

when the "add" link is clicked, a new row of form fields are added, and they should have the names of org1b, org2b, org3b, org4b, org5b, org6b

and I need it to go up to 14 additional rows (15 in all), with each field in the new rows incrementing the name.

Lastly, I would like to be able to have a "-" (minus sign) link next to the last row of the added rows that allows for the last row to be deleted. If the last row is deleted, then the minus would appear on the previous "last" row. I can't get the logic to work on the minus/remove link. I would also be fine with all additional rows having a minus next to them, but I think the first version is nicer.

Here is what I have so far:

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<LINK rel=stylesheet type=text/css href="main.css">
<title>blah</title>
<script type="text/javascript">
function addRowToTable()
{
  var tbl = document.getElementById('tblAddress');
  var lastRow = tbl.rows.length;
  // if there's no header row in the table, then iteration = lastRow + 1
  var iteration = lastRow;
  //  var iteration = lastRow + 1;
  var row = tbl.insertRow(lastRow);
 
  //  cell 0
  var cell0 = row.insertCell(0);
  var el = document.createElement('input');
  el.type = 'text';
  el.NAME = 'org1';
  el.size = 8;
  cell0.appendChild(el);
 
  //  cell 1
  var cell1 = row.insertCell(1);
  var el = document.createElement('input');
  el.type = 'text';
  el.NAME = 'org2';
  el.size = 4;
  cell1.appendChild(el);
 
  //  cell 2
  var cell2 = row.insertCell(2);
  var el = document.createElement('input');
  el.type = 'text';
  el.NAME = 'org3';
  el.size = 4;
  cell2.appendChild(el);
 
  //  cell 3
  var cell3 = row.insertCell(3);
  var el = document.createElement('input');
  el.type = 'text';
  el.NAME = 'org4';
  el.size = 4;
  cell3.appendChild(el);
  
  //  cell 4
  var cell3 = row.insertCell(4);
  var el = document.createElement('input');
  el.type = 'text';
  el.NAME = 'org5';
  el.size = 4;
  cell3.appendChild(el);
  
  //cell 5
  var cell3 = row.insertCell(5);
  var el = document.createElement('input');
  el.type = 'text';
  el.NAME = 'org6';
  el.size = 9;
  cell3.appendChild(el);
}
</script>
</head>
 
<body>
<form action="blah.php" name="h" method="post">
  <table class="tblHeader" id="tblAddress">
                <tr>
                  <td class="txtBase">Dept ID</td>
                  <td class="txtBase"><p>Acct-Prime<br />
                  /Sub</p></td>
                  <td class="txtBase">ExpCode</td>
                  <td class="txtBase">Prj Code</td>
                  <td class="txtBase">Loc</td>
                  <td class="txtBase">Acct</td>
                </tr>
               <tr>
                  <td><input name="org1a" type="text" size="8" maxlength="8" id="org1a" /></td>
                  <td><input name="org2a" type="text" size="4" maxlength="4" id="org2a" /></td>
                  <td><input name="org3a" type="text" size="4" maxlength="4" id="org3a" /></td>
                  <td><input name="org4a" type="text" size="4" maxlength="4"id="org4a" /></td>
                  <td><input name="org5a" type="text" size="4" maxlength="4" id="org5a" /></td>
                  <td><input name="org6a" type="text" size="9" maxlength="9" id="org6a" /></td>
    </tr>
</table>
 <p>
  <a href="#" onClick="addRowToTable();">add+</a>
  </p>
 <p><br />
   <input type="submit" name="Submit" value="Submit">
 </p>
</form>
 
 
</body>
</html>

Thanks if anyone can assist.

MC

**jscheuer1** · 08-12-2010, 06:01 PM

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<LINK rel=stylesheet type=text/css href="main.css">
<title>blah</title>
<script type="text/javascript">
function addRowToTable(){
	if(addRowToTable.rowNum >= 15){
		return;
	}
	var tbl = document.getElementById('tblAddress'),
	row = tbl.rows[1].cloneNode(true), inputs, i = 0,
	character = String.fromCharCode(addRowToTable.charNum + (addRowToTable.rowNum++));
	tbl.rows[1].parentNode.appendChild(row);
	inputs = row.getElementsByTagName('input');
	for(i; i < inputs.length; ++i){
		inputs[i].name = inputs[i].name.replace(addRowToTable.re, character);
		inputs[i].id = inputs[i].id.replace(addRowToTable.re, character);
	}
	showRemove();
}
addRowToTable.charNum = 'a'.charCodeAt(0);
addRowToTable.rowNum = 1;
addRowToTable.re = /a$/;
function removeRow(){
	var row = document.getElementById('tblAddress').rows;
	row = row[row.length - 1];
	row.parentNode.removeChild(row);
	showRemove();
	--addRowToTable.rowNum;
}
function showRemove(){
	var removes = document.getElementById('tblAddress').getElementsByTagName('a'), r = removes.length, i = 1;
	for(i; i < r; ++i){
	  	removes[i].style.visibility = i === r - 1? 'visible' : 'hidden';
	}
}
</script>
</head>
 
<body>
<form action="blah.php" name="h" method="post">
  <table class="tblHeader" id="tblAddress">
                <tr>
                  <td class="txtBase">Dept ID</td>
                  <td class="txtBase"><p>Acct-Prime<br />
                  /Sub</p></td>
                  <td class="txtBase">ExpCode</td>
                  <td class="txtBase">Prj Code</td>
                  <td class="txtBase">Loc</td>
                  <td class="txtBase">Acct</td>
                  <td class="txtBase">&nbsp;</td>
                </tr>
               <tr>
                  <td><input name="org1a" type="text" size="8" maxlength="8" id="org1a" /></td>
                  <td><input name="org2a" type="text" size="4" maxlength="4" id="org2a" /></td>
                  <td><input name="org3a" type="text" size="4" maxlength="4" id="org3a" /></td>
                  <td><input name="org4a" type="text" size="4" maxlength="4"id="org4a" /></td>
                  <td><input name="org5a" type="text" size="4" maxlength="4" id="org5a" /></td>
                  <td><input name="org6a" type="text" size="9" maxlength="9" id="org6a" /></td>
                  <td><a style="visibility: hidden;" href="#" onclick="removeRow(); return false;">minus-</a></td>
    </tr>
</table>
 <p>
  <a href="#" onClick="addRowToTable(); return false;">add+</a>
  </p>
 <p><br />
   <input type="submit" name="Submit" value="Submit">
 </p>
</form>
 
 
</body>
</html>

**jscheuer1** · 08-12-2010, 07:23 PM

I came up with this slightly enhanced removeRow function:

Code:

function removeRow(){
	var row = document.getElementById('tblAddress').rows, cells, i, child;
	row = row[row.length - 1];
	cells = row.cells;
	i = cells.length - 1;
	row.getElementsByTagName('a')[0].onclick = null;
	for (i; i > -1; --i){
		while(cells[i].firstChild){
			child = cells[i].removeChild(cells[i].firstChild);
		}
	}
	while(row.firstChild){
		child = row.removeChild(row.firstChild);
	}
	child = row.parentNode.removeChild(row);
	child = null;
	showRemove();
	--addRowToTable.rowNum;
}

It does a more thorough job, which can be important in some browsers to prevent escalating memory usage.