All browsers are ok, but ie8?

po

porgigi 25 Mar, 2011

Hi,
the following code in the section "Form HTML" work fine if it runs in browsers other than IE8 (mozilla, chrome, opera, etc.) The property "required" field were not disabled by javascript.
How can I fix this?
thanks.


<h5 class="blue">DATI ASSOCIAZIONE <label id="modifica"></label></h5>
<div class="form_item">
  <div class="form_element cf_dropdown">
    <label class="cf_label" style="width: 150px;">ORGANIZZAZIONE</label>
    <select class="cf_inputbox validate-selection" id="select_organizzazione" size="1"  name="ORGANIZZAZIONE" disabled>
       <option value="0"> </option>
       <option value="1">Associazione</option>
       <option value="2">Gruppo Comunale</option>

    </select>
RIFERIMENTO FASCICOLO <input class="cf_inputbox" size="10" name="REF_ARCHIVIO" type="text" onchange="this.value=this.value.toUpperCase();"/>
  </div>
  <div class="cfclear"> </div>
</div>

<div id="DIVASSOCIAZIONE">
<div class="form_item">
  <h5 class="blue">REGISTRO STATUTO ASSOCIAZIONE</h5>
<div class="form_element cf_textbox">
    <label>UFFICIO</label>
    <input class="cf_inputbox required" maxlength="255" size="50" id="REG_UFFICIO" name="REG_UFFICIO" type="text" onchange="this.value=this.value.toUpperCase();"/>    
  NUMERO <input class="cf_inputbox required" maxlength="15" size="15" id="REG_STATUTO" name="REG_STATUTO" type="text" />
DATA <input class="cf_datetime required" id="REG_DATA" name="REG_DATA" type="text"/>
  </div>
  <div class="cfclear"> </div>
</div>

<div class="form_item">
<h5 class="blue">REGISTRO REGIONALE VOLONTARIATO</h5> 
  <div class="form_element cf_textbox">
    <label class="cf_label" style="width: 80px;">NUMERO°</label>
    <input class="cf_inputbox required" maxlength="15" size="15" id="RRV_NUMERO" name="RRV_NUMERO" type="text" />
  DECRETO G.R. NUMERO° <input class="cf_inputbox required validate-number" maxlength="15" size="15" id="RRV_DPGR_NUMERO" name="RRV_DPGR_NUMERO" type="text" />
  DEL <input class="cf_datetime required"  id="RRV_DPGR_DATA" name="RRV_DPGR_DATA" type="text" />

 </div>
  <div class="cfclear"> </div>
</div>
</div> <!-- FINE DIV ASSOCIAZIONE -->

<div id="DIVNUCLEO">
<div class="form_item">
  <h5 class="blue">NUCLEI COMUNALI</h5> 
  <div class="form_element cf_textbox">
    <label class="cf_label" style="width: 400px;">NUMERO DELIBERA DI COSTITUZIONE  DEL CONSIGLIO COMUNALE</label>
    <input class="cf_inputbox required" maxlength="15" size="12" id="NC_DEL_COSTIT_NUM" name="NC_DEL_COSTIT_NUM" type="text"/>
  DEL <input class="cf_datetime required" id="NC_DEL_COSTIT_DATA" name="NC_DEL_COSTIT_DATA" type="text"/>
  </div>
  <div class="cfclear"> </div>
</div>

<div class="form_item">
  <div class="form_element cf_textbox">
    <label class="cf_label" style="width: 400px;">NUMERO DELIBERA DI APPROVAZIONE STATUTO DEL C.C.</label>
    <input class="cf_inputbox required" maxlength="15" size="12" id="NC_DEL_REGOLAM_NUM" name="NC_DEL_REGOLAM_NUM" type="text" />
  DEL <input class="cf_datetime required" id="NC_DEL_REGOLAM_DATA" name="NC_DEL_REGOLAM_DATA" type="text" />
  </div>
  <div class="cfclear"> </div>
</div>
</div> <!-- FINE DIV GRUPPO -->

<?php  
       $selezione = JRequest::getVar('cids',0);  
       $db =& JFactory::getDBO();    
$query="
SELECT cf_id, recordtime, cf_user_id, name, ORGANIZZAZIONE
FROM liq_chronoforms_anagrafica, liq_users WHERE cf_user_id=id and cf_id=".$selezione.";
";
       $db->setQuery($query);            
       $selezionati = $db->loadAssocList();
       $ultimamodifica = $selezionati[0]['recordtime'];
       $dautente = $selezionati[0]['name'];
       $newlabel = "(Ultima modifica eseguita da ". $dautente." ";
       $newlabel = $newlabel. "in data: ". $ultimamodifica. ")" ; 

echo "<script language=\"JavaScript\">\n"; 
echo "document.getElementById(\"modifica\").innerHTML=\"$newlabel\";\n";
echo " if (document.getElementById(\"select_organizzazione\").value==1)\n";
echo " {\n";
echo " document.getElementById(\"DIVNUCLEO\").style.display=\"none\";\n";
echo " document.getElementById(\"DIVASSOCIAZIONE\").style.display=\"block\";\n";
echo " document.getElementById(\"NC_DEL_COSTIT_NUM\").setAttribute(\"class\", \"none\");\n";
echo " document.getElementById(\"NC_DEL_COSTIT_DATA\").setAttribute(\"class\", \"none\");\n";
echo " document.getElementById(\"NC_DEL_REGOLAM_NUM\").setAttribute(\"class\", \"none\");\n";
echo " document.getElementById(\"NC_DEL_REGOLAM_DATA\").setAttribute(\"class\", \"none\");\n";
echo " }\n";

echo " if (document.getElementById(\"select_organizzazione\").value==2)\n";
echo " {\n";
echo " document.getElementById(\"DIVASSOCIAZIONE\").style.display=\"none\";\n";
echo " document.getElementById(\"DIVNUCLEO\").style.display=\"block\";\n";

echo " document.getElementById(\"REG_UFFICIO\").setAttribute(\"class\", \"none\");\n";
echo " document.getElementById(\"REG_STATUTO\").setAttribute(\"class\", \"none\");\n";
echo " document.getElementById(\"REG_DATA\").setAttribute(\"class\", \"none\");\n";
echo " document.getElementById(\"RRV_NUMERO\").setAttribute(\"class\", \"none\");\n";
echo " document.getElementById(\"RRV_DPGR_NUMERO\").setAttribute(\"class\", \"none\");\n";
echo " document.getElementById(\"RRV_DPGR_DATA\").setAttribute(\"class\", \"none\");\n";
echo " }\n";
echo "</script>"; 
?>
<br><br><br>
<div class="form_item">
  <div class="form_element cf_button">
    <input value="Save" name="button_13" type="submit"/>
    <input type="reset" name="reset" value="Reset"/>
    <input type="button" value="back" onClick="javascript: history.go(-1)">
  </div>
  <div class="cfclear"> </div>
</div>

Gr

GreyHead 26 Mar, 2011

Hi porgigi,

This approach won't work with ChronoForms v3 because the validation is set when the form loads and changing the classes after that has no effect.

There's an alterntive approach to Hideable sections in [url=http://greyhead.net/how-to-docs/chronoforms-with-hideable-sections] this tutorial you can buy from my site.

I spent some time trying to understand what your code was doing. Here's the tidied up version that I got working (apart from the validation).

<h5 class="blue">DATI ASSOCIAZIONE
    <label id="modifica"></label>
</h5>
<div class="form_item">
    <div class="form_element cf_dropdown">
        <label class="cf_label" style="width: 150px;">ORGANIZZAZIONE</label>
        <select class="cf_inputbox validate-selection" id="select_organizzazione" size="1" name="ORGANIZZAZIONE" >
            <option value="">==?==</option>
            <option value="1">Associazione</option>
            <option value="2">Gruppo Comunale</option>
        </select>
        RIFERIMENTO FASCICOLO
        <input class="cf_inputbox" size="10" name="REF_ARCHIVIO" type="text" onchange="this.value=this.value.toUpperCase();"/>
    </div>
    <div class="cfclear"> </div>
</div>
<div id="DIVASSOCIAZIONE">
    <div class="form_item">
        <h5 class="blue">REGISTRO STATUTO ASSOCIAZIONE</h5>
        <div class="form_element cf_textbox">
            <label>UFFICIO</label>
            <input class="cf_inputbox required" maxlength="255" size="50" id="REG_UFFICIO" name="REG_UFFICIO" type="text" onchange="this.value=this.value.toUpperCase();"/>
            NUMERO
            <input class="cf_inputbox required" maxlength="15" size="15" id="REG_STATUTO" name="REG_STATUTO" type="text" />
            DATA
            <input class="cf_datetime required" id="REG_DATA" name="REG_DATA" type="text"/>
        </div>
        <div class="cfclear"> </div>
    </div>
    <div class="form_item">
        <h5 class="blue">REGISTRO REGIONALE VOLONTARIATO</h5>
        <div class="form_element cf_textbox">
            <label class="cf_label" style="width: 80px;">NUMERO°</label>
            <input class="cf_inputbox required" maxlength="15" size="15" id="RRV_NUMERO" name="RRV_NUMERO" type="text" />
            DECRETO G.R. NUMERO°
            <input class="cf_inputbox required validate-number" maxlength="15" size="15" id="RRV_DPGR_NUMERO" name="RRV_DPGR_NUMERO" type="text" />
            DEL
            <input class="cf_datetime required"  id="RRV_DPGR_DATA" name="RRV_DPGR_DATA" type="text" />
        </div>
        <div class="cfclear"> </div>
    </div>
</div>
<!-- FINE DIV ASSOCIAZIONE -->

<div id="DIVNUCLEO">
    <div class="form_item">
        <h5 class="blue">NUCLEI COMUNALI</h5>
        <div class="form_element cf_textbox">
            <label class="cf_label" style="width: 400px;">NUMERO DELIBERA DI COSTITUZIONE  DEL CONSIGLIO COMUNALE</label>
            <input class="cf_inputbox required" maxlength="15" size="12" id="NC_DEL_COSTIT_NUM" name="NC_DEL_COSTIT_NUM" type="text"/>
            DEL
            <input class="cf_datetime required" id="NC_DEL_COSTIT_DATA" name="NC_DEL_COSTIT_DATA" type="text"/>
        </div>
        <div class="cfclear"> </div>
    </div>
    <div class="form_item">
        <div class="form_element cf_textbox">
            <label class="cf_label" style="width: 400px;">NUMERO DELIBERA DI APPROVAZIONE STATUTO DEL C.C.</label>
            <input class="cf_inputbox required" maxlength="15" size="12" id="NC_DEL_REGOLAM_NUM" name="NC_DEL_REGOLAM_NUM" type="text" />
            DEL
            <input class="cf_datetime required" id="NC_DEL_REGOLAM_DATA" name="NC_DEL_REGOLAM_DATA" type="text" />
        </div>
        <div class="cfclear"> </div>
    </div>
</div>
<!-- FINE DIV GRUPPO -->

<?php 
$selezione = JRequest::getVar('cids',0); 
$db =& JFactory::getDBO();   
$query = "
  SELECT cf_id, recordtime, cf_user_id, name, ORGANIZZAZIONE
    FROM `#__chronoforms_anagrafica`, `#__users` 
    WHERE `cf_user_id` = `id` AND `cf_id` = ".$selezione.";
";
$db->setQuery($query);           
$selezionati = $db->loadAssocList();
$ultimamodifica = $selezionati[0]['recordtime'];
$dautente = $selezionati[0]['name'];
$newlabel = "(Ultima modifica eseguita da $dautente in data: $ultimamodifica)" ;
$script = "
window.addEvent('domready', function() {
  $('modifica').innerHTML = '$newlabel';
  $('select_organizzazione').addEvent('change', function() {
    if ( $('select_organizzazione').value == 1 ) {
      $('DIVNUCLEO').setStyle('display', 'none');
      $('DIVASSOCIAZIONE').setStyle('display', 'block');
      $('NC_DEL_COSTIT_NUM').setAttribute('class', '');
      $('NC_DEL_COSTIT_DATA').setAttribute('class', '');
      $('NC_DEL_REGOLAM_NUM').setAttribute('class', '');
      $('NC_DEL_REGOLAM_DATA').setAttribute('class', '');
    } else if ( $('select_organizzazione').value == 2 ) {
      $('DIVASSOCIAZIONE').setStyle('display', 'none');
      $('DIVNUCLEO').setStyle('display', 'block');
      $('REG_UFFICIO').setAttribute('class', '');
      $('REG_STATUTO').setAttribute('class', '');
      $('REG_DATA').setAttribute('class', '');
      $('RRV_NUMERO').setAttribute('class', '');
    }
  });
});
";
$doc =& JFactory::getDocument();
$doc->addScriptDeclaration($script);
?>
<br>
<br>
<br>
<div class="form_item">
    <div class="form_element cf_button">
        <input value="Save" name="button_13" type="submit"/>
        <input type="reset" name="reset" value="Reset"/>
        <input type="button" value="back" onClick="javascript: history.go(-1)">
    </div>
    <div class="cfclear"> </div>
</div>

This topic is locked and no more replies can be posted.