PDA

View Full Version : Dynamic Content - Quick Script



Reion
02-28-2007, 03:31 PM
All i need is a script to check a set of radio buttons and show content depending on what one is currently selected.

Sounds Easy and i hope some one has or could make a script.
:) :)

Thanks Alot

Blake
02-28-2007, 07:48 PM
Could you be a little more specific? Do you want the radio buttons and the content that changes to be on the same page? Or do you want the radio buttons in a form, where the content is displayed after the form is submitted? Also, does your server support php?

Reion
02-28-2007, 07:53 PM
Woops my bad,
i want it to be able to show it on the same page without submitting the form.
And yes my server support php.
Thanks

Blake
02-28-2007, 08:11 PM
Here's one way of doing it.



<html>
<head>
<title>radio button example</title>
</head>
<body>

<?php

$numChoices = 6;
$choices = array(6);
$choices[0] = "choice 0";
$choices[1] = "choice 1";
$choices[2] = "choice 2";
$choices[3] = "choice 3";
$choices[4] = "choice 4";
$choices[5] = "choice 5";

echo '<form name="form1" action="' . $_SERVER['PHP_SELF'] . '" method="post">';

$op = isset($_REQUEST['choice']) ? $_REQUEST['choice'] : "0";

for ($i=0; $i<$numChoices; $i++)
{
echo '<input type="radio" name="choice" value="' . $i . '"';
if ((int)$op == $i) echo ' checked';
echo ' onchange="document.form1.submit()"> ';
echo $choices[$i] . "<br>\r\n";
}

echo '</form>';

switch ($op)
{
case "0": echo 'You chose 0'; break;
case "1": echo 'You chose 1'; break;
case "2": echo 'You chose 2'; break;
case "3": echo 'You chose 3'; break;
case "4": echo 'You chose 4'; break;
case "5": echo 'You chose 5'; break;
}

?>

</body>
</html>

BLiZZaRD
02-28-2007, 08:38 PM
There is also the Chained Selection (http://www.dynamicdrive.com/dynamicindex16/chainedselects/index.htm)

It's not radio buttons, but can be adapted to do so.

(nice looking script Blake, you just whip that up?)

Blake
02-28-2007, 08:41 PM
There is also the Chained Selection (http://www.dynamicdrive.com/dynamicindex16/chainedselects/index.htm)

It's not radio buttons, but can be adapted to do so.

(nice looking script Blake, you just whip that up?)

Thanks. Yep, I just wrote it.

djr33
02-28-2007, 09:31 PM
It isn't really dynamic... just automatically submitting the form.
He said without submitting.

However, the need depends on other variables, since now this might work in that the user does not need to click submit, if that's all that was desired.

To load this into an existing page as part of the page, it would be more difficult.

Seems like this might be more suited for ajax. Though, if possible to avoid ajax, it makes sense. I'm still not quite sure what is needed.

Blake
02-28-2007, 11:02 PM
It isn't really dynamic... just automatically submitting the form.
He said without submitting.

However, the need depends on other variables, since now this might work in that the user does not need to click submit, if that's all that was desired.

To load this into an existing page as part of the page, it would be more difficult.

Seems like this might be more suited for ajax. Though, if possible to avoid ajax, it makes sense. I'm still not quite sure what is needed.

If it's really important that the content be truly dynamic, I would put the content to change in an iframe, and just change the source to point to one of several files when a button is clicked. Trying to change the html of the whole page would be a nightmare, I think.

I could come up with a script that does that, Reion, if that's what you want.

djr33
02-28-2007, 11:33 PM
Ajax changing the contents of a div is a very standard practice.
I don't really know how to do it, but I've seen it plenty.

Twey
02-28-2007, 11:37 PM
My script here (http://www.twey.co.uk/?q=forms) can do it, although it would be better off not using <label> -- I should probably modify it at some point. Blake's idea is the best, though.
echo ' onchange="document.form1.submit()"> ';Don't access it as document.form1, access it as document.forms['form1']. The former is rather non-standard.
if ((int)$op == $i)If you're going to type-cast manually, you might as well take advantage of it by using === :)

Blake
02-28-2007, 11:59 PM
I wrote a script that uses iframes. Here's the code:



<html>
<head>

<style type="text/css">

body
{
margin-left: 0px;
margin-right: 0px;
}
iframe
{
position: absolute;
top: 20&#37;;
left: 0px;
border: none;
margin-left: 0px;
margin-right: 0px;
width: 100%;
height: 80%;
z-index: 0;
}
.content
{
position: absolute;
left: 0px;
top: 0px;
width: 100%;
height: 20%
background: #FFF;
z-index: 1;
}
</style>

<title>radio button demo II</title>

<script type="text/javascript">

var pages = new Array(3);

pages[0] = "http://www.dynamicdrive.com";
pages[1] = "http://www.google.com";
pages[2] = "http://www.blake-foster.com";

function setContent(i)
{
document.getElementById("frame").src = pages[i];
}
</script>

</head>
<body>
<div class="content">
<form>
<input type="radio" name="choice" onclick="setContent(0)" checked> Option 1<br>
<input type="radio" name="choice" onclick="setContent(1)"> Option 2<br>
<input type="radio" name="choice" onclick="setContent(2)"> Option 3<br>
</form>
</div>
<iframe src="http://www.dynamicdrive.com" id="frame"></iframe>
</body>
</html>


To see it in action, go to http://www.blake-foster.com/demo/radio.html

Reion
03-01-2007, 03:52 PM
Thanks for the scripts you lot ill think ill go with one of blakes, see how they work out.

Thanks
:)

Blake
03-01-2007, 07:11 PM
Here's a slightly improved version of the iframe script:



<html>
<head>

<style type="text/css">

body
{
margin: 150px 0px 0px 0px;
overflow: hidden;
}

iframe
{
border: none;
margin-left: 0px;
margin-right: 0px;
width: 100%;
height: 100%;
z-index: 0;
}

.content
{
position: absolute;
left: 0px;
top: 0px;
width: 100%;
height: 150px;
background: #FFF;
z-index: 1;
}
</style>

<title>radio button demo II</title>

<script type="text/javascript">

var pages = new Array(3);

pages[0] = "http://www.dynamicdrive.com";
pages[1] = "http://www.google.com";
pages[2] = "http://www.blake-foster.com";

function setContent(i)
{
document.getElementById("frame").src = pages[i];
}
</script>

</head>
<body>
<div class="content">
<form>
<input type="radio" name="choice" onclick="setContent(0)" checked> Option 1<br>
<input type="radio" name="choice" onclick="setContent(1)"> Option 2<br>
<input type="radio" name="choice" onclick="setContent(2)"> Option 3<br>
</form>
</div>
<iframe src="http://www.dynamicdrive.com" id="frame"></iframe>
</body>
</html>

mburt
03-01-2007, 07:14 PM
Just for a bit more flexibility use the "location" argument to set the iframe's page src:

<html>
<head>

<style type="text/css">

body
{
margin-left: 0px;
margin-right: 0px;
}
iframe
{
position: absolute;
top: 20&#37;;
left: 0px;
border: none;
margin-left: 0px;
margin-right: 0px;
width: 100%;
height: 80%;
z-index: 0;
}
.content
{
position: absolute;
left: 0px;
top: 0px;
width: 100%;
height: 20%
background: #FFF;
z-index: 1;
}
</style>

<title>radio button demo II</title>

<script type="text/javascript">

function setContent(location)
{
document.getElementById("frame").src = location;
}
</script>

</head>
<body>
<div class="content">
<form>
<input type="radio" name="choice" onclick="setContent('http://www.dynamicdrive.com')" checked> Option 1<br>

<input type="radio" name="choice" onclick="setContent('http://www.google.com')"> Option 2<br>
<input type="radio" name="choice" onclick="setContent('http://www.blake-foster.com')"> Option 3<br>
</form>
</div>
<iframe src="http://www.dynamicdrive.com" id="frame"></iframe>
</body>
</html>

mburt
03-01-2007, 07:15 PM
Sorry Blake, cross-post.

Blake
03-01-2007, 07:21 PM
Sorry Blake, cross-post.

You made different changes than I did. Here it is again with both your changes and mine incorporated.



<html>
<head>

<style type="text/css">

body
{
margin: 150px 0px 0px 0px;
overflow: hidden;
}

iframe
{
border: none;
margin-left: 0px;
margin-right: 0px;
width: 100%;
height: 100%;
z-index: 0;
}

.content
{
position: absolute;
left: 0px;
top: 0px;
width: 100%;
height: 150px;
background: #FFF;
z-index: 1;
}
</style>

<title>radio button demo II</title>

<script type="text/javascript">

function setContent(location)
{
document.getElementById("frame").src = location;
}
</script>

</head>
<body>
<div class="content">
<form>
<input type="radio" name="choice" onclick="setContent('http://www.dynamicdrive.com')" checked> Option 1<br>
<input type="radio" name="choice" onclick="setContent('http://www.google.com')"> Option 2<br>
<input type="radio" name="choice" onclick="setContent('http://www.blake-foster.com')"> Option 3<br>
</form>
</div>
<iframe src="http://www.dynamicdrive.com" id="frame"></iframe>
</body>
</html>

garzonetto
08-13-2007, 01:31 AM
That is nice efficient code. It works great in IE. Unfortunately, I cannot get it to work in Firefox. Any suggestions.

Thanks.