simple script works in FF, but not Safari

[marksalvatore]

I want to determine if a radio button has been selected. FF and Safari evaluate this differently.

for (i = 0; i < document.forms[0].RadioButtonName.length; i++)
{
if (document.forms[0].ShirtSize[i].checked)
{
alert('true');
}
else
{
alert('false');
}
}

Firefox will loop through once for each of the 3 buttons (in this case) and return false or true, consistent with what's been selected in the form. Safari returns false regardless of which is selected.

[aj_nsc]

You're wording is confusing. The function above wouldn't RETURN any value, it would just make an alert for every single radio button in the form which would either be true or false.

I think what you want is something like this:

function checkRadioButtons() {

  for(i=0;i<document.forms[0].radiobuttongroup.length;i++) {
   if(document.forms[0].radiobuttongroup[i].checked) {
    return true;
   }
  }

 return false;
}

That will return true as long as something, anything is selected. it will return false if nothing is selected.

[marksalvatore]

I purposely inserted alert() boxes to see how the code was being evaluated at each step. FF displays true or false as expected, based upon which value was selected. Safari on the other hand, displays false for all buttons regardless of which is selected. It's as though Safari doesn't recognize the .checked property.

[Sterling Isfine]

It's as though Safari doesn't recognize the .checked property.

Why don't you just show all your code, then your humiliating mistake can be exposed in no time at all.

[marksalvatore]

Ok. Based on aj_nsc's post, I tried a different approach. But now the script doesn't run in any browser, indicating a syntax error I'm sure. But can't find it. Here's the code:

A submit button calls verifyOrder();

function CheckRadioButtons(radgroup) {
for(i=0;i<document.forms[0].radgroup.length;i++) {
if(document.forms[0].radgroup[i].checked) {
return true;
}
}
return false;
}



function verifyOrder()
{
if (CheckRadioButtons('Group1') &&
CheckRadioButtons('Group2') &&
CheckRadioButtons('Group3'))
document.forms[0].submit();
else
alert ( "Oops! Don't forget to make a selection for each group!");

}

[Sterling Isfine]

	for(i=0;i<document.forms[0].radgroup.length;i++) {

This should fix the syntax error, but it could be greatly improved:

for(var i=0; i<document.forms[0][radgroup].length; i++)

It would help to see the form...

[marksalvatore]

Again, this works in FF, but not in Safari. The js now reads:


function CheckRadioButtons(radgroup) {
for(i=0;i<document.forms[0][radgroup].length;i++) {
if(document.forms[0][radgroup][i].checked) {
return true;
}
}
return false;
}


function verifyOrder()
{
if (CheckRadioButtons('RBGroup1') &&
CheckRadioButtons('RBGroup2') &&
CheckRadioButtons('RBGroup3'))
document.forms[0].submit();
else
alert ( "Oops! Don't forget to make a selection for each group!");

}


Maybe the problem is in my form? The radio buttons are using a custom image and script, in place of the default control supplied by the browser, so the <input> tag is set to display:none, and is placed within a <label> tag, along with the replacement image to enable the replacement image (checkbox_off.gif) to act on behalf of the <input> control. I'm also wrapping checkbox_off.gif in an anchor, so to call a script to swap out the "off" image for the "on" when clicked (that code works perfectly in all browsers).

Here's the radio button code from the form:

<label>
<input style="display: none;" type="radio" name="ShirtStyle" value="tb1" />
<a href="#" onclick="swapStyleBox('tb1')">
<img src="cw3/assets/product_full/tb1.jpg" alt="tb1 red" border="0">
<div class="chbox">
<img id="tb1" src="/shop/images/dyo/checkbox_off.gif"
alt="tb1" width="15" height="15" border="0" />
</div>
</a>
</label>