topic Re: jQuery Not Working in APIs & Integrations

jQuery Not Working

Chris_w — Mon, 10 Sep 2018 21:56:15 GMT

I have tried everything I can think of but I cannot figure out why I cant modify my forms with jQuery.

putting:

jQuery('input[name="firstname"]').val('Brian').change();

into the browser console yields nothing.

Re: jQuery Not Working

IsaacTakushi — Tue, 11 Sep 2018 16:32:28 GMT

Hi @chris.w_AML,

If jQuery is loaded before the HubSpot form, then I would expect that code to work (it works for my own forms). Have you tried

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

or some of the methods outlined in this topic?

Re: jQuery Not Working

Chris_w — Tue, 11 Sep 2018 16:52:31 GMT

Here is a picture of what I get when I put that query into the console. I am using wordpress as well if there are any known issues with that. I've tried putting this same query into my .js file too and nothing happens.

Re: jQuery Not Working

Christopher_G — Thu, 13 Sep 2018 20:23:03 GMT

Hey @chris.w_AML
I took a peek at your development project via the URL in your console image.

You are loading a few Hubspot forms on the same page, while this is not a problem in itself you might want to rework how you are doing so in the code. Are you trying to change the Name input for all forms, or a specific form? If a specific form, I'd suggest using the #ID of the input instead.

I found the test where you are attempting to change your name input:

<script>
  hbspt.forms.create({
	portalId: "3930388",
	formId: "305ce453-e0f3-4923-9877-cd6a7a6def9c"
    window.onload = function() {
   jQuery('input[name="firstname"]').val('Brian').change();
   alert('test');
     
}  
});
</script>

This is currently returning an error, Instead you should use the onFormReady callback that Hubspot
provides. This will ensure that your .change event fires after the form has loaded.

hbspt.forms.create({
      portalId: '',
      formId: '',
       onFormReady: function($form) {
           jQuery('input[name="firstname"]').val('Brian').change();
        } 
});

Now, if this code returns an error there is an issue with the way Jquery is being loaded, I didn't have a chance to dig deeper, but I hope this steers you in the right direction.

Re: jQuery Not Working

Chris_w — Thu, 13 Sep 2018 20:41:43 GMT

Thank you for your response, I had all of the forms on a dummy page for testing purposes. I have removed all but one and used the onFormReady in the form creation code but when I try that It disappears.

Just in case, here is the embeded form:
script charset="utf-8" type="text/javascript" src="//js.hsforms.net/forms/shell.js">/script>
script>
hbspt.forms.create({
portalId: "3930388",
formId: "305ce453-e0f3-4923-9877-cd6a7a6def9c"
onFormReady: function($form) {
jQuery('input[name="firstname"]').val('Brian').change();
}
});

/script>

Without and custom javascript, the forms work perfectly, which leads me to believe it's probably an issue with our jQuery. I just took this wordpress website over from someone else and the Javascript is a bit of a mess. Do you have any idea how to fix this or can to point me towards some articles/forums that might help?

Re: jQuery Not Working

IsaacTakushi — Thu, 13 Sep 2018 21:08:51 GMT

Hey @chris.w_AML,

It seems that you have a Marketing Hub Starter subscription. Like collected forms and lead flows, these embed codes cannot be modified. This is outlined at the top of this documentation:

Note: These options are only available for forms created using the marketing form builder available with a paid Basic, Professional, or Enterprise marketing subscription. Other forms, such as collected forms or lead flows, do not support these customization options.

Apologies for the inconvenience and missing this detail earlier.

Re: jQuery Not Working

Christopher_G — Thu, 13 Sep 2018 22:55:42 GMT

Apologies, I’m missing a comma after the formid variable. Please update that and try again.

I can take another look when I get to my desk as well.

Re: jQuery Not Working

Chris_w — Thu, 13 Sep 2018 23:23:49 GMT

Can I Alter css or upload directly to the API with the starter version?

Re: jQuery Not Working

Chris_w — Thu, 13 Sep 2018 23:25:36 GMT

Thank you for your help but I just found out you can even alter forms with JQ if you have the starter version

Re: jQuery Not Working

Christopher_G — Fri, 14 Sep 2018 02:32:04 GMT

Oh yes, sorry I didn't see @Isaac_Takushi 's reply while on the road.

Re: jQuery Not Working

Gurutechnolabs — Wed, 26 Sep 2018 13:32:44 GMT

jQuery('input[name="firstname"]').change(function(){

if(jQuery(this).val() == 'Brian'){
code
}else{
code
}
});