HTML Click Works in IE, not FireFox, Chrome

Question

This has got to be something simple: I set up a frames page with two possible sources for the target frame based on a form with two options. I used the OnClick event to trap the user's click to show the appropriate page. It works fine in Internet Explorer 7, swapping the two source pages. FireFox 3 and Chrome show only the default source.

HEAD Script section:

function SwapInlineFrameSource()

{
var rsRadio, rsiFrame;

rsRadio=document.getElementById('County');

rsiFrame=document.getElementById('RatesFrame')

if (rsRadio.checked===true) {

    rsiFrame.src="SantaCruzRates.htm";

    }

else {

    rsiFrame.src="DelNorteRates.htm";

    }

}

BODY Form section (commented to show up here):

<input type="radio" value="SC" checked name="County"   onclick="SwapInlineFrameSource()"> 
 Santa Cruz
<input type="radio" value="DN" name="County" onclick="SwapInlineFrameSource()" > 
 Del Norte

What am I missing? (Live example: http://www.raintrees.com/rates.html)

Thanks!

mr

Answer 1

I don't believe that getElementById works on frames in firefox. I have always used the frames["frameID"], which seems to work more consistently.

Answer 2

Your code is wrong....

var rsRadio, rsiFrame;
rsRadio=document.getElementById('County');
rsiFrame=document.getElementById('RatesFrame')
if (rsRadio.checked===true) {

I assume you mean getElementsByName and not ID becasue you don't have an ID of county on those radio buttons.

In fact you need to determine which radio button is checked so you could some thing like (assuming there are only ever the 2 options)

if(document.getElementsByName()[0].checked){
    // show Santa Cruz Rates
}else{
    // show other rates
}

Answer 3

You are using getElementByID, but you aren't specifying IDs for your inputs. Perhaps consider this instead:

function SwapInlineFrameSource(rdoButton)
{
  rsiFrame = document.getElementById("RatesFrame");
  rsiFrame.src = rdoButton.value;
}

<input type="radio" value="SantaCruzRates.htm" checked="checked" name="County" onClick="SwapInlineFrameSource(this);">Santa Cruz</input>
<input type="radio" value="DelNorteRates.htm" name="County" onClick="SwapInlineFrameSource(this);">Del Norte</input>