Strange behavior regarding callback function onFormSubmit


#1

Hello,

We have a page with 2 forms inside, the first one has a callback function “onFormSubmit” like below.

hbspt.forms.create({
_ portalId: ‘’,_
_ formId: ‘’,_
_ onFormSubmit: function($form) {_
_ // OUR SCRIPT HERE_
_ } _
});

Upon submitting, the callback function does get called. But the parameter “$form” passed in is NOT the right form, it is the second form on the page. If I flip the order of forms, make the form with callback function to be the second form on the page, then it works.

I looked into hubspot v2.js (https://js.hsforms.net/forms/v2.js). It looks like the callback is handled here,

==============================================================
runCustomerCallbackFunction: function(e, n) {
var r, o, i;
if (i = e.props[n],
i && “function” == typeof i) {
if (“undefined” == typeof jQuery || null === jQuery)
return console.error(“The " + n + " function in hbspt.forms.create requires jQuery. It was not run.”);
r = jQuery(t.findDOMNode(e));
try {
return i®
} catch (a) {
return o = a,
console.error(“There was an error when running your " + n + " function from hbspt.forms.create”),
console.error(o)
}
}
}

==============================================================

I noticed it might be something in this line “r = jQuery(t.findDOMNode(e));”

“t.findDOMNode(e)” always returns the last form on the page while “e.getDOMNode()” returns the expect form.

Is this a bug or am I doing something wrong here? Please help, thank you!


#2

Does anyone have the similar problem? Or is it just me?


#3

Hi feng,

It seems like changing the hubspot javascript to use getDOMNode would only create the reverse problem for someone else. I’ve not used the callback function in this way. Is there a way to specify the form in the create parameters? Perhaps $(‘form[name=YOURFORMNAME]’) or similar jquery command?


#4

Thanks, Will,

This $form is controlled by hubspot inside their function “runCustomerCallbackFunction”. The whole purpose of this function is to find the form that triggers “submit” event and call the callback function with the correct form. And it seems it was able to get the correct form from “e.getDOMNode()”. That’s why I am thinking it might be something wrong here.