Hiding fields in the selection of a RadioBox

Hello everyone,

I'm working with enthusiasm my first form with this wonderful component, I would like to hide / show fields in the selection of a RadioBox.

I tried this script but conflict with error handling.
In this topic I found some interesting, but I was not good enough, anyone can help me?

Here is my code:

<div class="ccms_form_element cfdiv_header" id="autoID-958ab9ec3cb61c214983065af29f8245_container_div" style="">
  <h2>Richiesta appuntamento - Invio documentazione</h2>
  <div class="clear"></div>
</div>
<div class="ccms_form_element cfdiv_text" id="autoID-ad9b43c74f49d890bb9b9d36d77ae0b3_container_div" style="">
  <label>Nome</label>
  <input maxlength="150" size="30" class=" validate['required','alpha']" title="" type="text" container_id="0" value="" name="nome" />
  <div title="Nome" rel="Devi inserire il tuo Nome" class="tooltipimg"><a href="#">?</a></div>
  <div class="small-message">Inserisci il tuo Nome</div>
  <div class="clear"></div>
  <div id="error-message-nome"></div>
</div>
<div class="ccms_form_element cfdiv_text" id="autoID-2650833f68fe00df9dd2804800dba6f8_container_div" style="">
  <label>Cognome</label>
  <input maxlength="150" size="30" class=" validate['required','alpha']" title="" type="text" container_id="0" value="" name="cognome" />
  <div title="Cognome" rel="Devi inserire il tuo Cognome" class="tooltipimg"><a href="#">?</a></div>
  <div class="small-message">Inserisci il tuo Cognome</div>
  <div class="clear"></div>
  <div id="error-message-cognome"></div>
</div>
<div class="ccms_form_element cfdiv_radio" id="autoID-1a6b25d28c1f68ddc0578f3fcfe9f21f_container_div" style="">
  <label>Tipologia</label>
  <input type="hidden" name="tipologia" value="" alt="ghost" />
  <div style="float:left; clear:none;">
    <input type="radio" name="tipologia" id="tipologia_0" title="" value="No" checked="checked" />
    <label for="tipologia_0">Persona fisica</label>
    <input type="radio" name="tipologia" id="tipologia_1" title="" value="Yes" />
    <label for="tipologia_1">Azienda</label>
  </div>
  <div title="Tipologia" rel="Devi scegliere la tipologia di appartenenza" class="tooltipimg"><a href="#">?</a></div>
  <div class="small-message">Scegli la tipologia di appartenenza</div>
  <div class="clear"></div>
  <div id="error-message-tipologia"></div>
</div>

<div id="dependent_group1">
<div class="ccms_form_element cfdiv_text" id="autoID-714c565a7227e146f1db1fec90cebc47_container_div" style="">
  <label>Indirizzo</label>
  <input maxlength="350" size="30" class=" validate['required','alphanum']" title="" type="text" container_id="0" value="" name="indirizzo" />
  <div title="Indirizzo" rel="Devi inserire l'indirizzo di residenza" class="tooltipimg"><a href="#">?</a></div>
  <div class="small-message">Inserire l'indirizzo di residenza</div>
  <div class="clear"></div>
  <div id="error-message-indirizzo"></div>
</div>
</div>

<div id="dependent_group2">
<div class="ccms_form_element cfdiv_text" id="autoID-844bb9dea2ffd91d34e31566e5c4a665_container_div" style="">
  <label>Ruolo</label>
  <input maxlength="150" size="30" class=" validate['required','alphanum']" title="" type="text" container_id="0" value="" name="ruolo" />
  <div title="Ruolo" rel="Devi inserire il ruolo all'interno dell'azienda" class="tooltipimg"><a href="#">?</a></div>
  <div class="small-message">Inserisci il ruolo all'interno dell'azienda</div>
  <div class="clear"></div>
  <div id="error-message-ruolo"></div>
</div>

<div class="ccms_form_element cfdiv_text" id="autoID-92c74d74c98b63a1faa06e6123fe5d1c_container_div" style="">
  <label>Azienda</label>
  <input maxlength="250" size="30" class=" validate['required','alphanum']" title="" type="text" container_id="0" value="" name="azienda" />
  <div title="Azienda" rel="Devi inserire il nome dell'Azienda" class="tooltipimg"><a href="#">?</a></div>
  <div class="small-message">Inserire il nome dell'Azienda</div>
  <div class="clear"></div>
  <div id="error-message-azienda"></div>
</div>

<div class="ccms_form_element cfdiv_text" id="autoID-990fa24c4018c95f78bedd99950b437a_container_div" style="">
  <label>Sede</label>
  <input maxlength="350" size="30" class=" validate['required','alphanum']" title="" type="text" container_id="0" value="" name="sede" />
  <div title="Sede" rel="Devi inserire l'indirizo della sede aziendale" class="tooltipimg"><a href="#">?</a></div>
  <div class="small-message">Inserire l'indirizo della sede aziendale</div>
  <div class="clear"></div>
  <div id="error-message-sede"></div>
</div>

window.addEvent('domready', function() {
    $('dependent_controller').addEvent('change', function() {
        if ($('tipologia_0').checked) {
            $('dependent_group1').setStyle('display', 'block');
        } else {
            $('dependent_group2').setStyle('display', 'none');
        }
    });
		
        // initialise the display
        if ($('tipologia_1').checked) {
            $('dependent_group2').setStyle('display', 'block');
        } else {
            $('dependent_group1').setStyle('display', 'none');
        }
    });

Forgive my English, I hope I was clear

I keep trying 😀

I tried this script:

function doClick(objRad){
if (objRad.value=="No"){
document.getElementById("azienda").style.display='none'; //hide azienda
document.getElementById("persona_fisica").style.display='block'; //show persona_fisica
}
else{
document.getElementById("persona_fisica").style.display='none'; //hide persona_fisica
document.getElementById("azienda").style.display='block'; //show azienda
}
}

This is the html code:

<div class="ccms_form_element cfdiv_header" id="autoID-17f7cad7ef37ce95c1e9cddc0ad4309b_container_div" style="">
  <h2>Richiesta appuntamento - Invio documentazione</h2>
  <div class="clear"></div>
</div>
<div class="ccms_form_element cfdiv_text" id="autoID-34e80911d0b890147f633f4c8ddae690_container_div" style="">
  <label>Nome</label>
  <input maxlength="150" size="30" class=" validate['required','alpha']" title="" type="text" container_id="0" value="" name="nome" />
  <div title="Nome" rel="Devi inserire il tuo Nome" class="tooltipimg"><a href="#">?</a></div>
  <div class="small-message">Inserisci il tuo Nome</div>
  <div class="clear"></div>
  <div id="error-message-nome"></div>
</div>
<div class="ccms_form_element cfdiv_text" id="autoID-d6fc62386233ea1fdfeec08ab29d8237_container_div" style="">
  <label>Cognome</label>
  <input maxlength="150" size="30" class=" validate['required','alpha']" title="" type="text" container_id="0" value="" name="cognome" />
  <div title="Cognome" rel="Devi inserire il tuo Cognome" class="tooltipimg"><a href="#">?</a></div>
  <div class="small-message">Inserisci il tuo Cognome</div>
  <div class="clear"></div>
  <div id="error-message-cognome"></div>
</div>
<div class="ccms_form_element cfdiv_radio" id="autoID-3f24be1af5ca489498c1d22307650996_container_div" style="">
  <label>Tipologia</label>
  <input type="hidden" name="tipologia" value="" alt="ghost" />
  <div style="float:left; clear:none;">
    <input type="radio" name="tipologia" id="tipologia_0" title="" value="No" onclick="doClick(this)" />
    <label for="tipologia_0">Persona fisica</label>
    <input type="radio" name="tipologia" id="tipologia_1" title="" value="Yes" onclick="doClick(this)" />
    <label for="tipologia_1">Azienda</label>
  </div>
  <div title="Tipologia" rel="Devi scegliere la tipologia di appartenenza" class="tooltipimg"><a href="#">?</a></div>
  <div class="small-message">Scegli la tipologia di appartenenza</div>
  <div class="clear"></div>
  <div id="error-message-tipologia"></div>
</div>
<div id="persona_fisica" style="display:none">
<div class="ccms_form_element cfdiv_text" id="autoID-07693141b853b0511d791f50351e45fb_container_div" style="">
  <label>Indirizzo</label>
  <input maxlength="350" size="30" class=" validate['required','alphanum']" title="" type="text" container_id="0" value="" name="indirizzo" />
  <div title="Indirizzo" rel="Devi inserire l'indirizzo di residenza" class="tooltipimg"><a href="#">?</a></div>
  <div class="small-message">Inserire l'indirizzo di residenza</div>
  <div class="clear"></div>
  <div id="error-message-indirizzo"></div>
</div>
</div>
<div id="azienda" style="display:none">
<div class="ccms_form_element cfdiv_text" id="autoID-07587ad5ae3d8d5fc8d2f50531ca056a_container_div" style="">
  <label>Ruolo</label>
  <input maxlength="150" size="30" class=" validate['required','alphanum']" title="" type="text" container_id="0" value="" name="ruolo" />
  <div title="Ruolo" rel="Devi inserire il ruolo all'interno dell'azienda" class="tooltipimg"><a href="#">?</a></div>
  <div class="small-message">Inserisci il ruolo all'interno dell'azienda</div>
  <div class="clear"></div>
  <div id="error-message-ruolo"></div>
</div>
<div class="ccms_form_element cfdiv_text" id="autoID-ecf548eac1e5d6ad233b2cb51407cfc5_container_div" style="">
  <label>Azienda</label>
  <input maxlength="250" size="30" class=" validate['required','alphanum']" title="" type="text" container_id="0" value="" name="azienda" />
  <div title="Azienda" rel="Devi inserire il nome dell'Azienda" class="tooltipimg"><a href="#">?</a></div>
  <div class="small-message">Inserire il nome dell'Azienda</div>
  <div class="clear"></div>
  <div id="error-message-azienda"></div>
</div>
<div class="ccms_form_element cfdiv_text" id="autoID-fac63f3a163a5efd06854d25c6a128a8_container_div" style="">
  <label>Sede</label>
  <input maxlength="350" size="30" class=" validate['required','alphanum']" title="" type="text" container_id="0" value="" name="sede" />
  <div title="Sede" rel="Devi inserire l'indirizo della sede aziendale" class="tooltipimg"><a href="#">?</a></div>
  <div class="small-message">Inserire l'indirizo della sede aziendale</div>
  <div class="clear"></div>
  <div id="error-message-sede"></div>
</div>

</div>

</div>

seems to have everything perfect but it works badly wrong data entry control checks, especially on the email field ...

Tips? Nobody has ever faced and solved the problem?

Hi Mino,

Please see this post - you need to disable the inputs as well as hide them or they will still be checked by the validation code.

Bob

You are absolutely right, the problem is but I have to improve my knowledge of javascript, I have to study more. Thank you very much for your attention. Take a fantastic job!