New to Java here, any help would be really nice guys.

I have two buttons to hide and show a form using java. You press + to add another group of table rows. inside a <tbody>.

The problem I have is that when you press (-) to remove the second group, it only hides the group. What I need to do is to hide and also reset (if any) values on the fields in that <tbody>.

Now it only hides the field "amount" and when you proceed the values on that field would still be there. I think it's only an extra java line on the hide function but can't figure it out.


Thanks,


<script type="text/javascript">

function hide(obj) {


var el = document.getElementById(obj);

if ( el.style.display != 'none' ) {

el.style.display = 'none';


}


function show(obj) {


var el = document.getElementById(obj);

el.style.display = '';



}

</script>

</head>

<body>


<table class="formTable">
<tr>
<td colspan="3">
<div class="subheader">Please enter your Billing details below</div>
</td>
</tr>

<tbody id="1">
<tr>
<td class="fieldLabel">&nbsp;</td>
<td colspan="2" class="fieldData">&nbsp;</td>
</tr>
<tr>
<td class="fieldLabel"><span class="subheader">Child details</span></td>
<td colspan="2" class="fieldData">&nbsp;</td>
</tr>
<tr>
<td class="fieldLabel"><span class="warning">*</span>Child's Account Code: </td>
<td colspan="2" class="fieldData"><input name="Child1Account" type="text" maxlength="20" value="<? echo htmlentities($strChild1Account) ?>" style="width: 200px;"></td>
</tr>
<tr>
<td class="fieldLabel"><span class="warning">*</span>Forename:</td>
<td colspan="2" class="fieldData"><input name="Child1Firstnames" type="text" maxlength="20" value="<? echo htmlentities($strChild1Firstnames) ?>" style="width: 200px;"></td>
</tr>
<tr>
<td class="fieldLabel"><span class="warning">*</span>Surname:</td>
<td colspan="2" class="fieldData"><input name="Child1Surname" type="text" maxlength="20" value="<? echo htmlentities($strChild1Surname) ?>" style="width: 200px;"></td>
</tr>
<tr>
<td class="fieldLabel"><span class="warning">*</span>Amount: </td>
<td colspan="2" class="fieldData"><input name="Child1Amount" type="text" maxlength="20" value="<? echo htmlentities($strChild1Amount) ?>" style="width: 200px;"></td>

</tr>
</tbody>
<tr>
<td class="fieldLabel">&nbsp;</td>
<td width="20"><input name="show2" type="button" value="+ child2" onClick="show('2')"></td>

</tr>



<tbody id="2" style="display: none;">
<tr>
<td class="fieldLabel"><span class="subheader">Child 2 details </span></td>
<td colspan="2" class="fieldData">&nbsp;</td>
</tr>
<tr>
<td class="fieldLabel"><span class="warning">*</span>Child's Account Code: </td>
<td colspan="2" class="fieldData"><input name="Child2Account" type="text" maxlength="20" value="<? echo htmlentities($strChild2Account) ?>" style="width: 200px;"></td>
</tr>
<tr>
<td class="fieldLabel"><span class="warning">*</span>Forename:</td>
<td colspan="2" class="fieldData"><input name="Child2Firstnames" type="text" maxlength="20" value="<? echo htmlentities($strChild2Firstnames) ?>" style="width: 200px;"></td>
</tr>
<tr>
<td class="fieldLabel"><span class="warning">*</span>Surname:</td>
<td colspan="2" class="fieldData"><input name="Child2Surname" type="text" maxlength="20" value="<? echo htmlentities($strChild2Surname) ?>" style="width: 200px;"></td>
</tr>
<tr>
<td class="fieldLabel"><span class="warning">*</span>Amount: </td>
<td colspan="2" class="fieldData"><input name="Child2Amount" type="text" maxlength="20" value="<? echo htmlentities($strChild2Amount) ?>" style="width: 200px;"></td>
</tr>

<tr>
<td class="fieldLabel">&nbsp;</td>
<td><input name="hide2" type="button" value="- child2" onClick="hide('2')"></td>
</tr></tbody>
<tr>
<td class="fieldLabel"><span class="subheader">Your details</span></td>
<td colspan="2" class="fieldData">&nbsp;</td>
</tr>
<tr>
</table>