APIs & Integrations

domino-dseno
Member | Partner
Member | Partner

Hubspot form: programmatically set field value via jQuery

Hi Community,

I am trying to programmatically set the value of a form field using jQuery, with the following code:

$(‘input[name=“firstname”]’).val(“damiano”).change();

If I paste this code on Chrome console I see that the field changes, but then it gets updated with an empty value if I click on other fields.

The pages I am testing on are:

Donazione per il dispensario medico in Guatemala | MdB

Aiuta anche tu con un piccolo gesto per raccogliere fondi per il dispensario medico e le attività dell'ambulatorio nel Petén, in Guatemala


Code like the above used to work, as it is documented here http://developers.hubspot.com/manipulating-forms-with-jquery

I have opened a ticket on HS, and support is checking if it is really a bug.

Has someone of you experienced this behavior recently?

Thank you very much in advance of your help.

Damiano

35 Replies 35
Siddharth_Shukl
Member

Hubspot form: programmatically set field value via jQuery

I see the bug fixed in one of the instance. But need to confirm if it’s fixed universally for every hubspot instance.

Will post back once I’m assured. :slight_smile:

0 Upvotes
lucabartoli
Member | Diamond Partner
Member | Diamond Partner

Hubspot form: programmatically set field value via jQuery

On friday I had to use your event implementation, because it still not works for me.
Infact, the value got overridden by the “old values” from hubspot.
With your “notifyHubspot” react recognizes the first change and stops the overwriting.
Don’t know if it’s clear enough.

0 Upvotes
dan_hmonks
Member

Hubspot form: programmatically set field value via jQuery

@LucaBartoli, We too were having hard time in inserting values dynamically, into input box, now it seems to working.
We were not sure if it was from HS or from our end,whenever we import jquery library from cdn, it gave us error. This time we pasted library on page using hubl. $(‘input[name=“firstname”]’).val(“damiano”).change();
We got it working.

0 Upvotes
lucabartoli
Member | Diamond Partner
Member | Diamond Partner

Hubspot form: programmatically set field value via jQuery

We are using the hubspot provided jquery :frowning:
I think the problem is a little different, because we have no problems in notifying Hubspot normal changes. We have problems in notifying hubspot the first set-up of the fields.
This is necessary because Hubspot automatically selects the old values from the user, but does not notify the changes with any event. We need to reset the form due to this, because Hubspot is slower than our script. So, when we set values before hubspot set its ones, these are overwritten.

0 Upvotes
dan_hmonks
Member

Hubspot form: programmatically set field value via jQuery

@LucaBartoli
We got on hubspot forms with custom validation too, I hope this might also be intresting for you :slight_smile:

Hubspot COS, forms with custom validation

0 Upvotes
domino-dseno
Member | Partner
Member | Partner

Hubspot form: programmatically set field value via jQuery

I have good news.

The following code:

$('input[name="firstname"]').val("damiano").change();

is working again. HS must have fixed something in their library.

By the way I am waiting for HS official response to my ticket.

Kodish
Member

Hubspot form: programmatically set field value via jQuery

@damiano.seno.domino,

I have tried to based on your code. It’s not working myside. My below code is,

hbspt.forms.create({ 
portalId: '3042190',
formId: '2aa8ad7b-81a7-449e-8318-48cf1c26f4b8',
 onFormSubmit: function($form) {   		
	$('input[name="firstname"]').val("Brian").change();   
}  

});

Please let me know, what I missed that.

Thanks,

0 Upvotes
Siddharth_Shukl
Member

Hubspot form: programmatically set field value via jQuery

That’s good news. Do keep us updated about HS’s official response.

Cheers!

0 Upvotes
domino-dseno
Member | Partner
Member | Partner

Hubspot form: programmatically set field value via jQuery

Thank you for sharing your experience, but we modify the form after it has been injected via js, so it’s not a timing issue.

lucabartoli
Member | Diamond Partner
Member | Diamond Partner

Hubspot form: programmatically set field value via jQuery

So, now i’m curious about HS response to your ticket

0 Upvotes
domino-dseno
Member | Partner
Member | Partner

Hubspot form: programmatically set field value via jQuery

Still no significant response from HS,they say they are still “investigating”.

I ended up with a slighlty different code that triggers 3 different events (not just the “change” event) using vanilla js instead of jQuery. The conclusion is that there must be a problem with jQuery events and React/Hubspot Forms.

$.fn.notifyHubspot = function() {
  function doEvent( obj, name ) {
    try {
      var event = new Event( name, {target: obj, bubbles: true} );
      return obj ? obj.dispatchEvent(event) : false;
    }
    catch (e) {
      var event = document.createEvent('Event');
      event.initEvent(name, true, true);
      obj.dispatchEvent(event);
    }
  }

  $(this).each(function() {
    doEvent(this, 'change');
    doEvent(this, 'input');
    doEvent(this, 'blur');
  });

  return $(this);
};

$('input[name="firstname"]').val("damiano").notifyHubspot();

Hope this works for you as well.

NickMTL
Participant

Hubspot form: programmatically set field value via jQuery

Still experiencing this issue in Nov 2022... Your solution seemed to work. 

 

FYI for others, looks like some events work with some browsers, and throw errors in others (thus your multiple events and try catches). We found Safari based browsers to be annoying. 

0 Upvotes
lucabartoli
Member | Diamond Partner
Member | Diamond Partner

Hubspot form: programmatically set field value via jQuery

From my recent experience, the problem is the form is injected after window load by ReactJS.
Furthermore, the hubspot forms have a callback only if injected inside external websites, but not if injected as modules.
We resolved this issue by testing the existance of the form and calling a custom event, to which we attached all manipulations.

Horrible but works:

//Custom form loaded event
if($('#hs_form_target_my_form form').length) {
  $(document).trigger('formLoaded');
} else {
  $('#hs_form_target_my_form').on("DOMNodeInserted",  function(e) {
      if($(e.target).hasClass('hs-form')){
        $(document).trigger('formLoaded');
      }
     
  });
}
0 Upvotes
Dee1
Member

Hubspot form: programmatically set field value via jQuery

I’m experiencing the same problems since last Friday. Same code just stop to working since then. I opened a ticket on HS but they said the API are normal and no updates lately. Looking forward to hear any updates and solutions.

0 Upvotes
Siddharth_Shukl
Member

Hubspot form: programmatically set field value via jQuery

@damiano.seno.domino Any updates here? I’m working on a subscription page with check/uncheck for email preferences and just struggling with no good result :frowning: