Javascript validation did not work in my forms

I followed the tutorial from http://www.chronoengine.com/faqs/2645-how-can-i-showhide-a-textarea-when-a-checkbox-is-clicked.html
But my form did not working as the demo from greyhead. When viewed source i realized that the different between 2 version is:
on Greyhead

//<![CDATA[
			var checkbox_id, div, textarea_id, checkbox, textarea;
  checkbox_id = 'checkbox';
  textarea_id = 'textarea';

window.addEvent('domready', function() {
  checkbox = $(checkbox_id);
  textarea = $(textarea_id);
  div = $(textarea_id+'_container_div');
  div.dissolve();
  showHide();
  checkbox.addEvent('click', showHide);
});

function showHide() {
  if ( checkbox.checked ) {
    div.reveal();
    textarea.disabled = false;
  } else {
    div.dissolve();
    textarea.value = '';
    textarea.disabled = true;
  }
}
		//]]>
		
//<![CDATA[
			window.addEvent('domready', function() {
				document.id('chronoform_demo_hidden_textarea').addClass('hasValidation');
				formCheck_demo_hidden_textarea = new FormCheckMax('chronoform_demo_hidden_textarea', {
					onValidateSuccess: $empty,
					display : {
						showErrors : 0,
						errorsLocation: 1					}
				});										
			});
			
//]]>

On my forms

//<![CDATA[
var checkboxes;window.addEvent('domready',function(){var i,checkbox,textarea,div;checkboxes={};checkboxes['checkbox']='textarea';for(i in checkboxes){checkbox=$(i);textbox=$(checkboxes[i]);div=$(textbox.id+'_container_div');div.dissolve();showHide(i);addEventToCheckbox(checkbox);}
function addEventToCheckbox(checkbox){checkbox.addEvent('click',function(event){showHide(event.target.id);});}});function showHide(id){var checkbox,textarea,div;if(typeof id=='undefined'){return;}
checkbox=$(id);textarea=checkboxes[id];div=$(textarea+'_container_div');textarea=$(textarea);if(checkbox.checked){div.setStyle('display','block');div.setStyle('display','block');textarea.disabled=false;}else{div.setStyle('display','none');textarea.value='';textarea.disabled=true;}}
window.addEvent('domready',function(){document.id('chronoform_check1').addClass('hasValidation');formCheck_check1=new FormCheckMax('chronoform_check1',{onValidateSuccess:$empty,display:{showErrors:0,errorsLocation:1}});});
//]]>

There was no [code]//]]>

//<![CDATA[[/code] in my form when compare to greyhead and I do not know how to fix this? Anyone please help.

Hi square_rinoa84,

The CDATA tags are not necessary and adding or leaving them out will not cause a problem with the JavaScript. If you added the coder using a Load JS action then I think that they are automatically added.

Please post a link to the form so I can take a quick look.

Bob

Dear Bob
Here is the link to my test forms. I tried to use default template and other template but it did not work.
http://apcphvn2013.com/apcph1/index.php/en/?option=com_chronoforms&chronoform=check1
http://apcphvn2013.com/apcph1/index.php/en/growers
I also attach a backup of my form.
[attachment=0]CFV4_FormsBackup.cf4bak.txt[/attachment]
Thank you.

Hi square_rinoa84,

I think that the main problem is that the ID of your textarea isn't set. Please add it and see if that resolves the problem.

Bob

PS It would also help debug if you had some line breaks in the JavaScript.

PPS I noticed that I haven't initialised the var textbox. It needs to be added to this line for tidiness.

    var i, checkbox, textarea, div, textbox;

Thanks Bob. It's work like a charm. I have another problem when replace textarea control with radio box control
here is my code and it did not work.

var checkbox_id, radio_id, checkbox, radio, div;
/* edit the next two lines to match the ids of the elements in your form */
checkbox_id = 'checkbox';
radio_id = 'radio';

window.addEvent('domready', function() {
  checkbox = $(checkbox_id);
  radio = $(radio_id);
  div = $(radio_id+'_container_div');
  div.dissolve();
  showHide();
  checkbox.addEvent('click', showHide);
});

function showHide() {
  if ( checkbox.checked ) {
    div.reveal();
    radio.each(function(item){
            item.disabled   = false;
        });

  } else {
    div.dissolve();
    radio.each(function(item){
            item.checked    = false;
            item.disabled   = true;
        });
  }
}

Hi square_rinoa84,

Please post a link to the form so I can take a quick look.

Bob

sorry bob I forgot to attach link in previous post. Here is it: http://apcphvn2013.com/apcph1/index.php?option=com_chronoforms&chronoform=check2

Thank you

Hi square_rinoa84,

If you check the Form HTML you'll see that the IDs of the radio buttons are radio_0 and radio_1 not plain radio.

Bob