jQuery Not Working

[Chris_w]

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.

[Gurutechnolabs]

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

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

[Chris_w]

Christopher_G:

onFormReady: function($form) { jQuery('input[name="firstname"]').val('Brian').change(); }

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?

[Christopher_G]

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.

[Chris_w]

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

[Christopher_G]

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

[IsaacTakushi · Accepted solution]

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.

[Chris_w]

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

[Christopher_G]

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.

[Chris_w]

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.

2018-09-11 09_48_06-Copy of_ Contact Us (dummy page to design and test hubspot) - AML Oceanographic...

[IsaacTakushi]

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?