PDA

Click to See Complete Forum and Search --> : simple? show hide question

LuigiX
10-05-2003, 11:06 PM
Hi

I am building a form for the company intranet - IE only.

I have 2 radio buttons - R1 and R2 - and 2 tables.

When the page opens the tables should be invisible. Clicking R1 should make table 1 visible. Clicking R1 a second time, should leave table 1 visible.

Clicking R2 should hide table 1 and make table 2 visible. Any data entered into fields in table 1 should be cleared and not sent with the from data on submit.

I have not ben able to find show-hide code to do this.

Help appreciated

Cheers

Luigi
Khalid Ali
10-06-2003, 12:22 AM
the following working example should do it..


<script type="text/javascript">
<!--
function Process(btn){
if(btn=="R1"){
var tR1 = document.getElementById("tableR1");
tR1.style.display="block";
document.getElementById("tableR2").style.display="none";
}else if (btn=="R2"){
var tR2 = document.getElementById("tableR2");
tR2.style.display="block";
document.getElementById("tableR1").style.display="none";
}
}
//-->
</script>
</head>
<body class="body">
<form id="form1" action="" onsubmit="">
<input type="button" value="R1" onclick="Process(this.value);"/>&nbsp;&nbsp;
<input type="button" value="R2" onclick="Process(this.value);"/>
</form><br/>

<table id="tableR1" style="display:none;" cellspacing="2" cellpadding="2" border="1">
<tr>
<td>tableR1 - Row1-Cell1</td>
<td>tableR1 - Row1-Cell2</td>
</tr>
<tr>
<td>tableR1 - Row2-Cell1</td>
<td>tableR1 - Row2-Cell2</td>
</tr>
</table>
<table id="tableR2" style="display:none;" cellspacing="2" cellpadding="2" border="1">
<tr>
<td>tableR2 - Row1-Cell1</td>
<td>tableR2 - Row1-Cell2</td>
</tr>
<tr>
<td>tableR2 - Row2-Cell1</td>
<td>tableR2 - Row2-Cell2</td>
</tr>
</table>
LuigiX
10-06-2003, 04:18 AM
Hi Khalid

Many thanks for this. I'll try to adapt it to my situation tomorrow but it looks great.

I suspect the next problem I'll come up against is clearing data that might have been entered in a text box in one table before the user clicks on another table (thus hiding the first) and completes the text fields in the second table before sending the form by email. I guess simply hiding the table (and text fields within the table) doesnt stop them being sent with the form.

How do I ensure only data from the visible fields is sent?

Many thanks for your help. I'm new to this as you can see.

Cheers

Luigi
Khalid Ali
10-06-2003, 09:31 AM
a simpler and less complicated approach for you might be to have t2 forms with diferent names in each table,that way when you submit a form the browser will set the controls to be sucessfull only for this form.
LuigiX
10-06-2003, 01:03 PM
Hi Khalid

I thought about using multiple forms but I would have the same problem. Because within each form there would also be individual text fields that may or may not be shown depending whether the user checks a checkbox.

I need to clear each of these fields if the user clears the checkbox (and the fields become hidden again).

Do you have any code that I could adapt to this situation?

Thanks for your help

Cheers

Luigi