Change page code from radio button

markdmac · Jul 9, 2008

I am hoping someone out there can shed some light on this one for me. Here is what I am trying to do. I have a web page that has an embedded movie from youtube. I need to give the option to view one of three videos instead. So I added radio buttons and want a change in button to change the displayed video. So far I get no video displayed at all.

The site only supports HTML and JavaScript. Regretfully I cannot use ASP.Net for the job. Below is stripped down code. Can anyone tell me why the video is not displayed at all and is there a flaw in my code below? Thank you.

Code:

<HTML>

<BODY BGCOLOR=#000000 text="#FFFFFF" topmargin="0" leftmargin="0" rightmargin="0" bottommargin="0" link="#990000" vlink="#990000" alink="#990000">
<div align="center">
<script language="javascript">

function SetVideo()
{
  var form = document.forms.VideoMenu;
  var ChosenVideo = getSelectedValue(form.elements.PodSelect); 
  var displayCode = "<embed src='[URL unfurl="true"]http://www.youtube.com/v/I8ph8s4psyU&rel=1'[/URL] type='application/x-shockwave-flash' wmode='transparent' width='425' height='355'>";
  
  if (PodSelect = "Pod1") {
       displayCode = "<embed src='[URL unfurl="true"]http://www.youtube.com/v/I8ph8s4psyU&rel=1'[/URL] type='application/x-shockwave-flash' wmode='transparent' width='425' height='355'>";
		}
  else if (PodSelect = "Pod2") {
       displayCode = "<embed src='[URL unfurl="true"]http://www.youtube.com/watch?v=fi2g9LQAMp4'[/URL] type='application/x-shockwave-flash' wmode='transparent' width='425' height='355'>";
		}

  else if (PodSelect = "Pod3") {
       displayCode = "<embed src='[URL unfurl="true"]http://www.youtube.com/watch?v=EHvopiire70'[/URL] type='application/x-shockwave-flash' wmode='transparent' width='425' height='355'>";
		}
}

function getSelectedValue(flds) {
  var i = 0;
  var len = flds.length;
  
  while (i < len) {
    if (flds[i].checked) {
      return flds[i].value;
    }
    i++;
  }
  
  return "";
}
</script>

			<p>

			<form name="VideoMenu" method="post">
				Select a <span lang="en-us">Video to View</span>:<br>
				<span lang="en-us">1</span><input name="PodSelect" value="Pod1" type="radio" checked onchange="SetVideo()">
				<span lang="en-us">&nbsp; 2</span><input name="PodSelect" value="Pod2" type="radio" onchange="SetVideo()">
				<span lang="en-us">&nbsp; 3</span><input name="PodSelect" value="Pod3" type="radio" onchange="SetVideo()">
				<input name="DoIt" type="submit" value="Show Video" />
			</form>
			<b><span lang="en-us">Video</span></b><p>

			<object width="425" height="355">

				<param name="movie" value="[URL unfurl="true"]http://www.youtube.com/v/I8ph8s4psyU&amp;rel=1">[/URL]

				<param name="wmode" value="transparent">
				<script type="text/javascript">
					document.write(displayCode);
				</script>	
			</object>
</div>

</BODY>
</HTML>

tchatzi · Jul 9, 2008

try this

Code:

<html>
	<head>
		<script language="javascript">
			function SetVideo() {
				var radioLength = document.VideoMenu.PodSelect.length;
				for(var i = 0; i < radioLength; i++) {
					if ( document.VideoMenu.PodSelect[i].checked ==true ){
						if (document.VideoMenu.PodSelect[i].value == "Pod1") {
							document.getElementById('myvideo').src = '[URL unfurl="true"]http://www.youtube.com/v/I8ph8s4psyU&rel=1';[/URL]
						} else if (document.VideoMenu.PodSelect[i].value == "Pod2") {
							document.getElementById('myvideo').src = '[URL unfurl="true"]http://www.youtube.com/v/fi2g9LQAMp4&rel=1';[/URL]
						} else if (document.VideoMenu.PodSelect[i].value == "Pod3") {
							document.getElementById('myvideo').src = '[URL unfurl="true"]http://www.youtube.com/v/EHvopiire70&rel=1';[/URL]
						}
					}
				}
			}
		</script>
	</head>
	<body bgcolor=#000000 text="#ffffff" topmargin="0" leftmargin="0" rightmargin="0" bottommargin="0" link="#990000" vlink="#990000" alink="#990000">
		<div align="center">
			<p>
				<form name="VideoMenu" method="post">
					Select a <span lang="en-us">Video to View</span>:<br>
					<span lang="en-us">1</span><input name="PodSelect" value="Pod1" type="radio" checked onchange="SetVideo()">
					<span lang="en-us">&nbsp; 2</span><input name="PodSelect" value="Pod2" type="radio" onchange="SetVideo()">
					<span lang="en-us">&nbsp; 3</span><input name="PodSelect" value="Pod3" type="radio" onchange="SetVideo()">
				</form>
				<b><span lang="en-us">Video</span></b>
			<p>
            <object width="425" height="355">
                <param name="movie" value="[URL unfurl="true"]http://www.youtube.com/v/I8ph8s4psyU&rel=1">[/URL]
                <param name="wmode" value="transparent">
				<embed id="myvideo" src='[URL unfurl="true"]http://www.youtube.com/v/I8ph8s4psyU&rel=1'[/URL] type='application/x-shockwave-flash' wmode='transparent' width='425' height='355'>
            </object>
		</div>
	</body>
</html>

``The wise man doesn't give the right answers,
he poses the right questions.''
TIMTOWTDI

tsuji · Jul 9, 2008

[1] Replace the whole lot of object by a div, say.
[tt]
[red]/* comment all out[/red]
<object width="425" height="355">

<param name="movie" value="[ignore]

http://www.youtube.com/v/I8ph8s4psyU&rel=1

[/ignore]">

<param name="wmode" value="transparent">
<script type="text/javascript">
document.write(displayCode);
</script>
</object>
[red]*/[/red]
[blue]<div id="videoid"></div>[/blue]
[/tt]
[2] Correct the function at multiple places. And restore object tag.
[tt]
function SetVideo()
{
var form = document.forms.VideoMenu;
var ChosenVideo = getSelectedValue(form.elements.PodSelect);

[blue]var slead=' <object width="425" height="355">'+
'<param name="movie" value="[ignore]

http://www.youtube.com/v/I8ph8s4psyU&rel=1

[/ignore]">'+
'<param name="wmode" value="transparent">'
var strail='</object>';[/blue]

var displayCode = "<embed src='[ignore]

http://www.youtube.com/v/I8ph8s4psyU&rel=1

[/ignore]' type='application/x-shockwave-flash' wmode='transparent' width='425' height='355'>";

if ([red]ChosenVideo =[/red]= "Pod1") {
displayCode = "<embed src='[ignore]

http://www.youtube.com/v/I8ph8s4psyU&rel=1

[/ignore]' type='application/x-shockwave-flash' wmode='transparent' width='425' height='355'>"[/ignore];
}
else if ([red]ChosenVideo =[/red]= "Pod2") {
displayCode = "<embed src='[ignore]

http://www.youtube.com/watch?v=fi2g9LQAMp4

[/ignore]' type='application/x-shockwave-flash' wmode='transparent' width='425' height='355'>";
}

else if ([red]ChosenVideo =[/red]= "Pod3") {
displayCode = "<embed src='[ignore]

http://www.youtube.com/watch?v=EHvopiire70

[/ignore]' type='application/x-shockwave-flash' wmode='transparent' width='425' height='355'>";
}

[blue]displayCode=slead+displayCode+strail;
document.getElementById("videoid").innerHTML=displayCode;[/blue]

}
[/tt]
[3] The rest can still have minor issues, with onchange rather than onclick etc. But, I find working with this kind of script alignment is unwise. What kind of editor produce that?!!

tsuji · Jul 9, 2008

Amendment
[1'] Rather than javascript-style comment
/* comment all out
...
*/
I should say
[tt] [/tt]

markdmac · Jul 9, 2008

Thanks for responding guys. I've tried both suggestions and neither seems to get me to where I need to be. I've inherited some messy code and regretfully I am not well versed in how embedded links work etc.

Currently only the first link is displayed inline. I want the radio buttons to change what is shown but that does not seem to do the trick.

PHV, I also tried adding an onclick as you suggested but that too did not change the video displayed. Is what I am trying to do possible? Do I need to some how do a postback to get the page to reload with the selected video?

Since implementing this code I also now am getting prompted to allow ActiveX to run. Is there any way to avoid that?

This code will be used on a web site for a children's book author. The kids won't know what an ActiveX control is or to allow it.

Your help and guidance is greatly appreciated.

I hope you find this post helpful.

Regards,

Mark

Check out my scripting solutions at

http://www.thespidersparlor.com/vbscript

Work SMARTER not HARDER. The Spider's Parlor's Admin Script Pack is a collection of Administrative scripts designed to make IT Administration easier! Save time, get more work done, get the Admin Script Pack.

markdmac · Jul 9, 2008

I found some code that is supposed to swap out images and I am trying to retrofit that as I think the code is easier for me to follow. Still not working though.

Code:

<html>
    <head>
<script language='JavaScript' type='text/javascript'>

    function check_value()
    {
        switch(document.test.field.value)
        {
            case "one":
               document.getElementById("imagedest").innerHTML = "<param name='wmode' value='transparent'><embed id='myvideo' src='[URL unfurl="true"]http://www.youtube.com/v/I8ph8s4psyU&rel=1'[/URL] type='application/x-shockwave-flash' wmode='transparent' width='425' height='355'>";
                break;
            
            case "two":
            
                document.getElementById("imagedest").innerHTML = "<param name='wmode' value='transparent'><embed id='myvideo' src='[URL unfurl="true"]http://www.youtube.com/v/fi2g9LQAMp4&rel=1'[/URL] type='application/x-shockwave-flash' wmode='transparent' width='425' height='355'>";
                break;
                
            case "three":

                document.getElementById("imagedest").innerHTML = "<param name='wmode' value='transparent'><embed id='myvideo' src='[URL unfurl="true"]http://www.youtube.com/v/EHvopiire70&rel=1'[/URL] type='application/x-shockwave-flash' wmode='transparent' width='425' height='355'>";
                break;
        }
    }
    
</script>

    </head>
    <body bgcolor=#000000 text="#ffffff" topmargin="0" leftmargin="0" rightmargin="0" bottommargin="0" link="#990000" vlink="#990000" alink="#990000">




<form name='test'>
	Select a <span lang="en-us">Video to View</span>:<br>
    <input type="radio" name="field" value="one" onchange='check_value()' onclick='check_value()'>One 
    <input type="radio" name="field" value="two" onchange='check_value()' onclick='check_value()'>Two 
    <input type="radio" name="field" value="three" onchange='check_value()' onclick='check_value()'>Three 
</form>

<div id='imagedest'>
</div>


    </body>
</html>

This seems to be a lot more streamlined. Can anyone suggest what to look at? Many thanks.

I hope you find this post helpful.

Regards,

Mark

Check out my scripting solutions at

http://www.thespidersparlor.com/vbscript

Work SMARTER not HARDER. The Spider's Parlor's Admin Script Pack is a collection of Administrative scripts designed to make IT Administration easier! Save time, get more work done, get the Admin Script Pack.

markdmac · Jul 9, 2008

Getting closer...

I removed the video code and tried to just set text. When that did nothing I added a default to display the value of the radio button. That is coming back as "undefined".

Here is what I am now testing with. Is there something wrong with the way I am checking the value of the radio button?

Code:

<html>
    <head>
<script language='JavaScript' type='text/javascript'>

    function check_value()
    {
        switch(document.test.field.value)
        {
            case "one":
               document.getElementById("imagedest").innerHTML = "<h1>Selected 1</h1>";
                break;
            
            case "two":
            
                document.getElementById("imagedest").innerHTML = "<h1>Selected 2</h1>";
                break;
                
            case "three":

                document.getElementById("imagedest").innerHTML = "<h1>Selected 3</h1>";
                break;
			default:      
				document.getElementById("imagedest").innerHTML = document.test.field.value;
				break;
	  }
    }
    
</script>

    </head>
    <body bgcolor=#000000 text="#ffffff" topmargin="0" leftmargin="0" rightmargin="0" bottommargin="0" link="#990000" vlink="#990000" alink="#990000">




<form name='test'>
	Select a <span lang="en-us">Video to View</span>:<br>
    <input type="radio" name="field" value="one" onchange='check_value()' onclick='check_value()'>One 
    <input type="radio" name="field" value="two" onchange='check_value()' onclick='check_value()'>Two 
    <input type="radio" name="field" value="three" onchange='check_value()' onclick='check_value()'>Three 
</form>

<div id='imagedest'>
</div>


    </body>
</html>

I hope you find this post helpful.

Regards,

Mark

Check out my scripting solutions at

http://www.thespidersparlor.com/vbscript

Work SMARTER not HARDER. The Spider's Parlor's Admin Script Pack is a collection of Administrative scripts designed to make IT Administration easier! Save time, get more work done, get the Admin Script Pack.

tsuji · Jul 9, 2008

If the link is wrong, it won't display. This is a stripdown of your stripdown. I don't touch the archaic style part: it is near to a horror story.
[tt]
<HTML>
<head>
<script language="javascript">

function SetVideo() {
var form = document.forms.VideoMenu;
var ChosenVideo = getSelectedValue(form.elements.PodSelect);

if (ChosenVideo == "Pod1") {
displayCode = ' <object width="425" height="355">'+
'<param name="movie" value="

http://www.youtube.com/v/I8ph8s4psyU&rel=1">'+

'<param name="wmode" value="transparent">'+
'<embed src="

http://www.youtube.com/v/I8ph8s4psyU&rel=1"

'+
'type="application/x-shockwave-flash" wmode="transparent" width="425" height="355">'+
'</embed>'+
'</object>';
} else if (ChosenVideo == "Pod2") {
displayCode = ' <object width="425" height="344">'+
'<param name="movie" value="

http://www.youtube.com/v/fi2g9LQAMp4&hl=en&fs=1"></param>'+

'<param name="allowFullScreen" value="true"></param>'+
'<embed src="

http://www.youtube.com/v/fi2g9LQAMp4&hl=en&fs=1"

'+
'type="application/x-shockwave-flash" allowfullscreen="true" width="425" height="344">'+
'</embed>'+
'</object>';
} else if (ChosenVideo == "Pod3") {
displayCode = ' <object width="425" height="344">'+
'<param name="movie" value="

http://www.youtube.com/v/EHvopiire70&hl=en&fs=1"></param>'+

'<param name="allowFullScreen" value="true"></param>'+
'<embed src="

http://www.youtube.com/v/EHvopiire70&hl=en&fs=1"

'+
'type="application/x-shockwave-flash" allowfullscreen="true" width="425" height="344">'+
'</embed>'+
'</object>';
}

document.getElementById("videoid").innerHTML=displayCode;

}

function getSelectedValue(flds) {
var i = 0;
var len = flds.length;

while (i < len) {
if (flds.checked) {
return flds.value;
}
i++;
}
return "";
}
window.onload=SetVideo;
</script>
</head>
<BODY BGCOLOR="#0000f0" text="#FFFFFF" topmargin="0" leftmargin="0" rightmargin="0" bottommargin="0" link="#990000" vlink="#990000" alink="#990000">
<div align="center">
<form name="VideoMenu" method="post">
Select a <span lang="en-us">Video to View</span>:<br>
<span lang="en-us">1</span><input name="PodSelect" value="Pod1" type="radio" checked onclick="SetVideo()">
<span lang="en-us">  2</span><input name="PodSelect" value="Pod2" type="radio" onclick="SetVideo()">
<span lang="en-us">  3</span><input name="PodSelect" value="Pod3" type="radio" onclick="SetVideo()">
<input name="DoIt" type="submit" value="Show Video" />
</form>
<b><span lang="en-us">Video</span></b><p>
<div id="videoid"></div>
</div>
</BODY>
</HTML>
[/tt]

markdmac · Jul 9, 2008

Thanks again for all the help PHV. Looks like I got it working at the same time you were posting. Below is what I used. I am goign to try what you posted as well because I am still getting the ActiveX notification. Is there any way to prevent that?

Code:

<html>
    <head>
<script language='JavaScript' type='text/javascript'>

    function check_value(selectedValue)
    {
        switch(selectedValue)
        {
            case "1":
               document.getElementById("imagedest").innerHTML = "<param name='wmode' value='transparent'><embed id='myvideo' src='[URL unfurl="true"]http://www.youtube.com/v/I8ph8s4psyU&rel=1'[/URL] type='application/x-shockwave-flash' wmode='transparent' width='425' height='355'>";
                break;
            
            case "2":
            
                document.getElementById("imagedest").innerHTML = "<param name='wmode' value='transparent'><embed id='myvideo' src='[URL unfurl="true"]http://www.youtube.com/v/fi2g9LQAMp4&rel=1'[/URL] type='application/x-shockwave-flash' wmode='transparent' width='425' height='355'>";
                break;
                
            case "3":

                document.getElementById("imagedest").innerHTML = "<param name='wmode' value='transparent'><embed id='myvideo' src='[URL unfurl="true"]http://www.youtube.com/v/EHvopiire70&rel=1'[/URL] type='application/x-shockwave-flash' wmode='transparent' width='425' height='355'>";
                break;			
            default:      
				document.getElementById("imagedest").innerHTML = document.test.field.value;
				break;
	  }
    }
    
</script>

    </head>
    <body bgcolor=#000000 text="#ffffff" topmargin="0" leftmargin="0" rightmargin="0" bottommargin="0" link="#990000" vlink="#990000" alink="#990000">




<form name='test'>
	Select a <span lang="en-us">Video to View</span>:<br>
    <input type="radio" name="field" value="one" onchange='check_value("1")' onclick='check_value("1")'>One 
    <input type="radio" name="field" value="two" onchange='check_value("2")' onclick='check_value("2")'>Two 
    <input type="radio" name="field" value="three" onchange='check_value("3")' onclick='check_value("3")'>Three 
</form>

<div id='imagedest'>
</div>


    </body>
</html>

I hope you find this post helpful.

Regards,

Mark

Check out my scripting solutions at

http://www.thespidersparlor.com/vbscript

Work SMARTER not HARDER. The Spider's Parlor's Admin Script Pack is a collection of Administrative scripts designed to make IT Administration easier! Save time, get more work done, get the Admin Script Pack.

markdmac · Jul 9, 2008

Final follow up here, when I tested the code I last posted it gave me the ActiveX warning. I was running locally on my Vista machine. When I posted it to the live site to look at there was no warning.

I hope you find this post helpful.

Regards,

Mark

Check out my scripting solutions at

http://www.thespidersparlor.com/vbscript

Work SMARTER not HARDER. The Spider's Parlor's Admin Script Pack is a collection of Administrative scripts designed to make IT Administration easier! Save time, get more work done, get the Admin Script Pack.

Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Change page code from radio button

markdmac

MIS

tchatzi

Technical User

tsuji

Technical User

tsuji

Technical User

markdmac

MIS

markdmac

MIS

markdmac

MIS

tsuji

Technical User

markdmac

MIS

markdmac

MIS

Similar threads

Part and Inventory Search

Sponsor