Trouble w Showing / Hiding Container w/ Checkbox

Overview

The issue is caused by a bug in the built-in event handling for checkboxes, which fails to properly detect the checkbox state.
Remove any existing events from the checkbox group and use a custom JavaScript action to handle the show/hide functionality, ensuring the correct checkbox ID is referenced.

tw twelvethirtyfive 22 Apr, 2015

Hi there,

I've seen a few posts on this forum re: this subject and I've tried many of the suggestions with no success. The container shows up when the checkbox is checked, but it doesn't hide when it's unchecked.

My form layout:
http://prntscr.com/6wrent

My checkbox event settings:
http://prntscr.com/6wrehf
http://prntscr.com/6wre4y

What might I be missing here?

Thanks for your help!!

Gr GreyHead 22 Apr, 2015

Hi twelvethirtyfive,

The images look OK but don't' show all the detail. What is the id of the container you are using?

Bob

tw twelvethirtyfive 22 Apr, 2015

Hi there,

Thanks for getting back so quickly. I apologize, I thought the id was displaying in the first screenshot link because my title and id are the same, "business_details". Here is a screenshot: http://prntscr.com/6ws57j

Thanks again!

tw twelvethirtyfive 29 Apr, 2015

Hey there,

Sorry to bother. Any idea what I'm doing wrong with getting this container to toggle with the checkbox?

Thanks so much!

Jb

tw twelvethirtyfive 30 Apr, 2015

Still banging my head against the wall with getting my first form setup and functioning properly.

Having moved on past the trouble I'm having getting the show/hide to work, now I'm not able to get my form to send at all, and it's throwing an error on that same Checkbox Group element, stating that I need to "Please make at least 1 selection(s)", but as far as I can tell it's not set as a required field? Is this maybe a clue as to why the show/hide toggle event isn't functioning properly?

Here is a screenshot of the error I'm getting on submit: http://prntscr.com/6zz02t

Thanks for your help!

Jb

Gr GreyHead 02 May, 2015

Hi twelvethirtyfive,

Sorry but the screenshot doesn’t tell us anything useful. Please post a link to the form so I can take a quick look.

Bob

tw twelvethirtyfive 02 May, 2015

Oh, sorry ... here you go: http://creatrix.elizabeththorson.com/contact/consultation-request-form

Thanks so much!

Gr GreyHead 09 May, 2015

Hi twelvethirtyfive,

Part of the problem is that when the form is viewed in the template the tooltips are being moved down by a few hundred pixels so they no longer line up correctly, The error you are seeing is from the previous checkbox group which is required.

I'm not clear why that is happening - if you view the form without the template it looks OK.

Bob

tw twelvethirtyfive 09 May, 2015

Ahhhh interesting ... okay, I'll see if I can isolate why that's happening. So I think the only remaining issue I'm having is with getting my container to properly show/hide/toggle with the checkbox (from the initial question in this thread) ... any further suggestions on what I'm doing wrong there?

Thanks for all your help!!

Jb

tw twelvethirtyfive 18 May, 2015

Hey there.

Any chance I could get a follow up on this thread? Any assistance with getting this form working would be greatly appreciated!!

Jb

Gr GreyHead 20 May, 2015

Answer

Hi Jb,

As far as I can make out the built-in events don't handle a checkbox correctly :-(

I have got this to work with some Custom JavaScript in a Load JavaScript action:

jQuery(document).ready(function(jQ) {
  jQ('#service_requested5').on('click', function() {
    if ( jQ(this).is(':checked') ) {
      jQ('#business_details').show();
      jQ('#business_details :input').prop('disabled', false);
    } else {
      jQ('#business_details').hide();
      jQ('#business_details :input').val('');
      jQ('#business_details :input').prop('disabled', true);
    }
  });
});

Note that service_requested5 is the ID of the checkbox that is triggering the action. If you edit the form later this id may change (5 will be replaced by another number) in which case you need to edit the code to match.

There is additional code here to:
+ empty any values when the fieldset is hidden so they aren't preserved hidden.
+ set the hidden inputs to disabled so that any validations are ignored, this will also mean that those inputs are not submitted when the form is submitted.

Bob

tw twelvethirtyfive 21 May, 2015

Oh beautiful!! Thank you so much for your help with this.

So for my future knowledge ... was the initial issue something that was a bug in the system, or was it something I did wrong?

tw twelvethirtyfive 21 May, 2015

I was also hoping we could go back to the last remaining issue I'm up against with my form in this template.

Earlier in this thread you identified an issue with my template and the display of the tooltips. Now that I've looked at how those tooltips are positioned and they seem to be generating hard coded absolute position values.

Part of the problem is that when the form is viewed in the template the tooltips are being moved down by a few hundred pixels so they no longer line up correctly, The error you are seeing is from the previous checkbox group which is required.

I'm not clear why that is happening - if you view the form without the template it looks OK.

Bob

I'm a little baffled as to how that's done, and am even more lost as to where to start in building a fix. Can you enlighten me at all as to how those tooltips positions are determined and/or offer a suggestion on how to fix my problem?

Thank you SO much for your help so far... You've been a huge help! We are nearly ready to launch🙂

Jb

Gr GreyHead 21 May, 2015

Hi Jb,

The problem with the Event handling appears to be a ChronoForms bug. It auto-generates a selector like this that just doesn't select :-(

$("[name='service_requested[]'][value!='Intuitive Business Strategy Consult']").prop("checked"))

I'm not clear why it doesn't select, the syntax looks OK - maybe the array name trips it up???

I can't see exactly why the tooltips are misplacing - I suspect it may be related to the sliding headers in the template throwing off a calculation somehow. As a workaround please try this CSS which replaces the floating tooltips with fixed ones that show under the related input.

.gtooltip.gvalidation-error-tip {
  position: static !important;
}

Bob

tw twelvethirtyfive 22 May, 2015

Bob!! Thank you so much for the quick fix!!

I was running my final tests and I discovered what I'm hoping is my last issue with the show/hide container on a checkbox toggle. The show/hide is working as expected EXCEPT when in combination with the first checkbox in the group. When the first checkbox is checked container disappears ....

Any ideas?

Screenshot: http://prntscr.com/785yec

Thanks again!!

Jb

Gr GreyHead 23 May, 2015

Hi Jb,

I tested and found the same - removing the old, now un-needed, events from the CheckBox group fixed it on my test form.

Bob

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

Trouble w Showing / Hiding Container w/ Checkbox

How to fix a container that shows but doesn't hide when toggling a checkbox in ChronoForms.

Overview