Forums

Hi,

I've got some problems with Chronoforms and conditional fields. I already searched on this forum to look for a solution but despite the help I found on some of te topics, I cannot get the form working correctly.

I have a form with some conditional fields. If I check a checkbox, a div appears, with some required fields. But if I do not check the box, the fields must not be required. And that is my problem. The fields stay required.

I tried everything. Made them at start required/not required, but it seems that if I check the box, the addClass and/or removeClass doenst work, doesnt respond. Is it even possible on this way or not?

I made the form in Wizard, and then added my functionality manual.

Here is my code:

Form code:

<div class="ccms_form_element cfdiv_header" id="autoID-7a78412b58858a456ca310a7440c7251_container_div"><h2>Kampeermiddel 2</h2><div class="clear"></div></div><div class="ccms_form_element cfdiv_checkbox" id="kamp2check_container_div"><input type="hidden" name="kamp2check" value="" alt="ghost" />
<input value="1" id="kamp2check" title="" type="checkbox" name="kamp2check" class="label_left" />
<div class="clear"></div><div id="error-message-kamp2check"></div></div>

<div id="kamp2div" name="kamp2div">
<div class="ccms_form_element cfdiv_text multiline_start" id="aantal_container_div"><label for="aantal">Aantal & Type</label><input id="aantal" maxlength="150" size="30" class=" validate['required']" title="" type="text" value="" name="aantal" />
<div class="clear"></div><div id="error-message-aantal"></div></div><div class="ccms_form_element cfdiv_select multiline_add" id="kamp2type_container_div"><select size="1" id="kamp2type" class=" validate['required']" title="" name="kamp2type">
<option value="">(selecteer)</option>
<option value="Camper(s)">Camper(s)</option>
<option value="Caravan(s)">Caravan(s)</option>
<option value="Vouwwagen(s)">Vouwwagen(s)</option>
<option value="Tent(en)">Tent(en)</option>
</select>
<div class="clear"></div><div id="error-message-kamp2type"></div></div><div class="ccms_form_element cfdiv_text" id="kamp2lengte_container_div"><label for="kamp2lengte">Lengte (m)</label><input id="kamp2lengte" maxlength="150" size="30" class=" validate['required']" title="" type="text" value="" name="kamp2lengte" />
<div class="clear"></div><div id="error-message-kamp2lengte"></div></div></div>

<div class="ccms_form_element cfdiv_header" id="autoID-66fd7c3492bbcbdc0b64515cab171748_container_div"><h2>Kampeermiddel 3</h2><div class="clear"></div></div><div class="ccms_form_element cfdiv_checkbox" id="kamp3check_container_div"><input type="hidden" name="kamp3check" value="" alt="ghost" />
<input value="1" id="kamp3check" title="" type="checkbox" name="kamp3check" class="label_left" />
<div class="clear"></div><div id="error-message-kamp3check"></div></div>

<div id="kamp3div" name="kamp3div">
<div class="ccms_form_element cfdiv_text multiline_start" id="kamp3aantal_container_div"><label for="kamp3aantal">Aantal & Type</label><input id="kamp3aantal" maxlength="150" size="30" class=" validate['required']" title="" type="text" value="" name="kamp3aantal" />
<div class="clear"></div><div id="error-message-kamp3aantal"></div></div><div class="ccms_form_element cfdiv_select multiline_add" id="kamp3type_container_div"><select size="1" id="kamp3type" class=" validate['required']" title="" name="kamp3type">
<option value="">(selecteer)</option>
<option value="Camper(s)">Camper(s)</option>
<option value="Caravan(s)">Caravan(s)</option>
<option value="Vouwwagen(s)">Vouwwagen(s)</option>
<option value="Tent(en)">Tent(en)</option>
</select>
<div class="clear"></div><div id="error-message-kamp3type"></div></div><div class="ccms_form_element cfdiv_text" id="kamp3lengte_container_div"><label for="kamp3lengte">Lengte (m)</label><input id="kamp3lengte" maxlength="150" size="30" class=" validate['required']" title="" type="text" value="" name="kamp3lengte" />
<div class="clear"></div><div id="error-message-kamp3lengte"></div></div></div>

<div class="ccms_form_element cfdiv_submit" id="autoID-bb0cbf46af83faa1d64aaac3273a6259_container_div"><input name="input_submit_13" class="" value="Submit" type="submit" />
<div class="clear"></div><div id="error-message-input_submit_13"></div></div>

Javascript code:

window.addEvent('domready', function() 
{
       $('kamp2div').hide();
       $('kamp3div').hide();
       $('kamp2check').addEvent('change', myfunctionkamp2);
       $('kamp3check').addEvent('change', myfunctionkamp3);
       function myfunctionkamp2() 
	   {
          if($('kamp2check').checked == true) 
		  {
             //alert('kampeermiddel 2 checked');
             $('kamp2div').show();
             
             $('kamp2aantal').addClass("validate['required']");
             formCheck.register($('kamp2aantal'));
             
             $('kamp2type').addClass("validate['required']");
             formCheck.register($('kamp2type'));
             
             $('kamp2lengte').addClass("validate['required']");
             formCheck.register($('kamp2lengte'));

          }
		  if($('kamp2check').checked == false)
		  {
             //alert('kampeermiddel 2 not checked');
              $('kamp2div').hide();
            
             $('kamp2aantal').removeClass("validate['required']");
             $('kamp2aantal').value = '1';
                 formCheck.dispose($('kamp2aantal'));
             
             $('kamp2type').removeClass("validate['required']");
             formCheck.dispose($('kamp2type'));

             $('kamp2lengte').removeClass("validate['required']");
             $('kamp2lengte').value = '';
                 formCheck.dispose($('kamp2lengte'));

          }
       };
	    function myfunctionkamp3() 
		{
		  if($('kamp3check').checked == true)
		  {
			 //alert ('kampeermiddel 3 is checked');
			 $('kamp3div').show();
             
             $('kamp3aantal').addClass("validate['required']");
             formCheck.register($('kamp3aantal'));
             
             $('kamp3type').addClass("validate['required']");
             formCheck.register($('kamp3type'));
             
             $('kamp2lengte').addClass("validate['required']");
             formCheck.register($('kamp3lengte'));
		  
		  }
	     if($('kamp3check').checked == false)
	     {
		//alert ('kampeermiddel 3 is not checked');
		$('kamp3div').hide();
             
             $('kamp3aantal').removeClass("validate['required']");
             $('kamp3aantal').value = '1';
             formCheck.dispose($('kamp3aantal'));
             
             $('kamp3type').removeClass("validate['required']");
             formCheck.dispose($('kamp3type'));
             
             $('kamp3lengte').removeClass("validate['required']");
             $('kamp3lengte').value = '';
             formCheck.dispose($('kamp3lengte'));
	  }
       };
    });

Hi Huubs,

Adding and removing classes doesn't seem to be the best way to make this work. Instead leave the class in place but disable the hidden inputs (and probably clear their values too). Disabled inputs aren't validated so this has the same effect.

I've posted a couple of examples of this in the last few days.

Bob

Thanks for the advice. I got it working!