Buy Now
Sign in

jQuery click function not working inside Chronoforms 6 form?

jj135 , May 17 2019, 16:01
jj135 488
May 17 2019, 16:01 #386924
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
GreyHead 64
May 18 2019, 07:27 #386929
Hi Jip,
Please post a link to the form so we can see what is happening here.
Bob
ChronoForms technical support
If you'd like to buy me a coffee or two, thank you very much
jj135 488
May 18 2019, 12:59 #386933
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...
GreyHead 64
May 18 2019, 14:05 #386935
Hi Jip,
Maybe I'm looking in the wrong place but I couldn't find any JavaScript that would affect the text area :-(
Bob
ChronoForms technical support
If you'd like to buy me a coffee or two, thank you very much
jj135 488
May 18 2019, 14:14 #386936
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...
healyhatman 8
May 18 2019, 21:34 #386946
jQuery('textarea#vraag')
Don't you mean
jQuery('textarea #vraag')
or even just
jQuery('#vraag')
Web developer at SkySpider.com.au - I DO NOT work for ChronoEngine!
Donations: paypal.me/healyhatman
Professional Work: kamron@skyspider.com.au
Custom CF / CC Plugins and Extensions: skyspider.com.au/store
jj135 488
May 19 2019, 15:19 #386959
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.
GreyHead 64
May 19 2019, 15:27 #386960
Hi,
It looks as though Semantic.UI may be 'taking over' the click events - see this page for some commands that might help.
Bob
ChronoForms technical support
If you'd like to buy me a coffee or two, thank you very much
jj135 488
May 19 2019, 15:34 #386961
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?
jj135 488
May 20 2019, 10:26 #386970
I also tried 'mouseover' in stead of 'click'. Same issue.
jj135 488
May 20 2019, 10:32 #386971
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?
GreyHead 64
May 21 2019, 08:08 #386987
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
ChronoForms technical support
If you'd like to buy me a coffee or two, thank you very much
healyhatman 8
May 21 2019, 08:39 #386991
 Answer
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.
Web developer at SkySpider.com.au - I DO NOT work for ChronoEngine!
Donations: paypal.me/healyhatman
Professional Work: kamron@skyspider.com.au
Custom CF / CC Plugins and Extensions: skyspider.com.au/store
jj135 488
May 22 2019, 07:57 #387010
 Answer
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!