topic Hubpsot Form clearing check boxes when leveraging JavaScript in CMS Development

Hubpsot Form clearing check boxes when leveraging JavaScript

ben_groneman — Fri, 05 Oct 2018 15:45:25 GMT

I am currently attempting to leverage JS to map clicks on a 'pseudo' checkbox to the actual form checkboxes so that the data sent from the form can still be added to our workflow, and maintain contact properties for the user. A partial code snippet is shown below.

/**
 * Handles the click event and delegates what state the checkboxes should be in
 *  @author - Ben G.
 */
function handleClickEvent(isChecked, element) {
switch(isChecked) {
    case true:
      element.prop("checked", true).change();
      break;
    case false:
      element.prop("checked", false).change();
      break;
    case null:
      console.log("Something is awry the value of checked is: " + isChecked);
  }

I am using the .change() function in order to make the change on the HubSpot side of the form. However, the issue that I am running into is that once the user goes to fill out the form, and they move onto a different form field, the checkboxes are immediately cleared. This behavior doesn't occur when the user actually clicks the checkboxes, so this has left me to be rather stumped.

Any help regarding this issue will be greatly appreciated, thank you!

Re: Hubpsot Form clearing check boxes when leveraging JavaScript

tjoyce — Fri, 05 Oct 2018 17:55:53 GMT

@ben_groneman - Is this an embed code? or the form module in the Design Manager?

If it's a form module, you should use the global form events to wrap your code after the form has loaded on the page https://developers.hubspot.com/global-form-events

If it's an embed code, use the onFormReady callback function in the embed code.

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.

Re: Hubpsot Form clearing check boxes when leveraging JavaScript

ben_groneman — Fri, 05 Oct 2018 19:25:16 GMT

tjoyce,

Thanks for the speedy reply!

This is a form module in the Design Manager. I think that global from events is a step in the right direction. Thank you for sending this my way.

by 'wrap your code' do you essentially mean that the JS that I have written should use the eventListener mentioned (in the Hubspot Documentation) to instantiate the functions that I have created? I am currently using the following code to wait until the entire DOM has loaded to enqueue my functions.

window.onload = function() {
  setRealInputClasses();
  setPseudoInputClasses();
  initializeEventListeners();
};

I have a link shown below that will show you the exact issue that I am experiencing. Please let me know if you have any questions, if we work together I think we could very well solve this issue. Thank you!

Video of Issue

Re: Hubpsot Form clearing check boxes when leveraging JavaScript

tjoyce — Fri, 05 Oct 2018 19:31:28 GMT

@ben_groneman - Yes, you're right, call your function from the onFormready. Doing the window.onload won't quite cut it because the window isn't aware of the form that's pulling in through the ajax call.

Re: Hubpsot Form clearing check boxes when leveraging JavaScript

ben_groneman — Fri, 05 Oct 2018 20:39:25 GMT

My apologies,

I don't believe that I am understanding what you mean by this. I have tried the following blocks of code, with no avail.

window.addEventListener('message', event => {
   if(event.data.type === 'hsFormCallback' && event.data.eventName === 'onFormReady') {
       setRealInputClasses();
       setPseudoInputClasses();
       initializeEventListeners();
       console.log("Form Submitted!");
   }
});

hbspt.forms.create({ 
    portalId: 'xxxxx',
    formId: 'aa8b5b4a-62ac-461b-a387-XXXXXXXXXXX',
    onFormReady($form, ctx){
      setRealInputClasses();
      setPseudoInputClasses();
      initializeEventListeners();
   	}
  });

The first code block I attempted did not go through because of the if statement would loop a few times, and continually return a false value.

The second code block would not register because 'forms' was undefined.

I am not sure where the disconnect here might be, but I feel as if I am not fully grasping why the form would be resetting the checkboxes based on a users event.

Re: Hubpsot Form clearing check boxes when leveraging JavaScript

tjoyce — Mon, 08 Oct 2018 12:44:03 GMT

@ben_groneman - I'm not entirely sure what the root cause is but, you're trigger('change') is either not firing properly, or not bubbling propperly. If I change your code to

	switch (b)
	{
	case true:
		a.click();
		break;
	case false:
		a.prop("checked", false).change();
		break;
	case null:
		console.log("Something is awry the value of checked is: " + b)

simulating a click is working fine, but changing the prop manually does not. Maybe this will help you in debugging.

Re: Hubpsot Form clearing check boxes when leveraging JavaScript

ben_groneman — Tue, 09 Oct 2018 15:13:40 GMT

tjoyce,

Thank you so much for helping me debug this issue. Upon changing the action to be a click, and changing the window.onload function, I was able to solve this issue.

Your help is greatly appreciated. I hope that others can benefit from this posting as well!

Best wishes,

~ B