[Javascript] Why does this Mozilla need this workaround?

[Doug Martin]

We recently had to program a workaround for Mozilla in a "how did you hear
about us" select box (embedded in a Smarty template for an X-Cart checkout
page) because Mozilla failed to return data for the selections requiring
user text input. The fix was to append it as a child node (the form's only
child node) for the form itself even though referral_explanation was already
listed along with the other select box elements. Can anyone explain why
Mozilla requires an extra child node for a properly id'ed form element? The
fixed script is listed first below and then the old script (which worked
fine for IE) is below that.
 
That said, Mozilla's DOM inspector is amazing.
 
Doug Martin, designer/programmer, The Real Estate School, Inc.,
<blocked::http://www.realestate-school.com/> www.realestate-school.com

 

 
//Here starts the version with the workaround Mozilla
<script language="JavaScript">
{literal}
function form_rewriter(the_form_object){
 
 if(the_form_object.value == "other_search_listing"){
  data = '<br>Which one? <input name="referral_explanation" type="text"
id="referral_explanation" size="20"
onChange="document.getElementById(\'checkout_form\').referral_explanation.va
lue = this.value"
onBlur="document.getElementById(\'checkout_form\').referral_explanation.valu
e = this.value">';
 }else if(the_form_object.value == "search_advertising"){
  data = '<br>Please explain:<input name="referral_explanation" type="text"
id="referral_explanation" size="20"
onChange="document.getElementById(\'checkout_form\').referral_explanation.va
lue = this.value"
onBlur="document.getElementById(\'checkout_form\').referral_explanation.valu
e = this.value">';
 }else if(the_form_object.value == "word_of_mouth"){
  data = '<br>Please tell us who told you about our school so we can thank
them:<input name="referral_explanation" type="text"
id="referral_explanation" size="20"
onChange="document.getElementById(\'checkout_form\').referral_explanation.va
lue = this.value"
onBlur="document.getElementById(\'checkout_form\').referral_explanation.valu
e = this.value">';
 }else{
  data = '';
 }
 
 if (document.layers) {
  //alert('redrawing Netscape form');
  //do Netscape redraw
  document.layers.cust.document.write('');
  document.layers.cust.document.write(data);
  document.layers.cust.document.close();
  if(document.layers.cust.referral_explanation){
   document.layers.cust.referral_explanation.focus();
   document.layers.cust.referral_explanation.select();
  }
 }else{
  //alert('entered IE section');
  if (document.all) {
   //alert('redrawing IE form');
   //do Explorer redraw
   document.all.cust.innerHTML = '';
   document.all.cust.innerHTML = data;
   if(document.all.referral_explanation){
    document.all.referral_explanation.focus();
    document.all.referral_explanation.select();
   }
  }else{
   //do mozilla redraw
   
   //added to deal with mozilla's ignorance of newly added form
   //fields further below.
   if(!document.getElementById('checkout_form').referral_explanation){
    var new_element = document.createElement('input');
    new_element.type = "text";
    new_element.name = "referral_explanation"
    new_element.id = "referral_explanation"
    document.getElementById('checkout_form').appendChild(new_element);
   }
   //end of mozilla workaround 
   
   document.getElementById('cust').innerHTML = '';
   document.getElementById('cust').innerHTML = data;
   if(document.getElementById('referral_explanation')){
    document.getElementById('referral_explanation').focus();
    document.getElementById('referral_explanation').select();
   }
  }
   }
}
 
{/literal}
</script>
<strong>How did you hear about us?<br>
</strong>
<hr size="1" noshade>
<select name="referral_type" id="referral_type"
onChange="form_rewriter(document.checkout_form.referral_type);">
    <option selected>Choose one...</option>
    <option value="google">Google</option>
 <option value="yahoo">Yahoo</option>
 <option value="aol">AOL</option>
 <option value="ask_jeeves">Ask Jeeves</option>
    <option value="other_search_listing">Other Search Engine
Listing</option>
    <option value="search_advertising">Other Online Advertisement</option>
    <option value="snail_mail">Direct Mail or Postcard</option>
    <option value="email">Email Newsletter</option>
    <option value="word_of_mouth">Word of Mouth</option>
</select>
  <!-- Placeholder for dynamic form contents -->
  <span id='cust'></span><br>
<br>

 
//Here starts the version that didn't work in Mozilla
<script language="JavaScript">
{literal}
function form_rewriter(the_form_object){
 referral_explanation="";
 if(the_form_object.value == "other_search_listing"){
  data = '<br>Which one? <input name="referral_explanation" type="text"
id="referral_explanation" size="20">';
 }else if(the_form_object.value == "search_advertising"){
  data = '<br>Please explain:<input name="referral_explanation" type="text"
id="referral_explanation" size="20">';
 }else if(the_form_object.value == "word_of_mouth"){
  data = '<br>Please tell us who told you about our school so we can thank
them:<input name="referral_explanation" type="text"
id="referral_explanation" size="20">';
 }else{
  data = '';
 }
 
 if (document.layers) {
  //alert('redrawing Netscape form');
  //do Netscape redraw
  document.layers.cust.document.write('');
  document.layers.cust.document.write(data);
  document.layers.cust.document.close();
  if(document.layers.cust.referral_explanation){
   document.layers.cust.referral_explanation.focus();
   document.layers.cust.referral_explanation.select();
  }
 }else{
  //alert('entered IE section');
  if (document.all) {
   //alert('redrawing IE form');
   //do Explorer redraw
   document.all.cust.innerHTML = '';
   document.all.cust.innerHTML = data;
   if(document.all.referral_explanation){
    document.all.referral_explanation.focus();
    document.all.referral_explanation.select();
   }
  }else{
   //do mozilla redraw
   document.getElementById('cust').innerHTML = '';
   document.getElementById('cust').innerHTML = data;
   if(document.getElementById('referral_explanation')){
    document.getElementById('referral_explanation').focus();
    document.getElementById('referral_explanation').select();
   }
  }
   }
}
{/literal}
</script>
<strong>How did you hear about us?<br>
</strong>
<hr size="1" noshade>
<select name="referral_type" id="referral_type"
onChange="form_rewriter(document.checkout_form.referral_type);">
    <option selected>Choose one...</option>
    <option value="google">Google</option>
 <option value="yahoo">Yahoo</option>
 <option value="aol">AOL</option>
 <option value="ask_jeeves">Ask Jeeves</option>
    <option value="other_search_listing">Other Search Engine
Listing</option>
    <option value="search_advertising">Other Online Advertisement</option>
    <option value="snail_mail">Direct Mail or Postcard</option>
    <option value="email">Email Newsletter</option>
    <option value="word_of_mouth">Word of Mouth</option>
</select>
  <!-- Placeholder for dynamic form contents -->
  <span id='cust'></span> <br>
<br>

-------------- next part --------------
An HTML attachment was scrubbed...
URL: <http://lists.evolt.org/pipermail/javascript/attachments/20050427/9a554c7b/attachment.htm>