jQuery click function not working inside Chronoforms 6 form?

Hi! I have added some simple Jquery scripting to our site so users can click on a label of a text area to show this text area. It's in a simple 'call me' form with an optional remarks / question text field. I have added a little + sign before the label text and then use jQuery to hide the text area below the label. And when you click the label the text area slides down. At least, it did...

​

Since some CF6 update the jquery script is not working anymore. I believe the part that has the click function in it somehow fails. This is my jQuery code:

​

jQuery('textarea#vraag').hide();
jQuery("label[for='vraag']").css("cursor","pointer").click(function(){
jQuery(this).next('textarea').slideToggle();
});

​

The CSS is added to the label (pointer) but clicking on the label does nothing anymore... I think CF is somehow blocking the onclick function call that toggles the textarea?

​

Any thought on why? And how to fix this? It's just weird ;-)

​

Kind regards,
Jip

Hi Jip,

​

Please post a link to the form so we can see what is happening here.

​

Bob

https://www.raadadvocaten.nl/contact

​

I have disabled 'jQuery('textarea#vraag').hide();' to let users see this field until this issue is fixed. The other jQuery code is active on this site so clicking on the label should toggle the text area...

Hi Jip,

​

Maybe I'm looking in the wrong place but I couldn't find any JavaScript that would affect the text area :-(

​

Bob

The jQuery script is in an js file loaded from our custom template. Also we have a plugin that combines scripts. So it might be diffult to spot...

​

Bu the script is lading because you can see the ccs styling added by the script is there. (cursor=hand). Only the onclick part of this script is not working...

jQuery('textarea#vraag')

Don't you mean

jQuery('textarea #vraag')

or even just

jQuery('#vraag')

Let's make it a bit easier to test and debug. I have no added this jQuery script to the site:

​

jQuery("h3").css('color', 'grey');
jQuery("h3").click(function(){
alert("hello");
});

​

Now when you go to: https://www.raadadvocaten.nl/contact you will see:

​

1) All h3's are grey. So this works in the page content as well as in the CF6 module.

2) Click on any grey H3 in the content and the alert shows. Except for the one in the CF module.

​

Why?

​

Again, it looks like the 'click function' code in jQuery is not working inside the CD6 form module.

Hi,

​

It looks as though Semantic.UI may be 'taking over' the click events - see this page for some commands that might help.

​

Bob

Hi GreyHead, maybe that is the case, but I am not sure what to do to work around that. What commands are you referring to?

I also tried 'mouseover' in stead of 'click'. Same issue.

I would like to be able to add our own custom jQuery to the forms (including the click actions). But this issue makes this a bit hard. We could for now just forget about the hiding of the textarea and show it all the time. But I would like to understand why this is happening and how I can get this done for future projects. Hope someone can help me out.

​

There is no option in CF6 to not use Semantic UI for the forms? Or would that also break validation scripting? I don;t mind styling forms myself. For me it would be nice to be able to output the forms as simple as possible so we can style it ourselfs and add scripting where needed. But I do realize other (most?) users might prefer as much out-of-the-box as possible. But the validation scripting would need to stay though... But I am not sure this is related to Semantic UI?

Hi,

​

I'm not familiar enough with CFv6 to know exactly how this is working - I just checked the page in my Chrome web developer tools and noticed that the actions set was different.

​

Bob

Semantic UI cannot be decoupled from the forms, it's completely built on it. Put the jQuery code inside the form instead of on the page outside of it.

Thanks healyhatman, you pointend me in the right direction. I added a custom JavaScript action to the form and added the needed jQuery code there. This works. I did have to check the checkbox 'Add inside domready event' AND add the code between the document-ready tag 'jQuery(document).ready(function() { ... });' After this the code worked in the form.

​

Thanks for you help GreyHead an Healyhatman!