Jump to:

23367 Posts in 18143 Topics by 2863 members

General Questions

SilverStripe Forums » General Questions » OnClick Radio Button

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

Page: 1
Go to End
Author Topic: 2679 Views
  • Briohny
    Avatar
    Community Member
    199 Posts

    OnClick Radio Button Link to this post

    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>

  • Briohny
    Avatar
    Community Member
    199 Posts

    Re: OnClick Radio Button Link to this post

    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?

  • Briohny
    Avatar
    Community Member
    199 Posts

    Re: OnClick Radio Button Link to this post

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

    2679 Views
Page: 1
Go to Top

Want to know more about the company that brought you SilverStripe? Then check out SilverStripe.com

Comments on this website? Please give feedback.