4 {{ upvoteCount | shortNum }}
4 {{ upvoteCount | shortNum }}

How do I make dynamic content with radio button

by crecemedia
2 replies
Hi all,

Thanks for reviewing the thread.

I would like to add some dynamic content in my website using radio buttons. Does anyone know where can I get a similar script somewhere on the web or maybe something you have used?

---

This is what I want to do in a simple example:

I would like for my visitor to select Option A or Option B. When he selects the Option A he would have the HTML content for Option A.

[•] Option A
[ ] Option B

Content when Option A (standard) is selected

But by selecting Option B he would have a different content displayed
[ ] Option A
[•] Option B

Content when Option B is selected
----

Anyone have any experience in doing this? I know a bit about HTML but have never worked with radio buttons, so any help will be great!

If I cant find help here I will outsource it and would be glad to share it but if anyone knows it would be great.

Cheers!
Francisco




#button #content #dynamic #make #radio
  • Profile picture of the author mywebwork
    Hi Francisco

    There are a number of ways to accomplish this, the majority of them involve the use of JavaScript.

    Essentially every time you click a radio button you raise an "event". The event can be then used to trigger a JavaScript program - in your case the event would run a script that loads another page.

    A slightly more sophisticated method would be to use AJAX - again JavaScript is used to trigger an event, but this time the event would cause content to dynamically load without needing to refresh your web page. This is the basis of a lot of "Web 2.0" designs - and personally it's that way I would probably build it.

    Let me know if you need any help with this.

    Bill
    {{ DiscussionBoard.errors[1337494].message }}
  • Profile picture of the author Binggo
    This is not ajax, but it'll work.


    HTML Code:
    <script type="text/javascript">
window.onload=function(){
    var oContent = document.getElementById("content");
    var oVall = [oContent.innerHTML,"Best Game Cheats trainercheats.net/tag/cheats"];
    var oRadio=document.getElementsByTagName("input");
    for(i=0;i<oRadio.length;i++){
        oRadio[i].content = oVall[i];
        oRadio[i].onclick=function(){
            if(this.checked){
                oContent.innerHTML = this.content;
            }
        }
    }
}
</script>
</head>
<body>
<input type="radio" name="option" value="Option A" checked>Option A
<br/>
<input type="radio" name="option" value="Option B"/>Option B
<div id="content" style="border:1px solid #eee;padding:5px;">
Best Game Trainer trainercheats.net/tag/games-trainer
</div>
    {{ DiscussionBoard.errors[1345037].message }}

Trending Topics