jquery add class not firing on hubspot form.

SOLVE
Highlighted
Advisor | Platinum Partner

Hi, I am trying to add a class to a label when a checkbox is checked.  I have built it locally and it works fine, but when i added the code to hubspot, it doesn't seem to fire. 

As a test, I used jquery to add a test class to various elements on the page and it works everywhere except inside the form! 

It looks like no jquery that i write works in the form.  does hubspot block?

 

here is the code i am using:

$( document ).ready(function() {
    console.log( "I am firing!" );
  	$('input[type=checkbox]').on('change',function(e) {
    	$('.hs-form-booleancheckbox-display').toggleClass('checked');
    	console.log( "you did it!" );
   });
});

 

 

dennis
1 Accepted solution

Accepted Solutions
Regular Advisor | Gold Partner | HubSpot Certified Trainer

Hello @dennis_e - No, it's not being blocked, you're just not waiting long enough for those elements to appear before you run your script. The form is built dynamically after an ajax call so, document.ready wouldn't work here. 

You have a few options:

1. setInterval until the form field is in the DOM

2. Use embed code callback function of onFormReady

3. Use the global form callbacks for native forms using the forms module


If this answer helped, please, mark as solved Smiley Very Happy


tim@belch.io | forms.belch.io | Design your own Beautiful HubSpot Forms; No coding necessary.

 

Drop by and say Hi to me on slack.

Reply
0 Upvotes
2 Replies
Regular Advisor | Gold Partner | HubSpot Certified Trainer

Hello @dennis_e - No, it's not being blocked, you're just not waiting long enough for those elements to appear before you run your script. The form is built dynamically after an ajax call so, document.ready wouldn't work here. 

You have a few options:

1. setInterval until the form field is in the DOM

2. Use embed code callback function of onFormReady

3. Use the global form callbacks for native forms using the forms module


If this answer helped, please, mark as solved Smiley Very Happy


tim@belch.io | forms.belch.io | Design your own Beautiful HubSpot Forms; No coding necessary.

 

Drop by and say Hi to me on slack.

Reply
0 Upvotes
Advisor | Platinum Partner

That was the solve!  Thanks a bunch!  was driving me crazy

dennis