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


Reply

3 Posts   2717 Views

Avatar
Briohny

25 February 2009 at 4:34am (Last edited: 25 February 2009 1:09pm), Community Member, 199 Posts

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";
}
</script>

<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>

Avatar
Briohny

25 February 2009 at 9:13am (Last edited: 25 February 2009 1:11pm), Community Member, 199 Posts

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"; }
}
</script>

with

<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?

Avatar
Briohny

25 February 2009 at 1:12pm Community Member, 199 Posts

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