Radio Button Choice & class="Invisible"

if the user chooses the Action radio button the Action form would appear

[scoobydoo987]

What I am wanting to happen in the code below is to change the class="Invisible" in a form to class="" depending upon what choice is made from a radio button. Upon form load the form data would not be visible but if the user chooses the Action radio button the Action form would then appear and be visible. The same goes for if View was chosen then only the view form would be visible. This doesn't seem to be working the way I have it. Does anyone know of a better way to do this? The invisible class is a CSS of display:none

<SCRIPT LANGUAGE="JavaScript">

function RadioButtonCheck() {
if (document.form.Choice.value == "Action") {
document.FormAction.class.value == ""
}
if (document.form.Choice.value == "View") {
document.FormView.class.value == ""
}
}
//
</script>



<form method="post" action="sysMenuDropdown.asp?a=a" target="_self" style="PADDING-TOP:5px" name="form" onSubmit="return RadioButtonCheck();">
<input type="radio" name="Choice" value="Action" onclick=""><label>Action</label></input>
<br></br>
<input type="radio" value="View" name="Choice" onclick=""><label>View</label></input>
</form>

<!-- Action -->

<form class="Invisible" method="post" action="sysMenuDropdown.asp" target="_self" style="PADDING-TOP:5px" name="FormAction">

<input name="postA" type="hidden" value="g"></input>

<label>Action:&#160;</label>
<select name="FKParentSecuredItemInstID" tabindex="1">
<option value="0"></option>
<xsl:call-template name="DropDownList">
<xsl:with-param name="ddlName">ActionDropdownMenusSecItems</xsl:with-param>

<xsl:with-param name="ddlSelected"><xsl:value-of select="//PAGE_SETTINGS/@selectedDropdown" /></xsl:with-param>

</xsl:call-template>
</select>&#160;
<button name="btnGetAction" type="submit" accesskey="G"><u>G</u>et</button>

</form>
<!-- -->

<!-- View -->

<form class="Invisible" method="post" action="sysMenuDropdown.asp" target="_self" style="PADDING-TOP:5px" name="FormAction">

<input name="postA" type="hidden" value="g"></input>

<label>&#160;&#160;View:&#160;</label>
<select name="FKParentSecuredItemInstID" tabindex="1">
<option value="0"></option>
<xsl:call-template name="DropDownList">
<xsl:with-param name="ddlName">ViewDropdownMenusSecItems</xsl:with-param>

<xsl:with-param name="ddlSelected"><xsl:value-of select="//PAGE_SETTINGS/@selectedDropdown" /></xsl:with-param>

</xsl:call-template>
</select>&#160;
<button name="btnGetView" type="submit" accesskey="G"><u>G</u>et</button>

</form>
<!-- -->

[RonPK]

The proper way to achieve that is probably over the DOM.

document.getElementById("formIdHere").className = "classNameHere";

I'm not sure whether className = '' is a valid idea. You may need to add a default class to your CSS, with 'display: block'.

Btw, welcome to WebmasterWorld, scoobydoo. Could you please keep your posts as short as possible, i.e. without the irrelevant bits? Thx.

[Sathallrin]

Similar to what RonPK said...
You would remove the class="invisible" and use style="display: none" instead, as javascript cant change the CSS, but can change inline CSS.
You would then have to set an ID to each such as
id="ActionForm" and id="ViewForm"

You could then use these radio buttons and javascript:

<SCRIPT LANGUAGE="JavaScript">
function RadioButtonCheck(formID) {
document.getElementByID(formID).style.display = "block";
}
</script>

<form style="PADDING-TOP:5px">
<input type="radio" name="Choice" onclick="RadioButtonCheck("ActionForm")"><label>Action</label></input>
<br></br>
<input type="radio" name="Choice" onclick="RadioButtonCheck("ViewForm")"><label>View</label></input>
</form>

This would be a cross-browser solution.