We help IT Professionals succeed at work.

IE / Firefox not initializing in the same way

JasonDell
JasonDell asked
on
178 Views
Last Modified: 2008-02-01
Hi - I have two questions that I would really appreciate some help with:

1. The following code does not operate the same in both IE and Firefox. In IE, the init() function works correctly based on $ppr_selection and $examined_selection flags and the correct divisions are displayed as the page is initialized. What changes do I need to make in order for Firefox to function in the same way?
2. More for interest sake - How can I fire the onclick event of the radio button "search_type" within the init function without the for loop? - something more like the checkbox that is fired using document.account_edit.property_profile.fireEvent("onclick");

Thanks for your help in advance!
Jason

<head>
<script type="text/javascript">
function init(){
  elem = account_edit.search_type; // search_type Bulk or Examined  
  for(var i=0;i<elem.length;i++){
    if(elem[i].type=="radio" && elem[i].checked){
      elem[i].onclick();
    }
  }
document.account_edit.property_profile.fireEvent("onclick");
} // end function init
    function onOrderType(frm, tp) {
      frm.className = frm.className.replace(/orderType_[a-z]+/i,''); //clear ordertype from classname
      frm.className += ' orderType_' + tp; //set net ordertype
    }

    function onPPRSelect(frm, tp) {
      frm.className = frm.className.replace(/PPR_[a-z]+/i,''); //clear ordertype from classname
      frm.className += ' PPR_' + tp; //set net ordertype
    }      
</script>
<style>
.onExamined, .onBulk, .onPPR {display:none;}

form.orderType_examined             .onExamined       {display:block;}
form.orderType_bulk               .onBulk         {display:block;}
form.PPR_on                           .onPPR              {display:block;}
form.PPR_off                           .onExamined     {display:block;}
form.PPR_off                           .onBulk           {display:none;}
</style>
</head>
<body onLoad="init()">
<?php       $ppr_selection = 1;
      $examined_selection = 1; ?>
<form name="account_edit">
      <?php if ($ppr_selection == '1') { ?>
            <input type="checkbox" name="property_profile" value="1" checked="checked"
            onclick="onPPRSelect(this.form, this.checked ? 'on' : 'off');"/>
      <?php } else { ?>
            <input type="checkbox" name="property_profile" value="1"
            onclick="onPPRSelect(this.form, this.checked ? 'on' : 'off');"/>
      <?php } ?>
      <b>Property Profile Report</b>            
      <div class="onPPR">
      <?php if ($examined_selection == '1') { ?>
            Examined:      
        <input type="radio" name="search_type" value="examined" checked="checked"
        onclick="onOrderType(this.form, this.checked ? 'examined' : 'bulk');" />
            Bulk:
        <input type="radio" name="search_type" value="bulk"
        onclick="onOrderType(this.form, this.checked ? 'bulk' : 'examined');" />
      <?php } else { ?>
            Examined:      
        <input type="radio" name="search_type" value="examined"
        onclick="onOrderType(this.form, this.checked ? 'examined' : 'bulk');" />
            Bulk:
        <input type="radio" name="search_type" value="bulk" checked="checked"
        onclick="onOrderType(this.form, this.checked ? 'bulk' : 'examined');" />
      <?php } ?>      
             <div class="onExamined">
              <span id="textExamined">Deeds to be searched:</span>
            <input type="radio" name="Deed" id="Deed1" value="1" checked="checked"/> 1
               <input type="radio" name="Deed" id="Deed2" value="2" /> 2                    
        </div>
        <div class="onBulk">
            <span id="textBulk">With a bulk order you receive all the... </span>
        </div>
      </div>
</form>
</body>
</html>
Comment
Watch Question

Commented:
First, why you got the error.  IE has a hack that lets you reference HTML elements by name directly, Firefox does not.  So, in IE "account_edit" refers to the form, but Firefox it throws an error (as it should).  You also want to call the click method in a cross-browser method.  This should fix the error:

function init(){
  elem = document.account_edit.search_type; // search_type Bulk or Examined  
  for(var i=0;i<elem.length;i++){
    if(elem[i].type=="radio" && elem[i].checked){
      elem[i].onclick();
    }
  }
  document.account_edit.property_profile.click();
} // end function init

As for how to avoid the looping, I would suggest modifying the HTML you output so that the selected checkbox has an ID.  You can call it whatever you want, but say it has an ID of "theSelectedRadio".  Then your javascript would simplify to this:

function init(){
  elem = document.getElementById("theSelectedRadio");
  elem.click();  
  document.account_edit.property_profile.click();
} // end function init

Hope that helps.

Author

Commented:
Hi dakyd,

Thank you very much for your response... What you are saying about IE and Firefox acting differently makes sense, but I must be missing something though, because when I make the changes you suggest the init() function doesn't even work in IE. The only two changes I made were:

BEFORE: elem = account_edit.search_type;
AFTER: elem = document.account_edit.search_type;

BEFORE: document.account_edit.property_profile.fireEvent("onclick");
AFTER: document.account_edit.property_profile.click();

Please let me know where I am misunderstanding you.

Thanks!
Commented:
This one is on us!
(Get your first solution completely free - no credit card required)
UNLOCK SOLUTION

Author

Commented:
No problem...! I appreciate the help. I changed click(); to onclick(); for the checkbox (property_profile) and added an id to the radio buttons (search_type) which I then accessed via getElementById. It is working well now in both IE and Firefox - thank you!

Do you perhaps know why the following works with a checkbox
document.account_edit.property_profile.onclick();

and yet it doesn't work when it is a radio button?
document.account_edit.search_type.onclick();

Commented:
When you have multiple elements named the same, like you do for the radio buttons, then this:

  document.account_edit.search_type

doesn't point to a single element.  It actually has an array that you can then iterate through.  Remember your for loop that you had initially?  That's what it did, it set elem to document.account_edit.search_type, counting on it to be an array.  Then it went through that array (i.e. all the elements w/ that name) and called the onclick() for the one that was checked.
  The upshot of this is that you're trying to call the onclick() for an array, not an HTML element.  That's why it didn't work.  If you were to do this, for example:

  document.account_edit.search_type[0].onclick();

then it would call the onclick for the very first radio w/ that name.  Hope that makes sense.

Author

Commented:
Thanks for explaining that... it makes perfect sense!
Unlock the solution to this question.
Join our community and discover your potential

Experts Exchange is the only place where you can interact directly with leading experts in the technology field. Become a member today and access the collective knowledge of thousands of technology experts.

*This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.

OR

Please enter a first name

Please enter a last name

8+ characters (letters, numbers, and a symbol)

By clicking, you agree to the Terms of Use and Privacy Policy.