I don’t know much about Hubspot. I’m trying to modify a form for a customer. I need to use jQuery but when I try something as simple as a $document.ready() log to console I get “Uncaught ReferenceError: $ is not defined” in Chrome DevTools Console. I’ve tried the instructions shown here - Include jQuery across pages - but I’m not finding the same options described in that article.
And is javascript/jQuery availability determined by the type of Hubspot account?
Thanks for any input.
Steve R.
Hi @SRalston05 ,
HubSpot stopped supporting the latest jQuery version from the build-in option inside the settings where you can enable it. But when using the build in jQuery, you need to write it in full or wrap it like this.
Wrapper function:
jQuery(function($) {
var selector = $('.element');
}
Full
var selector = jQuery('.element');
But it’s even better to use vanilla JS so don’t have to rely on jQuery if it get’s disabled.
var selector = document.querySelector('.element');
It’s also good to check the article How to upgrade to the latest version of jQuery for extra information
What are you trying to achieve? There may be a better way to achieve it than jQuery.
If you’re trying to modify a Hubspot form $document.ready() won’t work anyway as you need to wait until after the form has loaded using a Global Form Event Listener like:
window.addEventListener('message', event => {
if(event.data.type === 'hsFormCallback' && event.data.eventName === 'onFormReady') {
// YOUR CODE HERE
}
});
Barry Grennan
There definitely may be a better way to do what I’m trying to do. I need to add the values of one set of checkboxes, a couple text fields, and a select input into a hidden text area. When the form is submitted, that field, along with some others, gets sent to a remote API. The main act of submitting the form works fine, I just need to get the values I mentioned into the text area, because the text area has a place in the API but the other fields do not.
