# Setting form field values with javascript

**URL:** <https://community.hubspot.com/t/setting-form-field-values-with-javascript/76169>\
**Category:** CMS Development\
**Tags:** javascript\
**Created:** [February 28, 2023, 5:15pm UTC](https://community.hubspot.com/t/setting-form-field-values-with-javascript/76169 "2023-02-28T17:15:38Z")\
**Posts on this page:** 7\
**Page:** 1

<div class="post-metadata">

**Author:** ![paradummy](https://avatars.discourse-cdn.com/v4/letter/p/8dc957/32.png) [@paradummy](https://community.hubspot.com/u/paradummy)\
**Post date:** [February 28, 2023, 5:15pm UTC](https://community.hubspot.com/t/setting-form-field-values-with-javascript/76169/1 "2023-02-28T17:15:38Z")

</div>

Hi folks

I’m trying to set the values for some form fields of a hubspot form with javascript. But the values gets deleted after validation (or in this case after input/change event). I remember that this used to work (and it’s also the solutions in a lot of other posts). Has anyone an idea what could be the problem? Or am I doing something wrong?

```lia-code-sample
window.addEventListener('message', event => {

 const formId = "MY_FORM_ID";

 if(event.data.type === 'hsFormCallback' && event.data.eventName === 'onFormReady' && event.data.id === formId) {

 const form = document.querySelector(`[data-form-id="${event.data.id}"]`);

 // doesn't work - triggers validation without setting the value
 const emailfield = form.elements.email;
 emailfield.value = "myemail@address.com";
 emailfield.dispatchEvent(new Event('input', { 'bubbles': true }));

 const companyfield = form.elements.company;
 companyfield.value = "MyCompanyName";
 companyfield.dispatchEvent(new Event('input', { 'bubbles': true }));

 const adressfield = form.elements.address;
 adressfield.value = "MyAddress";
 adressfield.dispatchEvent(new Event('input', { 'bubbles': true }));

 // doesn't work the jquery way either
 //$(companyfield).val("MyCompanyName").change();

 }

});

```

---

<div class="post-metadata">

**Author:** ![piersg](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/piersg/32/99782_2.png) [@piersg](https://community.hubspot.com/u/piersg)\
**Post date:** [February 28, 2023, 6:41pm UTC](https://community.hubspot.com/t/setting-form-field-values-with-javascript/76169/2 "2023-02-28T18:41:05Z")

</div>

Have you tried it with the `change` event instead of `input`? e.g.

`emailfield.dispatchEvent(new Event('change', { 'bubbles': true }));`

It may also be worth trying it with bubbling.

---

<div class="post-metadata">

**Author:** ![paradummy](https://avatars.discourse-cdn.com/v4/letter/p/8dc957/32.png) [@paradummy](https://community.hubspot.com/u/paradummy)\
**Post date:** [March 1, 2023, 12:44pm UTC](https://community.hubspot.com/t/setting-form-field-values-with-javascript/76169/3 "2023-03-01T12:44:26Z")

</div>

hey @piersg, I tried that as well unfortunately it doesn’t trigger the validation at all (and after the form submission it again clears the input). It seems that the react form fields only listen to the input event. I also tried it with jquery as it was mentioned in other posts but without success:

`$(companyfield).val("MyCompanyName").change();`

---

<div class="post-metadata">

**Author:** ![alyssamwilie](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/alyssamwilie/32/2072_2.png) [@alyssamwilie](https://community.hubspot.com/u/alyssamwilie)\
**Post date:** [March 2, 2023, 1:34pm UTC](https://community.hubspot.com/t/setting-form-field-values-with-javascript/76169/4 "2023-03-02T13:34:48Z")

</div>

I haven’t been able to get the global event listener to work for changing field inputs for a few months now. Not sure if HubSpot made some change that rendered field changing impossible in the event listener or what, but even some of our old forms that we hadn’t touched for over a year just straight up suddenly stopped working. Switched to using the form embed code and putting JavaScript directly in the callback. Bit annoying, but it at least works.

```lia-code-sample
hbspt.forms.create({
 portalId: '',
 formId: '',
 onFormReady: function($form) {
 // YOUR SCRIPT HERE
 } 
}); 

```

---

<div class="post-metadata">

**Author:** ![LucyMoss](https://avatars.discourse-cdn.com/v4/letter/l/cc9497/32.png) [@LucyMoss](https://community.hubspot.com/u/LucyMoss)\
**Post date:** [November 7, 2024, 12:27pm UTC](https://community.hubspot.com/t/setting-form-field-values-with-javascript/76169/5 "2024-11-07T12:27:47Z")

</div>

Did anyone find a solution to this? Looking to pass an ID into a hidden field.

---

<div class="post-metadata">

**Author:** ![Luc\_Benayoun](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/luc_benayoun/32/29863_2.png) [@Luc\_Benayoun](https://community.hubspot.com/u/Luc_Benayoun)\
**Post date:** [December 5, 2024, 10:00am UTC](https://community.hubspot.com/t/setting-form-field-values-with-javascript/76169/6 "2024-12-05T10:00:11Z")

</div>

Hi! 👋🏻

A bit late, but I’m getting this to work in my functions.

Maybe it can help someone trying to figure this out!

```lia-code-sample
(() => {
 const contactForms = document.querySelectorAll(".module--custom-form-contact");

 const initContactForm = (contactForm) => {
 if (contactForm.querySelector(".hs-email input[type=email]")) {
 contactForm.querySelector(".hs-email input[type=email]").value = "myemail@address.com";
 contactForm.querySelector(".hs-email input[type=email]").dispatchEvent(new Event('input', { 'bubbles': true }));
 }
 }

 window.addEventListener('message', event => {
 if (event.data.type === 'hsFormCallback' && event.data.eventName === 'onFormReady') {
 contactForms && contactForms.forEach(contactForm => {
 if (contactForm.querySelector(".hs-form") && (event.data.id === contactForm.querySelector(".hs-form").dataset.formId)) { 
 initContactForm(contactForm)
 }
 })
 }
 })
})();

```

Cheers,

Luc

---

<div class="post-metadata">

**Author:** ![OChrzan](https://avatars.discourse-cdn.com/v4/letter/o/eb8c5e/32.png) [@OChrzan](https://community.hubspot.com/u/OChrzan)\
**Post date:** [July 17, 2025, 3:55pm UTC](https://community.hubspot.com/t/setting-form-field-values-with-javascript/76169/7 "2025-07-17T15:55:17Z")

</div>

You can now do this by using the HubSpotFormsV4 JS object. Like this:

```lia-code-sample
function setHsField(fieldName, value) {
 if (HubSpotFormsV4) {
 var hsForms = HubSpotFormsV4.getForms();
 var spInput = document.querySelector('input[name="0-1/' + fieldName + '"]');

 if (hsForms && spInput) {
 window.console && window.console.log('HS Form found. Setting to ' + value);
 hsForms[0].setFieldValue('0-1/' + fieldName, value); 
 }
 }
}

```

Docs are here:

> **[Accounts Dashboard | HubSpot](https://app.hubspot.com/myaccounts?next=developerdocs&redirect=%2Fapi-reference%2Fmarketing-marketing-events-v3%2Fguide)**