addEventListener is not a function?

Developer Support CMS Development
1

I have this code:
window.addEventListener(‘message’, event => {
if(event.data.type === ‘hsFormCallback’ && event.data.eventName === ‘onFormReady’) {
let sourceField = document.getElementsByName(“city”);
sourceField.addEventListener(“change”, myFunction);
function myFunction() {
console.log(" ~~~~changing");
}
}
}

When I load the form I get this error in Chrome DevTools Console - Uncaught TypeError: sourceField.addEventListener is not a function

Ultimately, I want to add the value entered in the City field into a hidden form field. Any thoughts on what I’m doing wrong here? Or a better way to do what I’m trying to do?

Thanks.

2

You’re using document.getElementsByName, “elements” plural. so you need to specify that it’s the first element you’re watching for a change:

sourceField[0].addEventListener("change", myFunction);

I’ve tested it and it’ll work if you make this change.

profile2022a.jpg
profile2022a.jpg2325×2324 692 KB

Barry Grennan

Freelance HubSpot CMS Developer

Website | Contact | LinkedIn

3

Thank you! This got me the rest of the way through this project.

4

@SRalston05

Hi.

If you’re using an embedded form, the form element is contained within an iframe.

In this case, how about this?

 hbspt.forms.create({
 region: "...",
 portalId: "...",
 formId: "...",
 onFormReady: function($form) {
 const sourceField = $form.querySelector('[name="city"]');
 sourceField.addEventListener("change", myFunction);

 function myFunction() {
 console.log(" ~~~~changeing");
 }
 }
 });

Thanks.

5

Hi @SRalston05

The error message is indicating that `sourceField` is not a valid DOM element and therefore does not have an `addEventListener` function. The `getElementsByName` function returns a collection of elements, even if there is only one element with the specified name. Therefore, you need to access the first element of the collection to attach the event listener.

Here is the corrected code:

```javascript
window.addEventListener(‘message’, event => {
if(event.data.type === ‘hsFormCallback’ && event.data.eventName === ‘onFormReady’) {
let sourceField = document.getElementsByName(“city”)[0];
sourceField.addEventListener(“change”, myFunction);

function myFunction() {
let cityFieldValue = sourceField.value;
let hiddenField = document.getElementsByName(“hidden_city_field”)[0];
hiddenField.value = cityFieldValue;
}
}
});
```

In this code, `sourceField` is accessed using `[0]` to get the first element of the collection. The `myFunction` function is modified to retrieve the value of the `city` field and set the value of the hidden field named `hidden_city_field`.

Make sure to replace `hidden_city_field` with the name of the actual hidden field you want to set the value of.

Note that the `change` event is fired when the user changes the value of the field and moves focus away from the field, such as by clicking outside of the field or pressing the Tab key. If you want to update the hidden field in real-time as the user types, you can use the `input` event instead of the `change` event.

Please mark it as SOLUTION ACCEPTED if you like the solution.

Thank you!