set form parts invisible

set form parts invisible

I have one form with input fields. After the first part there are 2
buttons (external, internal) the external redirects you somewhere else the
internal button should show (set visible) more input fields.
like
<form action="servlet_link" method="post">
<table class="ui-widget">
<colgroup width="350" span="2"></colgroup>
<tbody>
<tr>
<td>
<p class="form">
Familyname
</p><td>
<input class="ui-widget-content ui-state-default
ui-corner-all" name="familyname" type="text"">
</td>
</tr>
<tr>
<td>
<p class="form">
Givenname
</p></td>
<td>
<input class="ui-widget-content ui-state-default
ui-corner-all" name="ustid" type="text">
</td>
</tr>
</tbody>
</table>
<div class="center">
<!-- Buttons -->
<table align="center">
<tr>
<td>
<!-- sends data post and redirects u -->
<a href="javascript:document.forms[0].submit()"
class="btn" name="extern">External</a>
</td>
<td>
<!-- shows more input fields and sets both buttons
invisible -->
<a href="???" class="btn" name="intern" >Internal</a>
</td>
</tr>
</table>
</div>
<!-- part 2 should be shown -->
<table class="ui-widget">
<colgroup width="350" span="2"></colgroup>
<tbody>
<tr>
<td>
<p class="form">
Companyname
</p><td>
<input class="ui-widget-content ui-state-default
ui-corner-all" name="companyname" type="text"">
</td>
</tr>
<tr>
<td>
<p class="form">
address
</p></td>
<td>
<input class="ui-widget-content ui-state-default
ui-corner-all" name="address" type="text">
</td>
</tr>
</tbody>
</table>
<div class="center">
<!-- Buttons -->
<table align="center">
<tr>
<td>
<!-- sends data post and redirects u -->
<a href="javascript:document.forms[0].submit()"
class="btn" name="extern">External</a>
</td>
</tr>
</table>
</div>
</form>
Do i have to give all elements a id tag and set it invisible through:
JS:
function invisbleForm() {
document.getElementById("companynameText").style.display
="block";
}
Is there better solution to do that ? thx for any help :)