Populating a firm field with jquery


#1

I was using a script i frankensteined from somewhere. I’m a JS newbie. It was working until a couple of weeks ago.
It is supposed to populate the form field “product name” with the text content of an H2 tag with class “.djc_title” elsewhere on the same page. Is my syntax ok?

    <!-- [if lte IE 8]>
<script charset="utf-8" src="//js.hsforms.net/forms/v2-legacy.js"> </script>
<![endif]-->
<script charset="utf-8" src="//js.hsforms.net/forms/v2.js" type="text/javascript"></script>
<script type="text/javascript">// <![CDATA[
hbspt.forms.create({ 
    portalId: 'xxxx',
    formId: 'xxxxx',
    onFormReady: function() {   $('input[name="productname"]').val($('h2.djc_title').text().trim($(this))).change(); } 
    });
// ]]></script>

#2

@Archeantus Does it work? Do you get an error?


#3

It doesn’t work. No errors in JS Console.
Also, because another framework the site uses has taken $, I have to replace all of my “$” with “jQuery”. This I had done and it was working until a couple of weeks ago.
Perhaps there is a more correct way to achieve what i am trying to do?


#4

@Archeantus I would try and start from scratch and build out the query again. Also if you had to replace $ with JQuery then why do you have the ‘$’ in your sample code?

Does $(‘input[name=“product”]’).val() return anything? If your site is up you can just use the dev tools and get to the console to see the return of it. Should be a quick way of testing.


#5

In the past, when I have included “jQuery” in my sample code on other forums everyone informs me that I should replace it with “$”. I thought was getting ahead of that this time by just altering the sample code.

Anywho, I am a JS newbie. I have never used the dev tools to debug JS. SO here goes an insanely dumb question: What do you mean by “Does “x” return anything?” Do I plug that in somewhere in dev tools?


#6

@Archeantus so if you hit f12 you should get a screen similar to this: (you can right click and hit inspect as well)

For fun type into the console (to the right othe > symbol) console.log(“HubSpot rocks”) You should see it print back HubSpot Rocks.

You can also test out other javascript and JQuery(which is just a library of JS) in here to make sure your calls are working correctly. THis way you don’t have to alter any code until you ahve it right.


#7

OK. On the page in question. Here is a shot of the console:


#8

woops! the syntantax for a printt to the screen is: console.log() note that you need to wrap everything in (). Also that was just an example of how you could use the dev console. For jquery you can use console.log or just srart with ‘$’

here is an example

I would try $(‘input[name"product"]’).val() and see if you get anything back? If not maybe a css class changed and you need to figure out the right name to retrieve it

I’m hoping this will give you a quick way to test out your JQuery call though so you can update your onFormReady


#9

jQuery(‘input[name=“productname”]’).val()
returns “” because the field is empty.

jQuery(‘h2.djc_title’).text().trim(jQuery(this))
returns the content of the h2 tag perfectly.

And when I put the full function into the console
$(‘input[name=“productname”]’).val($(‘h2.djc_title’).text().trim($(this))).change();
the field then populates as its supposed to on the form. What could that mean?


#10

Now that we have confirmed that your jquery still works let’s try this

onFormReady: function() { alert("this works’) }

Let’s make sure that the form is actually firing the function correctly.

If that doesn’t work you could try adding $form to the parameter to take in. Here is an example from our docs

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


#11

I get the alert just fine (after fixing the single quote).


#12

Hello Archeantus,

Can you send page link, or test links, I agree @pmanca, onFormSubmit, method does it, we had similar challenge and it works fine, for us. we needed to call Change method in continuation with val function.

Thanks


#13

@Archeantus Is this still an issue? I heard from some of my fellow co-workers in engineering that they were having trouble with forms last week from a number of people. If you put the original code in does it work now?


#14

It’s working again. I’m not sure why.


#15

@Archeantus I think this was an issue on our end last week. I wish I was privy to the issue in real time or had more information to give. I’m glad it is working again now.,