What is JotForm?
JotForm is a free online form builder which helps you create online forms without writing a single line of code. No sign-up required.
At JotForm, we want to make sure that you’re getting the online form builder help that you need. Our friendly customer support team is available 24/7.
We believe that if one user has a question, there could be more users who may have the same question. This is why many of our support forum threads are public and available to be searched and viewed. If you’d like help immediately, feel free to search for a similar question, or submit your question or concern.
JS errors in Jotform script when custom script is added to source - form collapse not togglingAsked by emilevdende on January 13, 2014 at 09:53 AM
I just managed to include some sort of notification on my form, telling the user that the form is ready to use.
The way I did this, is by using a jQuery plugin called Gritter and I included it to run everytime the document finishes loading (document.ready).
Now it currently works like it should, however one of the Jotform scripts is giving an error. My technical knowledge is not too advanced; I can read the HTML/CSS/JS a bit, but chances are that I made a rookie mistake :)
Can you please take a look at the source to see if you know why I'm getting the JS errors (see attachment) when I inspect the page? The errors are actually not breaking the form (except the yellow highlighting does not work), but I don't feel comfortable with errors :)
Form with the notification included (JS error):
Form without the notification included (no JS error):
The forms are, apart from the language, identical.
Thanks a lot!
Upon checking your form I found that the first form collapse will not open. To resolve the issue, please use the next nonconflict function. Insert it just after the form source code and before your jQuery plugin as shown in the image:
Please inform us if the issue still persists.
Thanks for your quick reply!
I added the noconflict function just like you say, but it still does not work. Indeed, the form collapse broke and an extra JS error is shown.
You can see it here:
Do you have another suggestion?
You can try the following to stop the conflict between the prototype script from the form and the jQuery script on your page.
** The highlighted parts are the ones changed.
var $j = jQuery.noConflict();
// global setting override
class_name: 'gritter-light', // for light notifications (can be added directly to $.gritter.add too)
position: 'bottom-left', // possibilities: bottom-left, bottom-right, top-left, top-right
fade_in_speed: 100, // how fast notifications fade in (string or int)
fade_out_speed: 100, // how fast the notices fade out
time: 3000 // hang on the screen for...
// (string | mandatory) the heading of the notification
title: 'Voer een nieuwe lead in',
// (string | mandatory) the text inside the notification
//text: 'Je kunt nu een nieuwe lead invoeren',
// (string | optional) the image to display on the left
Here's a working demo: http://shots.jotform.com/elton/workaround/noconflict_316574.html
Works like a charm!
Thank you and EliezerN for the great service, as always!
We're very happy to hear that, Emile!
If ever you need assistance with anything else JotForm related, please let us know.
Ciao for now :)
Thank you for the additional comments about my colleagues previous solutions.
If you end up needing help or have more questions about anything just let us know via a new thread.