Issues with using getElementById and Safari

[spidergirl1979]

I've done some research on the subject and found that Safari does indeed support getElementById but I'm having issues with it and can't figure out why.

I have a page with various payment options and I want the appropriate radio button to be checked off in they click in a corresponding text box. This is what I have in my html page (it's a snippet of what's on the actual page)

<form id="form1" name="form1" method="POST">
<input type="radio" id="PaymentMethod" name="PaymentMethod" value="CardOnFile">Use a Credit Card on file<br>			
Last 4 digits on card:<input type="text" onClick="MoveFocus();" id="Last4Digits" name="Last4Digits" maxlength="4" value="test" size="4">
<br>
<input type="radio" name="PaymentMethod" id="PaymentMethod" value="BankTransfer">Use Bank Transfer<br>			
<input id="PaymentMethod" name="PaymentMethod" type="radio" value="credit" checked>Use the following credit card
<select onClick="SettheFocus();" id="CardType" name="CardType" width="198">
	<option>Select Card</option>
</select>
</form>

and the javascript functions are as follows:

function SettheFocus()
{
	form1.PaymentMethod[form1.PaymentMethod.length-1].checked=true;
}

function MoveFocus()
{
	document.getElementById("PaymentMethod")(0).checked=true;
}

The code will work in in FF and IE6/7 but not in Safari. I can use

form1.PaymentMethod[0].checked=true;

but I've had some issues in the past using that so I prefer to use getElementById. getElementsByName will work in Safari but I don't understand why getElementById doesn't seem to be.

It's probably something uber simple I'm missing but I can't seem to figure it out.

[gil davis]

I'm going out on a bit of a limb since I don't know anything about Safari, but using an index is usually a problem. If you are going to use getElementById() you may as well go right to the object rather than the index.

Having said that, per W3C recommendations an ID must be unique, and yours isn't. Make them unique, and you should be good to go.

Names can be repeated, and that makes arrays (name[0], name[1], etc) but IDs cannot. The function getElementById() will get only the first one it finds, while getElementsByName() will get an array of everything with the specified name.

Since you have an array of radio buttons, it may be best to use the "old" way of pointing to form objects and reduce your frustration level.

[spidergirl1979]

I tweaked the actual page and it's working now. I didn't realize that IDs couldn't be duplicated. I knew that for radio buttons to perform together they need to be *named* the same. I habitually have the name and id be the same thing.

Thanks so much for the reply! I feel like a weight has been lifted off my shoulders. I spent quite a while this morning trying to find out what the problem was and googling it but not coming back with anything.