Multiple conditional fields with one check box

Hello,

Using the script for more than one checkbox + textarea pair in this tutorial http://www.chronoengine.com/faqs/2645-how-can-i-showhide-a-textarea-when-a-checkbox-is-clicked.html how would I go about making it so a click on one check box revealed two or more fields?

Dan

Hi Dan,

I think is will work - with a little tweaking - provided that you wrap the inputs that you want to hide/show inside a <div> with a unique id either by using Custom code or a Container.

Bob

Thanks for the reply Bob. I'll give that a try.

I tried with a container, but it's not working. I can't change the container ID, but the system gave it an id of cf_container_30. My check box has an id of second_contact_check. Here's my code.

var checkboxes;
window.addEvent('domready', function() {
  var i, checkbox, textarea, div, textbox;
  checkboxes = {};
  // link the checkboxes and textarea ids here
  checkboxes['second_contact_check'] = 'cf_container_30';

  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.reveal();
    div.setStyle('display', 'block');
    textarea.disabled = false;
  } else {
    div.setStyle('display', 'none');
    //div.dissolve();
    textarea.value = '';
    textarea.disabled = true;
  }
}

Here's the form I'm playing with. It's on a live site, but the form is not live.
http://www.safesiteonline.com/index.php?option=com_chronoforms&chronoform=facilityregform2

How would I tweak this to work?

Dan

Hi fullfusion,

I think there's just a need to debug your code. There's a JavaScript error on the page because div is null where div is defined as $('cf_container_30_container_div') but the id of the div you are trying to hide is just 'cf_container_30'

Bob

PS You can use a Container of type 'custom' and add <div id='whatever_you_like' > and </div> in the start and end code boxes.

Thanks for your help, Bob.

I changed my container to custom and added the opening and closing div as you suggested with a class of "contact_2_container". I have that class in my script so the line appears as:

checkboxes['second_contact_check'] = 'contact_2_container';

I'm getting the error "div is null" for div.dissolve();

How would I fix that?

Dan

Any advice for how to fix this?

Hello? Bob, do you have any suggestions?

Hi fullfusion,

As far as I can see you are trying to dissolve a div with id='contact_2_container_container_div' but that doesn't exist; the div you have has an id='contact_2_container'

Just some debugging required . . .

Bob

I finally got it to work. I had to remove the + '_container_div' in the couple of places it shows up in the code. Thanks for you help, Bob, and for the tutorial to begin with! I've got to learn Javascript! 🙂

Hi fullfusion,

I think that the + '_container_div' when ChronoForms has named the divs, as you'd set yours by hand it wasn't needed.

Sorry to have been away, I had a virus problem yesterday and a client one today.

Bob

:) 🙂 🙂 Thanks a lot

Hi,

I up this old topic as i'm blocked concerning this feature.
It works for the first checkbox + textarea pair but for the second one which is a container of 4 text bloc i really don't arrive to do it.
The container is a custom one with

<div id="alterns_titles_container_div">

for the beginning and

</div>

at the end. (I try with just "alterns_titles" for the id, and that still doesn't work.)

The js is as mentionned in the FAQ :

var checkboxes;
window.addEvent('domready', function() {
  var i, checkbox, textarea, div, textbox;
  checkboxes = {};
  // link the checkboxes and textarea ids here
  checkboxes['altern_title_checkbox'] = 'altern_title';
  checkboxes['alterns_titles_checkbox'] = 'alterns_titles';

  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.reveal();
    div.setStyle('display', 'block');
    textarea.disabled = false;
  } else {
    div.setStyle('display', 'none');
    //div.dissolve();
    textarea.value = '';
    textarea.disabled = true;
  }
} 

You can find the form at this url : [no longer available, see the edit for solution]

If anybody has an idea about what i'm doing wrong.
Thanks in advance.

*****************************************************

Edit :

I checked the form that fullfusion have posted previously ( http://www.safesiteonline.com/index.php?option=com_chronoforms&chronoform=facilityregform2 ) and by using containers and his js it works.
My js is now :

var checkboxes;
window.addEvent('domready', function() {
  var i, checkbox, textarea, div, textbox;
  checkboxes = {};
  // link the checkboxes and textarea ids here
  checkboxes['altern_title_checkbox'] = 'altern_title';
  checkboxes['alterns_titles_checkbox'] = 'alterns_titles';

  for ( i in checkboxes ) {
    checkbox = $(i);
    textbox = $(checkboxes[i]);
    div = $(textbox.id);
    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);
  textarea = $(textarea);
  if(checkbox.checked) {
    div.setStyle('display', 'block');
    //div.reveal();
    div.setStyle('display', 'block');
    textarea.disabled = false;
  } else {
    div.setStyle('display', 'none');
    //div.dissolve();
    textarea.value = '';
    textarea.disabled = true;
  }
}

And we need to use a custom container even for a single text box otherwise there is a space like a jump line in the form.
The container should have

<div id="as_you_want">

for beginning and

</div>

as ending.

Hope this could help somebody🙂