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

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>