Skip to main content

This site requires you to update your browser. Your browsing experience maybe affected by not having the most up to date version.

General Questions /

General questions about getting started with SilverStripe that don't fit in any of the categories above.

Moderators: martimiz, Sean, biapar, Willr, Ingo, swaiba, simon_w

OnClick Radio Button


3 Posts   2788 Views


Community Member, 199 Posts

25 February 2009 at 4:34am

Edited: 25/02/2009 1:09pm

Hi, Could someone please tell me how i would go about adding this code to a ss site. I've tried a few different things but can't seem to get it to work. Any help would be greatly appreciated.

<style type="text/css"> #Div1, #Div2, #Div3 { display: none; } </style>

<script type="text/javascript">
function Toggle(theDiv) {
document.getElementById("Div1").style.display = "none";
document.getElementById("Div2").style.display = "none";
document.getElementById("Div3").style.display = "none";
document.getElementById(theDiv).style.display = "block";

<input type="radio" name="ToggleDivs" onclick="Toggle('Div1');" >Turn on Div 1<br >
<input type="radio" name="ToggleDivs" onclick="Toggle('Div2');" >Turn on Div 2<br >
<input type="radio" name="ToggleDivs" onclick="Toggle('Div3');" >Turn on Div 3<br >
<div id="Div1">I am the content of Div 1</div>
<div id="Div2">I am the content of Div 2</div>
<div id="Div3">I am the content of Div 3</div>


Community Member, 199 Posts

25 February 2009 at 9:13am

Edited: 25/02/2009 1:11pm

Basically the problem is that SS strips the 'onclick' function. So i've used the following code to try and get around that:

<script type="text/javascript">
window.onload = function () {
document.getElementById('ToggleDivs').onclick = function () { document.getElementById("Div1").style.display = "block"; }
document.getElementById('ToggleDivs').onclick = function () { document.getElementById("Div2").style.display = "block"; }


<input name="ToggleDivs" type="radio" >Toggle1
<input name="ToggleDivs" type="radio" >Toggle2

<div id="Div1">Toggle1 Result</div>
<div id="Div2">Toggle2 Result</div>

It works for the first Toggle but i can't get it working so that when the 2nd Toggle is selected the 1st disappears and the 2nd result is posted instead.

Any ideas please?


Community Member, 199 Posts

25 February 2009 at 1:12pm

Or is there just a way to enable the 'onclick' function so that it is not stripped in the CMS??