Ok so here's a part of the php file I'm using. There's already a toggle_it() function to show/hide rows, tables, anything. But now what I want to do is when the user clicks the link "add more", I want to show the hidden row AND hide that "add more" link. How can I do this?
<html>
<head>
<script language="javascript">
function toggle_it(itemID){
if ((document.getElementById(itemID).style.display == 'none'))
{document.getElementById(itemID).style.display = 'inline';}
else {document.getElementById(itemID).style.display = 'none';}
}
</script>
</head>
<center>
<table align="center">
<form method="post" action="something.php" name=sel>
<table>
<tr><td align="left">Product:</td><td colspan="2" align="left">Version:</td></tr>
<tr><td><font id=product><select>
<option value='0'>No Value</option>
</select></font></td>
<td><input type="text" name="version" size="20"></td>
<td id="add" style="display:inline;">
<a onmouseover="this.style.cursor='pointer'" onClick="toggle_it('addanother')">[U][B]Add more[/B][/U]</a></td>
</tr>
</table>
<table>
<tr id="addanother" style="display:none;">
<td><font id=product1><select>
<option value='0'>No Value</option>
</select></font></td>
<td><input type="text" name="version1" size="20">
<a onmouseover="this.style.cursor='pointer'" onClick="toggle_it('addanother1')">[U][B]Add more[/B][/U]</a></td>
</tr>
</table>
<table>
<tr id="addanother1" style="display:none;">
<td><font id=product2><select>
<option value='0'>No Value</option>
</select></font></td>
<td><input type="text" name="version2" size="20"></td>
</tr>
</table>
<table>
<tr>
<td colspan="2"><p align="center"><input type="submit" name="submit" value="Enter Record(s)"></p>
</td></tr>
</form>
</table>
</table>
</center>
</body>
</html>