tags:

views:

103

answers:

3
Q: 

Changing iframe src with Javascript.

I am trying to change an iframe src when someone clicks a radio button. For some reason my code is not working correctly and I am having trouble figuring out why. Here is what I have:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt;
<html xmlns="http://www.w3.org/1999/xhtml"&gt;

<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<title>Untitled 1</title>

<SCRIPT LANGUAGE="JavaScript">
function go(loc){
    document.getElementById('calendar').src = loc;
}
</script>
</head>

<body>
<iframe id="calendar" src="about:blank" width="1000" height="450" frameborder="0" scrolling="no"></iframe>

<form method="post">
    <input name="calendarSelection" type="radio" onselect = "go('http://calendar.zoho.com/embed/9a6054c98fd2ad4047021cff76fee38773c34a35234fa42d426b9510864356a68cabcad57cbbb1a0?title=Kevin_Calendar&amp;type=1&amp;l=en&amp;tz=America/Los_Angeles&amp;sh=[0,0]&amp;v=1')"/&gt;Day
    <input name="calendarSelection" type="radio" onselect = "go('http://calendar.zoho.com/embed/9a6054c98fd2ad4047021cff76fee38773c34a35234fa42d426b9510864356a68cabcad57cbbb1a0?title=Kevin_Calendar&amp;type=1&amp;l=en&amp;tz=America/Los_Angeles&amp;sh=[0,0]&amp;v=1')" />Week
    <input name="calendarSelection" type="radio" onselect = "go('http://calendar.zoho.com/embed/9a6054c98fd2ad4047021cff76fee38773c34a35234fa42d426b9510864356a68cabcad57cbbb1a0?title=Kevin_Calendar&amp;type=1&amp;l=en&amp;tz=America/Los_Angeles&amp;sh=[0,0]&amp;v=1')"/&gt;Month
    </form>

</body>

</html>
+2  A: 

In this case, it's probably because you are using the wrong brackets here:

document.getElementById['calendar'].src = loc;

should be

document.getElementById('calendar').src = loc;
Pekka  2010-09-16 19:43:55
I changed it and it still did not work.
shinjuo  2010-09-16 19:45:05
@shinjuo `onselect` is not the correct attribute to use here. You may want to use `onclick` - notice though that that won't fire if the user uses their keyboard
Pekka  2010-09-16 19:46:01
That is what it was. Thanks. The reason I chose on select is because I thought that if someone tabbed through and hit space instead of mouse click that it would still change
shinjuo  2010-09-16 19:47:52
@shinjuo yeah, that is good idea. I think though that you'd have to use some variation of `onchange` for that.
Pekka  2010-09-16 19:49:14
"onclick" works for the keyboard. There is no "onselect" event.
Aaron D  2010-09-16 19:57:55
@Aaron there is a non-standard onselect event, but it's for selecting text. If `onclick` works for turning a radio button on / off then everything's solved, great!
Pekka  2010-09-16 19:59:59
A: 

There should be no spaces between the attribute onselect and the value: 

<input name="calendarSelection" type="radio" onselect = "go('http://calendar.zoho.com/embed/9a6054c98fd2ad4047021cff76fee38773c34a35234fa42d426b9510864356a68cabcad57cbbb1a0?title=Kevin_Calendar&amp;type=1&amp;l=en&amp;tz=America/Los_Angeles&amp;sh=[0,0]&amp;v=1')"/&gt;Day

Should be: 

<input name="calendarSelection" type="radio" onselect="go('http://calendar.zoho.com/embed/9a6054c98fd2ad4047021cff76fee38773c34a35234fa42d426b9510864356a68cabcad57cbbb1a0?title=Kevin_Calendar&amp;type=1&amp;l=en&amp;tz=America/Los_Angeles&amp;sh=[0,0]&amp;v=1')"/&gt;Day

I also agree that onselect must beonclick. It will work with keyboard users.

I would also recommend adding <label> tags to the text of "Day", "Month", and "Year" to make them easier to click on. Example code: 

<input id="day" name="calendarSelection" type="radio" onclick="go('http://calendar.zoho.com/embed/9a6054c98fd2ad4047021cff76fee38773c34a35234fa42d426b9510864356a68cabcad57cbbb1a0?title=Kevin_Calendar&amp;type=1&amp;l=en&amp;tz=America/Los_Angeles&amp;sh=[0,0]&amp;v=1')"/&gt;&lt;label for="day">Day</label>

Aaron D  2010-09-16 19:50:28
A: 

qwqwe  2010-09-17 14:00:46

related questions

What JavaScript patterns do you use most?
Javascript events
What style do you use for creating an "class" in JavaScript?
Graphing JavaScript Library
What's the difference in closure style
Getting the text from a drop-down box
How to specify javascript to run when ModalPopupExtender is shown
Length of Javascript Associative Array
How Do I Post and then redirect to an external URL from ASP.Net?
How to set up a CSS switcher in ASP.NET
Wrapping lists into columns
Javascript keyboard events primer? (or rather: help me with my custom dropdown)
Http Auth in a Firefox 3 bookmarklet
Best Debugging Tools for JavaScript/xulrunner Development
How can I turn a string of HTML into a DOM object in a Firefox extension?
Call ASP.NET Function From Javascript?
Javascript troubleshooting tools in IE
MAC addresses in JavaScript
Capturing TAB key in text box
CSS Background Color in Javascript
How can I make the browser see CSS and Javascript changes?
Triple Quotes? How do I delimit a databound Javascript string parameter in ASP.NET?
ASP .Net Custom Client-Side Validation
What JavaScript library would you choose for a new project and why?
Detecting font in JavaScript