...

View Full Version : To hide the other form when a radiobutton is clicked.



azrina
07-17-2010, 06:25 PM
Hi All,

I dont know how to display a HTML form when user click on a radio button. I have two forms in a page, when user click on a radio button that correspond to its form, the other form will be hidden. I have the idea to use if...else statement. But I dont know what code to be inserted in an onClick event. I also not sure whether this is logic or not, whether this can be done or not. Pls help me how to accomplish this. I attach the sample of my code here. Thanks in advance.

<html>
<head>
<script type="text/javascript" src="funIndex.js">
</script>
</head>

<body>
<h4>CPI</h4>

<!--Choose Single or Multiple Series-->
<form name="choose" action="main.html" method="post">
<input type="radio" name="series" value="single" onClick="what code to insert here"/> Single Serie <br/>
<input type="radio" name="series" value="multiple" onClick="what code to insert here" /> Multiple Series <br/>
</form>

<!--To calculate Single Serie-->
<script type="text/javascript">
if (document.choose.name.value == "single")
{
</script>
<form name="cpi">
<table border="1">
<tr>
<td colspan="2">Single</td>
</tr>
<tr>
<td>Country</td>
<td><select name="country">
<option value="Malaysia">Malaysia</option>
<option value="Thailand">Thailand</option>
<option value="Singapore">Singapore</option>
<option value="Indonesia">Indonesia</option>
</select>
</td>
</tr>
<tr>
<td>Current</td>
<td><select name="current" >
<option value="1960">1960</option>
<option value="1961">1961</option>
<option value="1962">1962</option>
<option value="1963">1963</option>
</select>
</td>
</tr>
<tr>
<td>Base</td>
<td><select name="base">
<option value="1960">1960</option>
<option value="1961">1961</option>
<option value="1962">1962</option>
<option value="1963">1963</option>
</select>
</td>
</tr>
<tr>
<td><input type="button" value="Enter" onclick="calIndex(document.cpi.current.options.selectedIndex,document.cpi.base.options.selectedIndex)">
</td>
</tr>
<tr>
<td>Index</td>
<td><input type="text" name="idx" id="idx2" /></td>
</tr>
</table>
</form>

<!--To calculate multiple series-->
<script type="text/javascript">
}
else if (document.choose.name.value == "multiple")
{
</script>

<form name="cpi2">
<table border="1">
<tr>
<td colspan="2">Multiple</td>
</tr>
<tr>
<td>Country</td>
<td><select name="country">
<option value="Malaysia">Malaysia</option>
<option value="Thailand">Thailand</option>
<option value="Singapore">Singapore</option>
<option value="Indonesia">Indonesia</option>
</select>
</td>
</tr>
<tr>
<td>Current From</td>
<td><select name="current" >
<option value="1960">1960</option>
<option value="1961">1961</option>
<option value="1962">1962</option>
<option value="1963">1963</option>
</select>
</td>
</tr>
<tr>
<td>Current To</td>
<td><select name="current" >
<option value="1960">1960</option>
<option value="1961">1961</option>
<option value="1962">1962</option>
<option value="1963">1963</option>
</select>
</td>
</tr>
<tr>
<td>Base</td>
<td><select name="base">
<option value="1960">1960</option>
<option value="1961">1961</option>
<option value="1962">1962</option>
<option value="1963">1963</option>
</select>
</td>
</tr>
<tr>
<td><input type="button" value="Enter" >
</td>
</tr>
</table>
</form>
<script type="text/javascript">
}
</script>


</body>
</html>

Old Pedant
07-17-2010, 10:16 PM
<head>
<script type="text/javascript">
function whichForm( which )
{
document.getElementById("single").style.display = ( which == "single") ? "block" : "none";
document.getElementById("multiple").style.display = ( which == "multiple") ? "block" : "none";
}
</script>
</head>
<body>
...
<form><!-- no need for name, action, or method for this form! -->
<input type="radio" name="series" onClick="whichForm('single');"/> Single Series <br/>
<input type="radio" name="series" onClick="whichForm('multiple');" /> Multiple Series </form>
<br/>
...
<div id="single" style="display: none;">
... code for your "single" form ..
</div>
<div id="multiple" style="display: none;">
... code for your "multiple" form ..
</div>
...
</body>

azrina
08-01-2010, 11:38 PM
Thank You! It works!



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum