IE8 visualization problem vs. Mozilla, Chrome

Hello,

Probably I have a javascript problem, but since I am kind of a starter, I don't know why my form's behaviour is different in IE and Mozilla.

Basically the problem is that I have created a conditional format, where based on the user's selections, different fields appear. That is what happens correctly in Mozilla, and in the rest of the browsers except IE. Actually it happens, but in a strange ways, I have to do one step more to arrive to the same result in IE (which is clicking in the checkbox and the menu appears). In IE I have to click in the checkbox, then click into another, then the first menu appears.

I took the validation code from this forum, then I applied in Joomla. So we are using Joomla 1.5, with Yootheme/Evolution look on our page.(http://www.mssp.com.br).
The form is to request a demo.

I attach the code, copied from Chronoforms.

Please help!

Sincerely,

Kornel Mergulhão

Hi nkornel,

There is no form on the page you linked to.

Bob

Hello Bob,

Yes, it is under the Demo Section, if you check the top menu.

I copied the code directly here, I hope it helps.

The problem is with the behaviour of IE to handle the checkbox events.

Thank you,

sincerely,

Kornel Mergulhão

<?php
$script = "
	window.addEvent('domready', function() {
	var selectDiv = function() {
		if ( $('check00').checked == true ) {
		$ ('text_6').setStyle('display', '');
		}
                else
                $  ('text_6').setStyle('display', 'none');
		if ( $('check01').checked == true) {
		$ ('text_10').setStyle('display','');
		}
                else
                $  ('text_10').setStyle('display', 'none');
		if  ( $('check02').checked == true) {
		$ ('select_12').setStyle('display','');
		}
                else
                $  ('select_12').setStyle('display', 'none');
	};
	$ ('check00').addEvent ('change', selectDiv);
	$ ('check01').addEvent ('change', selectDiv);
	$ ('check02').addEvent ('change', selectDiv);
	});
";
$doc =& JFactory::getDocument();
$doc->addScriptDeclaration($script);
?>

<div class="form_item">
  <div class="form_element cf_heading">
    <h2 class="cf_text">Solicitação para Demo de Andarta</h2>
  </div>
  <div class="cfclear"> </div>
</div>

<div class="form_item">
  <div class="form_element cf_textbox">
    <label class="cf_label" style="width: 300px;">Nome:</label>
    <input class="cf_inputbox required" maxlength="150" size="30" title="Informação não válida!" id="text_1" name="nome" type="text" />
  
  </div>
  <div class="cfclear"> </div>
</div>

<div class="form_item">
  <div class="form_element cf_textbox">
    <label class="cf_label" style="width: 300px;">Sobrenome:</label>
    <input class="cf_inputbox required" maxlength="150" size="30" title="Informação não válida!" id="text_2" name="sobrenome" type="text" />
  
  </div>
  <div class="cfclear"> </div>
</div>

<div class="form_item">
  <div class="form_element cf_textbox">
    <label class="cf_label" style="width: 300px;">Email:</label>
    <input class="cf_inputbox required validate-email" maxlength="150" size="30" title="Formato inválido!" id="text_3" name="email" type="text" />
  
  </div>
  <div class="cfclear"> </div>
</div>

<div class="form_item">
  <div class="form_element cf_checkbox">
    <label class="cf_label" style="width: 300px;">Que tipo de ativo precisa monitorar:</label>
    <div class="float_left">
      <input value="Estação de Trabalho" title="No mínimo um tem que ser marcado!" class="radio validate-one-required" id="check00" name="check0[]" type="checkbox" />
      <label for="check00" class="check_label">Estação de Trabalho</label>
      <br />
      
<input value="Servidor" title="No mínimo um tem que ser marcado!" class="radio validate-one-required" id="check01" name="check0[]" type="checkbox" />
      <label for="check01" class="check_label">Servidor</label>
      <br />
      
<input value="Gateway" title="No mínimo um tem que ser marcado!" class="radio validate-one-required" id="check02" name="check0[]" type="checkbox" />
      <label for="check02" class="check_label">Gateway</label>
      <br />
      

    </div>
    
  </div>
  <div class="cfclear"> </div>
</div>

<div id="text_6" style='display:none;'>
<div class="form_item">
  <div class="form_element cf_textbox">
    <label class="cf_label" style="width: 300px;">Quantas Estações têm na sua empresa?</label>
    <input class="cf_inputbox validate-number" maxlength="150" size="30" title="Digite somente números!" id="text_6" name="numeroestacoes" type="text" />
  </div>
  </div>
  <div class="cfclear"> </div>
</div>

<div id="text_10" style='display:none;'>
<div class="form_item">
  <div class="form_element cf_textbox">
    <label class="cf_label" style="width: 300px;">Qual é o tipo do servidor?</label>
    <input class="cf_inputbox validate-alphanum" maxlength="150" size="30" title="" id="text_10" name="servidortipo" type="text" />
  </div>
  </div>
  <div class="cfclear"> </div>
</div>

<div id="select_12" style='display:none;'>
<div class="form_item">
  <div class="form_element cf_dropdown">
    <label class="cf_label" style="width: 300px;">Tipo de Gateway</label>
    <select class="cf_inputbox" id="select_12" size="1" title=""  name="tipogateway">
    <option value="">Escolha</option>
      <option value="Firewall">Firewall</option>
<option value="Roteador">Roteador</option>
<option value="Switch">Switch</option>

    </select>
    </div>
  </div>
  <div class="cfclear"> </div>
</div>

<div class="form_item">
  <div class="form_element cf_captcha">
    <label class="cf_label" style="width: 300px;">Captcha</label>
    <span>{imageverification}</span> 
    
    </div>
  <div class="cfclear"> </div>
</div>

<div class="form_item">
  <div class="form_element cf_button">
    <input value="Submit" name="button_19" type="submit" />
    <button style="width:120;height:62" onClick="history.go()"><b>Resetar</b></button>
  </div>
  <div class="cfclear"> </div>
</div>

Hi nkornel,

I suspect that the problem may be that you need to specify the value of display to change to. For example:

 $ ('text_6').setStyle('display', 'block');

Bob

Bob,

if I use 'block' instead of none, it doesn't work at all.

Sincerely,

Kornel Mergulhão
Gantech Ltda

Hi nkornel,

True - but I meant to suggest that you use 'display', 'block' instead of 'display', ''

Bob

Hello Bob,

That is also True, and what I meant is that doesn't matter if I use 'display', 'block'; or 'display','' it doesn't work.

Sincerely,

Kornel Mergulhão

Hi Kornel,

I found three possible problems:

a) There are some spaces in $ ('id') -- they don't seem to be much of a problem.

b) Some of your ids are not unique (you have used text_6 on two different elements)

c) IE doens' seem to recongise the onChange event until something else is clicked, onClick works much better.

Here's the amended javascript - I amended the HTML by adding div_ in front of the id of the divs you want to turn on and off e.g. <div id="div_text_6" style='display:none;'>

window.addEvent('domready', function() {
   var selectDiv = function() {
      if ( $('check00').checked == true ) {
        $('div_text_6').setStyle('display', 'block');
      } else {
        $('div_text_6').setStyle('display', 'none');
      }
      if ( $('check01').checked == true) {
        $('div_text_10').setStyle('display','block');
      } else {
        $('div_text_10').setStyle('display', 'none');
      }
      if  ( $('check02').checked == true) {
        $('div_select_12').setStyle('display','block');
      } else {
        $('div_select_12').setStyle('display', 'none');
      }
   };
   $('check00').addEvent ('click', selectDiv);
   $('check01').addEvent ('click', selectDiv);
   $('check02').addEvent ('click', selectDiv);
});

Bob

Hello Bob,

Hope everything is fine. I checked the code, and it didn't work in the way that you sent it.
I kept everything in the original position, and just changed the 'changed' event to 'click' as you suggested and it started to work.

Thank you

Sincerely,

Kornel Mergulhão

Hi Kornel,

Great, glad you got it working.

Bob