getElementById question

[Jim Weinberg]

I've got a form with a set of radio buttons. I want to redirect the user to a different page depending on the button they select. The button set is defined as follows:

<input type="RADIO" name="Payment" id="Payment" value="Mail"><b>Pay by mail:</b> <p><input type="RADIO" name="Payment" value="Paypal"><b>Pay with Paypal:</b>

If I use the following code, it works fine:

var el = document.forms[0].elements;
for(var i = 0 ; i < el.length ; ++i) {
if(el[i].name == "Payment" && el[i].value == "Paypal" && el[i].checked) {
document.getElementById("redirect").value="http://www.paypal.com"
break }
}

What I'd like to know is why the following code doesn't work:

if(document.getElementById("Payment").value == "Paypal") {
document.getElementById("redirect").value="http://www.paypal.com"
break }

I know this is a techy type question, but it looks like it should work.

Thanks in advance.

Jim

[riptide]

the bottom one has no code to find out if something was checked or not.

I don't know about document.getElementById
but I do know with out this: e which is window event.
the bottom code can't work without it.

[Jim Weinberg]

riptide.

I check all input fields earlier in the code. I didn't want to put all the code in my inquiry. Suffice it to say that one of the buttons in the group is indeed selected before this code is executed.

Jim

[rangana]

Could you please recreate a page with this problem. So that we could check it out.
So far, the code is vague without seeing the (whole) HTML structure.

[jscheuer1]

if(document.getElementById("Payment").value == "Paypal")

will always be false as long as this exists:

<input type="RADIO" name="Payment" id="Payment" value="Mail">

and is the only element (or in some browsers, simply the first element) on the page with an id of "Payment", as it appears to be in your example. Regardless, technically speaking, there may only be one element per page with a given id. Multiple elements on a page that share an ID will either cause an error or default to the first one one parsed by javascript (depends upon the browser).

If on the other hand your markup looked like this (addition highlighted):

<input type="RADIO" name="Payment" id="Payment" value="Mail"><b>Pay by mail:</b>
<p><input type="RADIO" name="Payment" id="Paypal" value="Paypal"><b>Pay with Paypal:</b>

Then this code would (assuming there are no other problems/conflicts) work:

if(document.getElementById("Paypal").checked)
document.getElementById("redirect").value="http://www.paypal.com";

[Jim Weinberg]

jscheuer1.

Okay, I understand what you're saying and will make the id change. However, from what you said, I now don't understand why the first set of code works ... and it does, every time. Does javascript treat a radio button group differently if you access it by name rather than by id?

Jim

[jscheuer1]

In a way yes, but not really. Unless your radio group is in a container with a unique id, you cannot access a radio group by id, and then only by checking the children of that container. Only one of each unique id per page is allowed, and each must be assigned to one and only one element. This rule is often ignored and browsers will often error correct for it if they can, but when accessing elements by their id in javascript it is enforced because the browser has no way to know which one you mean if there are more than one. Most browsers will give an error in that case, some are now taking the tack of simply returning the first one it finds, which often leads to unexpected results.

The two types of code we have here aren't really comparable at all:

In your first example you are iterating through a collection of form elements looking for a specific one as defined by both its name and value, if you find that one and it is checked, you do something.

In the second case (after correcting it so that it will work) you aren't iterating anything. You are simply going directly for the element with the id specified and determining if it is checked or not, if so you do something.

[Jim Weinberg]

jscheuer1,

As always, your grasp of javascript is impressive. I've learned a lot. Many thanks.
Jim