How do I make dynamic content with radio button

crecemedia · 10-31-2009, 09:34 AM

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

mywebwork · 10-31-2009, 03:27 PM

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

Binggo · 11-03-2009, 01:19 AM

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>

10-31-2009, 09:34 AM	#1
crecemedia Francisco Guerrero War Room Member Join Date: Sep 2009 Location: San Juan, PR Posts: 68 Thanks: 11 Thanked 11 Times in 11 Posts Contact Info	How do I make dynamic content with radio button 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

10-31-2009, 03:27 PM	#2
mywebwork Senior Warrior Member War Room Member Join Date: Sep 2008 Location: Honolulu, Hawaii, USA & Montreal Canada Posts: 2,218 Blog Entries: 1 Thanks: 759 Thanked 724 Times in 505 Posts	Re: How do I make dynamic content with radio button 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

11-03-2009, 01:19 AM	#3
Binggo Warrior Member Join Date: Nov 2009 Posts: 12 Thanks: 0 Thanked 2 Times in 2 Posts Social Networking	Re: How do I make dynamic content with radio button 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>