Forums

Conditional radio button shows other fields requies them

red5 09 Nov, 2011
When "yes" is selected on a radio button, I would like a hidden set of questions to appear with validation set to "required." If "no" is selected on the radio button, then I would like those questions to hide and the "required" validation to be removed.

Three threads discuss very similar issues, but I'm not sure how to proceed with this particular, simpler issue. Also, should I use PHP, JavaScript, or both? I am using ChronoForms 4.0 RC2.0. Here are the similar threads:
http://www.chronoengine.com/forums/index.php?option=com_chronoforums&cont=posts&f=26&t=24676

http://www.chronoengine.com/forums/index.php?option=com_chronoforums&cont=posts&f=2&t=20661&p=65797&hilit=radio+conditional#p65797

http://chronoengine.com/forums.html?cont=posts&p=45468#p45468
GreyHead 14 Nov, 2011
Hi red5,

Please see this post where I worked out a similar example.

Bob
red5 14 Nov, 2011

Hi red5,

Please see this post where I worked out a similar example.

Bob



Thank you, GreyHead.
Your code gave me the clues I needed to get this working. For now, I'm going to use a checkbox to trigger whether or not the conditional fields show. The JS, below, seems to be working well. The ID 'contactInfo' is a fieldset that I posted into the code view of the form. The fieldset contains the elements that I want to show or hide based on whether or not the checkbox is checked. Now, I just need to learn how to add elements to a parent div or fieldset using the wizard.😉

I'm sure this code would work just as well for the radio button, but the form is simple enough that a checkbox will do for now.



window.addEvent('domready', function() {
   $('contactInfo').hide();
   $('respondCheck').addEvent('change', myfunction);
   function myfunction() {
	   if($('respondCheck').checked == true) {
		   //alert('checked');
		    $('contactInfo').show();
		   
		   $('contactName').addClass("validate['required']");
		   formCheck.register($('contactName'));
		   
		   $('contactEmail').addClass("validate['required']");
		   formCheck.register($('contactEmail'));

	   } else {
		   //alert('not checked');
		    $('contactInfo').hide();
		   
		   $('contactName').value = '';
             formCheck.dispose($('contactName'));
		   
		   $('contactEmail').value = '';
             formCheck.dispose($('contactEmail'));

	   }
   };
});

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