Manipulating Hubspot Form Using jQuery




I want to provide a check box that will select all available checkboxes in a form. I have inserted my jQuery (1.9.1) code into the embedded code but the All checkbox doesn't seem to trigger the rest of the checkboxes. Here is my embedded code:

    portalId: 'XXXXXX',
    onFormReady: function($form){
        XXXXXXXXXXXXXXXXXXXXXXXXXXXXXX:checkbox').change(function () {
            if($(this).prop("checked")) $('input:checkbox').prop('checked','checked');
            else $('input:checkbox').removeProp('checked');

I have tested my jQuery in jsFiddle and it works. What am I missing?


Hi @matthewmilligan,

Can you try adding .change() to the end of line 7? If you are using jQuery to manipulate the values of form inputs (i.e. using val() or prop()), you must trigger a change event using change() or trigger('change') for the change to properly register.


Hi @Derek_Gervais,

I added .change() like you said but now I get an error when I check the All checkbox. See below.

Uncaught RangeError: Maximum call stack size exceeded
at String.replace ()
at [as find] (jquery.min.js:4)
at init.find (jquery.min.js:4)
at new init (jquery.min.js:3)
at b (jquery.min.js:3)
at HTMLInputElement. (conferenceReg.html:18)
at HTMLInputElement.dispatch (jquery.min.js:3)
at HTMLInputElement.v.handle (jquery.min.js:3)
at Object.trigger (jquery.min.js:3)
at HTMLInputElement. (jquery.min.js:4)


Hi @matthewmilligan,

That means that you're hitting the stack limit; I'm not entirely sure how without seeing the full page/code, but it's generally due to some runaway recursive function. Could you be targeting the same element with your initial jQuery selector and with the selector in the if statement? Maybe that's causing a recursive change loop; every time it changes, it calls the callback that changes it again, etc. The following stack overflow topic has some more details on this error that might be helpful: