www.webdeveloper.com
Results 1 to 7 of 7

Thread: simple script works in FF, but not Safari

  1. #1
    Join Date
    Jul 2009
    Posts
    4

    simple script works in FF, but not Safari

    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.

  2. #2
    Join Date
    Dec 2005
    Posts
    2,984
    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:

    Code:
    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.
    I've switched careers...
    I'm NO LONGER a scientist,
    but now a web developer...
    awesome.

  3. #3
    Join Date
    Jul 2009
    Posts
    4
    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.

  4. #4
    Join Date
    Jun 2007
    Posts
    667
    Quote Originally Posted by marksalvatore View Post
    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.
    Y_U U_G_A_E_U_ B_S_A_D_

  5. #5
    Join Date
    Jul 2009
    Posts
    4
    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!");

    }

  6. #6
    Join Date
    Jun 2007
    Posts
    667
    Code:
    	for(i=0;i<document.forms[0].radgroup.length;i++) {
    This should fix the syntax error, but it could be greatly improved:
    Code:
    for(var i=0; i<document.forms[0][radgroup].length; i++)
    It would help to see the form...
    Y_U U_G_A_E_U_ B_S_A_D_

  7. #7
    Join Date
    Jul 2009
    Posts
    4
    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>

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles