Progressive form: How to handle input value change by external JS ?

Developer Support CMS Development
,
1

Hi !

I made a JS script in order to replace a city input by a select, with an autocomplete with zip input value. It’s working well on simple form.

But in progressive form i have some issues.

The value is correctly set in the input, but, some how, the value is reset when i submit the form (or, if i display the original city input, when i click on the input). I think Hubspot store the value in JS var, and didn’t get notice of the input value change.

See below the render :

bmabille_0-1731687779827.png
bmabille_0-1731687779827.png579×275 10.5 KB

And then the script in the select change :

 select.on("change",
 function() {
 cityInput.attr('value', this.value);
 cityInput.val(this.value);
 cityInput.trigger('change');
 cityInput[0].defaultValue = this.value;
 cityInput[0].dispatchEvent(event);
 }
 );

Did you have an idea of how to get it work ?

2

@bmabille is this form using the New Form Editor with Steps?

3

Hi @MrJustinGivens , yes, it in this specific form that my JS code didn’t work.

4

Yeah, I’ve also heard others say the same things. I think the forms team is currently working on making the new form js extendable.