jquery add class not firing on hubspot form.

[dennisedson]

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!" );
   });
});

[tjoyce · Accepted solution]

Hello @dennisedson - 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 😄

---

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

Drop by and say Hi to me on slack.

[dennisedson]

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