Forums

Show/Hide required fields

rainbow 20 Nov, 2009
Hi, i purchased a subscription for this excellent product and now i need a little help.
I need to show/hide required fields ("text_0" and "text_1") with validation by radio buttons ("tipo_cliente_0" and "tipo_cliente_1") in the easy way.
I tried with livevalidation without success on internet explorer (http://www.chronoengine.com/forums/index.php?option=com_chronoforums&cont=posts&f=2&t=16391)
To test i can use this little code

<div class="form_item">
  <div class="form_element cf_dropdown">
    <label class="cf_label" style="width: 130px;">Quantità <span style="color: #3B8987;font-weight:bold;">*</span></label>
    <select class="cf_inputbox validate-selection" id="select_5" size="1" title="Scegliete una quantità."  name="numero_camere">
    <option value="">Scegliete una quantità</option>
      <option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>

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

<div class="form_item">
  <div class="form_element cf_radiobutton">
    <label class="cf_label" style="width: 130px;">Azienda/privato <span style="color: #3B8987;font-weight:bold;">*</span></label>
    <div class="float_left">
      <input value="Privato" title="Indicate se Privato o Azienda." class="radio validate-one-required" id="tipo_cliente_0" name="tipo_cliente" type="radio" />
      <label for="tipo_cliente_0" class="radio_label">Privato</label>
      <br />
     
<input value="Azienda" title="Indicate se Privato o Azienda." class="radio validate-one-required" id="tipo_cliente_1" name="tipo_cliente" type="radio" />
      <label for="tipo_cliente_1" class="radio_label">Azienda</label>
      <br />
     

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

<div class="form_item">
  <div class="form_element cf_textbox">
    <label class="cf_label" style="width: 130px;">Ragione Sociale <span style="color: #3B8987;font-weight:bold;">*</span></label>
    <input class="cf_inputbox required validate-alphanum" maxlength="100" size="30" title="Indicate la Ragione Sociale." id="text_0" name="rag_sociale" type="text" />
  </div>
  <div class="cfclear"> </div>
</div>

<div class="form_item">
  <div class="form_element cf_textbox">
    <label class="cf_label" style="width: 130px;">Partita IVA <span style="color: #3B8987;font-weight:bold;">*</span></label>
    <input class="cf_inputbox required validate-number" maxlength="11" size="30" title="Indicate la Partita IVA." id="text_1" name="p_iva" type="text" />
  </div>
  <div class="cfclear"> </div>
</div>

<div class="form_item">
  <div class="form_element cf_button">
    <input style="position: relative; left: 220px;" class="button" value="Invia" name="button_17" type="submit" />
  </div>
  <div class="cfclear"> </div>
</div>

How can i solve this question in the easy way?
I don't ask you to customize the code, I'll test it with your help.
Thanks.
rainbow 25 Nov, 2009
I solved with traditional javascript

function SetToggle(flag) {
 	if (flag == true) {
 		document.getElementById('rag_soc_div').style.display = 'block';
                document.getElementById('p_iva_div').style.display = 'block';
                // To enable field validation reset values
                document.getElementById('text_0').value = '';
                document.getElementById('text_1').value = '';
 	}
 	else {
 		document.getElementById('rag_soc_div').style.display = 'none';
                document.getElementById('p_iva_div').style.display = 'none';
                // To disable field validation put a dummy value
                document.getElementById('text_0').value = ' ';
                document.getElementById('text_1').value = ' ';
 	}
 }



<div class="form_item">
  <div class="form_element cf_dropdown">
    <label class="cf_label" style="width: 130px;">Quantità <span style="color: #3B8987;font-weight:bold;">*</span></label>
    <select class="cf_inputbox validate-selection" id="select_5" size="1" title="Scegliete una quantità."  name="numero_camere">
    <option value="">Scegliete una quantità</option>
      <option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>

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

<div class="form_item">
  <div class="form_element cf_radiobutton">
    <label class="cf_label" style="width: 130px;">Azienda/privato <span style="color: #3B8987;font-weight:bold;">*</span></label>
    <div class="float_left">
      <input value="Privato" title="Indicate se Privato o Azienda." class="radio validate-one-required" id="tipo_cliente_0" name="tipo_cliente" type="radio" onClick="SetToggle(false)" />
      <label for="tipo_cliente_0" class="radio_label">Privato</label>
      <br />
     
<input value="Azienda" title="Indicate se Privato o Azienda." class="radio validate-one-required" id="tipo_cliente_1" name="tipo_cliente" type="radio" onClick="SetToggle(true)" />
      <label for="tipo_cliente_1" class="radio_label">Azienda</label>
      <br />
     

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

<div class="form_item" id='rag_soc_div' style='display:none;'>
  <div class="form_element cf_textbox">
    <label class="cf_label" style="width: 130px;">Ragione Sociale <span style="color: #3B8987;font-weight:bold;">*</span></label>
    <input class="cf_inputbox required validate-alphanum" maxlength="100" size="30" title="Indicate la Ragione Sociale." id="text_0" name="rag_sociale" type="text" />
  </div>
  <div class="cfclear"> </div>
</div>

<div class="form_item" id='p_iva_div' style='display:none;'>
  <div class="form_element cf_textbox">
    <label class="cf_label" style="width: 130px;">Partita IVA <span style="color: #3B8987;font-weight:bold;">*</span></label>
    <input class="cf_inputbox required validate-number" maxlength="11" size="30" title="Indicate la Partita IVA." id="text_1" name="p_iva" type="text" />
  </div>
  <div class="cfclear"> </div>
</div>

<div class="form_item">
  <div class="form_element cf_button">
    <input style="position: relative; left: 220px;" class="button" value="Invia" name="button_17" type="submit" />
  </div>
  <div class="cfclear"> </div>
</div>
GreyHead 25 Nov, 2009
Hi rainbow,

Great - does this solve the problem of cancelling the validation on the hidden inputs?

Bob
rainbow 25 Nov, 2009
Hi GreyHead,
yes it's only necessary to assign a dummy value to each hidden input.
GreyHead 25 Nov, 2009
Hi rainbow,

Ahh - very neat. I noticed the value=' ' but hadn't realised that's what it was doing. Thank you.

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