I'm using some javascript that has been pieced together from several different resources to add additional fields to a form as needed. These fields can also be taken away. The problem I'm having is when fields have been removed from the list and then are added back.
See example:
http://blasterstudios.com/dev/crossroads/
Ideally, I'd like my [+] function (addParent) to first, check to see if there are any hidden <tr> tags on the page. If so, I want them to unhide, one at a time, in order of number. In this case, they'll already be on the page in the right order, so the first one it comes to will be the one it needs to unhide. It should continue to do this until all hidden rows are unhidden. Then if there are no more hidden rows on the page, then it needs to add a new row.
As you can see in the example, it stops unhiding rows after 1 row and it won't add anymore.
If you do not want to look at the source of the page above, here's the code:
javascript
:
function removeParent(id,show){
if (el = document.getElementById(id)) {
if (null==show) show = el.style.display=='none';
el.style.display = (show ? '' : 'none');
}
}
var x = 2;
var rowArray = new Array();
var allrows = document.getElementsByTagName("tr");
function getParentId(){
for (var i = 0; i < allrows.length; i++) {
if (allrows[i].getAttribute('id') != null && allrows[i].getAttribute('id').match('parentRow'+'*')) {
var rowid = allrows[i].getAttribute('id');
if(document.getElementById(rowid).style.display == 'none'){
rowArray[rowArray.length] = rowid;
}
}
}
}
function addParent () {
getParentId();
if(rowArray.length != 0){
if (el = document.getElementById(rowArray[0])) {
var show = "1";
if (null==show) show = el.style.display=='none';
el.style.display = (show ? '' : 'none');
}
} else {
var theTable = document.getElementById('parentTable');
var newtr=document.createElement('tr');
newtr.id = "parentRow" + x;
var newtd1 = document.createElement('td');
newtd1.align = 'right';
newtd1.innerHTML ='\nParent/Guardian '+x+': <input name="parentName'+x+'" type="text" id="parentName'+x+'" style="width:220px;" /> Relationship:\n<select name="parentTitle'+x+'" id="parentTitle'+x+'">\n<option selected="selected" disabled="disabled">-- Choose One --</option>\n<option value="Mother">Mother</option>\n<option value="Father">Father</option>\n<option value="Legal Guardian">Legal Guardian</option>\n<option value="Step-Mother">Step-Mother</option>\n<option value="Step-Father">Step-Father</option>\n<option value="Grandmother">Grandmother</option>\n<option value="Grandfather">Grandfather</option>\n</select>';
var newtd2=document.createElement('td');
newtd2.innerHTML = '\n<a onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage(\'Image'+x+'\',\'\',\'img/minus_over.jpg\',1)" onclick="removeParent(\'parentRow'+x+'\');"><img src="img/minus.jpg" name="Image'+x+'" width="23" height="22" border="0" id="Image'+x+'" alt="Remove Parent/Guardian" title="Remove Parent/Guardian" style="margin-top:1px; cursor:pointer; margin-left:13px;" /></a>';
newtr.appendChild(newtd1);
newtr.appendChild(newtd2);
theTable.tBodies[0].appendChild(newtr);
/* show = null;
rowAarray = []; */
x++;
}
} HTML:[html]<form id="registerNew" name="registerNew" method="post" action="">
<table width="630" border="0" cellspacing="2" cellpadding="3">
<tbody>
<tr>
<td width="145" align="right" valign="middle">Your Name:</td>
<td width="436" align="left" valign="middle"><input name="parentName" type="text" id="parentName" style="width:220px;" /> Relationship:
<select id="parentTitle" name="parentTitle">
<option selected="selected" disabled="disabled">-- Choose One --</option>
<option value="Mother">Mother</option>
<option value="Father">Father</option>
<option value="Legal Guardian">Legal Guardian</option>
<option value="Step-Mother">Step-Mother</option>
<option value="Step-Father">Step-Father</option>
<option value="Grandmother">Grandmother</option>
<option value="Grandfather">Grandfather</option>
</select></td>
<td width="23" align="left" valign="middle"><a onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image','','img/plus_over.jpg',1)" onclick="addParent();"><img src="img/plus.jpg" name="Image" width="23" height="22" border="0" id="Image" alt="Add Parent/Guardian" title="Add Parent/Guardian" style="margin-top:1px; cursor:pointer;" /></a></td>
</tr>
<tr>
<td colspan="3" align="right" valign="middle">
<table id="parentTable" width="600" cellspacing="0" cellpadding="0" align="right">
<tbody align="right" style="background-color:#EEEEEE;"></tbody>
</table></td>
</tr>
<tr>
<td align="right" valign="middle"> </td>
<td align="left" valign="middle"><input type="submit" name="Submit" value="Submit Registration" style="width:180px;" /></td>
<td align="left" valign="middle"> </td>
</tr>
</tbody>
</table>
</form>[/html]